/* ================================
   全局变量（可按需微调）
   （不会改你的导航栏 JS/CSS）
================================ */
:root {
  /* 若 header 为 fixed，请填真实高度，统一高度会自动扣除 */
  --header-h: 0px;

  /* 统一 section 高度（手机/平板/桌面） */
  --section-mobile-h: 94svh;
  --section-tablet-h: 92svh;
  --section-desktop-h: 90svh;

  /* 通用宽度与左右内边距 */
  --page-max: clamp(1040px, 74vw, 1560px);
  --page-pad-x: clamp(20px, 4vw, 96px);

  /* ===== Section 1 ===== */
  --s1-gap: clamp(16px, 2.2cqw, 28px);
  --s1-title-pb: clamp(16px, 2.2cqw, 28px);
  --s1-cta-pt: clamp(16px, 2.0cqw, 28px);
  --s1-cta-pl: clamp(12px, 1.8cqw, 24px);

  /* S1 按钮 */
  --cta-w: 165px;
  --cta-h: clamp(36px, 4.6cqw, 52px);
  --dot-d: 24px;
  --edge-gap: 12px;
  --arrow-size: 11px;
  --move: calc(var(--cta-w) - var(--dot-d) - 2 * var(--edge-gap));

  /* S1 桌面图片容器缩放 */
  --photo-desktop-scale: 92%;

  /* S1 图片动效（作用在 <img>） */
  --s1-float-dy: 6px;
  /* 待机上下浮动幅度 */
  --s1-hover-raise: -6px;
  /* 悬停上移距离 */
  --s1-hover-scale: 1.02;
  /* 悬停缩放 */
  --s1-drop: drop-shadow(0 14px 40px rgba(0, 0, 0, .18)) drop-shadow(0 6px 16px rgba(0, 0, 0, .12));

  /* ===== Section 2 ===== */
  --s2-pad-y: clamp(56px, 16svh, 160px);
  --s2-gap: clamp(16px, 3svh, 28px);
  --s2-title-fz: clamp(48px, 12vw, 160px);
  --s2-desc-max: 68ch;

  /* ===== Section 3 ===== */
  --s3-gap: clamp(18px, 2.6cqw, 32px);
  --s3-title-fz: clamp(56px, 10cqw, 160px);
  --s3-desc-max: 60ch;
  --s3-pad: clamp(20px, 3cqw, 36px);
  --s3-photo-w: clamp(320px, 40cqw, 720px);

  /* S3 文本整体下移（平板/桌面使用） */
  --s3-text-shift: clamp(28px, 8vh, 140px);
}

/* ================================
   基础
================================ */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #dedede;
  color: #111;
}

html[data-theme="dark"] body {
  background: #0f0f10;
  color: #eee;
}

/* ================================
   通用 section 容器 & 统一高度
================================ */
.section .wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}

@media (max-width:900px) {
  .section .wrapper {
    min-height: calc(var(--section-mobile-h) - var(--header-h));
    display: grid;
    align-content: stretch;
  }
}

@media (min-width:901px) and (max-width:1199px) {
  .section .wrapper {
    min-height: calc(var(--section-tablet-h) - var(--header-h));
    display: grid;
    align-content: stretch;
  }
}

@media (min-width:1200px) {
  .section .wrapper {
    min-height: calc(var(--section-desktop-h) - var(--header-h));
    display: grid;
    align-content: stretch;
  }
}

/* ================================
   Section 1
================================ */
.section.s1 {
  background: #dedede;
}

.section.s1 .wrapper {
  padding-block: clamp(32px, 7svh, 96px);
  place-items: center;
}

.s1-stage {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  contain: size;
  overflow: clip;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "title photo"
    "cta   photo";
  gap: var(--s1-gap);
  padding: clamp(20px, 3cqw, 36px);
  container-type: inline-size;
}

/* 右图容器：只负责布局，不做动效 */
.s1-photo {
  grid-area: photo;
  place-self: center;
  width: var(--photo-desktop-scale);
  height: var(--photo-desktop-scale);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

/* ✅ 动效在图片本体 */
.s1-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;

  /* 待机轻浮动（尊重“减少动态”） */
  animation: s1-float 6s ease-in-out infinite alternate;
  will-change: transform, filter;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1), filter .4s ease;
}

/* 悬停：上浮 + 缩放 + 投影（仅指针设备） */
@media (hover:hover) {
  .s1-photo:hover img {
    transform: translateY(var(--s1-hover-raise)) scale(var(--s1-hover-scale));
    filter: var(--s1-drop);
  }
}

/* 待机浮动动画 */
@keyframes s1-float {
  from {
    transform: translateY(calc(var(--s1-float-dy) * -1));
  }

  to {
    transform: translateY(var(--s1-float-dy));
  }
}

/* 减少动态 */
@media (prefers-reduced-motion:reduce) {
  .s1-photo img {
    animation: none;
    transition: none;
  }
}

/* 标题与按钮 */
.s1-title {
  grid-area: title;
  align-self: end;
  justify-self: start;
  margin: 0;
  padding-bottom: var(--s1-title-pb);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  font-size: clamp(48px, 9.2cqw, 140px);
  color: #0a0a0a;
}

.s1-title .en {
  font-weight: 900;
}

.s1-title .cn {
  font-weight: 700;
  margin-left: clamp(12px, 1.4cqw, 24px);
}

.s1-cta-wrap {
  grid-area: cta;
  align-self: start;
  justify-self: stretch;
  padding-top: var(--s1-cta-pt);
  padding-left: var(--s1-cta-pl);
}

.s1-cta {
  position: relative;
  display: inline-block;
  width: var(--cta-w);
  height: var(--cta-h);
  border-radius: 999px;
  background: #0d0d0d;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: background-color .15s, transform .15s;
}

.s1-cta:hover {
  background: #111;
  transform: translateY(-2px);
}

.s1-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--edge-gap);
  width: var(--dot-d);
  height: var(--dot-d);
  border-radius: 50%;
  background: #fff;
  transform: translate(0, -50%);
  transition: transform .45s cubic-bezier(.25, .6, .2, 1);
}

.s1-cta:hover::before {
  transform: translate(var(--move), -50%);
}

.s1-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--edge-gap) + var(--dot-d)/2);
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition: transform .45s cubic-bezier(.25, .6, .2, 1);
}

.s1-cta:hover::after {
  transform: translate(calc(-50% + var(--move)), -50%);
}

/* S1：移动端栈式 */
@media (max-width:900px) {
  :root {
    --edge-gap: 10px;
  }

  .section.s1 .wrapper {
    padding-block: clamp(20px, 5svh, 40px);
  }

  .s1-stage {
    --s1-stage-pt: clamp(14px, 3.2svh, 24px);
    --s1-stage-pb: clamp(14px, 3.2svh, 24px);
    padding-block: var(--s1-stage-pt) var(--s1-stage-pb);
    min-height: calc(100% - (var(--s1-stage-pt) + var(--s1-stage-pb)));
    height: auto;
    aspect-ratio: auto;

    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content;
    grid-template-areas:
      "photo"
      "title"
      "cta";

    justify-items: start;
    align-items: start;
    align-content: start;
    row-gap: clamp(12px, 2.6svh, 18px);
  }

  .s1-photo {
    place-self: stretch;
    width: 100%;
    aspect-ratio: 16/10;
    min-height: 36svh;
    max-height: 52svh;
    margin: 0;
  }

  .s1-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .s1-title {
    padding-bottom: clamp(8px, 1.2svh, 12px);
    font-size: clamp(28px, 9vw, 44px);
  }

  .s1-cta-wrap {
    padding-top: clamp(8px, 1.2svh, 12px);
    padding-left: 0;
  }
}


/* ================================
   Section 2（两行文字）
================================ */
.section.s2 {
  background: #fff;
}

.section.s2 .wrapper {
  padding-inline: var(--page-pad-x);
  padding-block: var(--s2-pad-y);
}

.section.s2 .wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
}

.s2-stage {
  display: grid;
  justify-items: center;
  gap: var(--s2-gap);
  text-align: center;
  align-content: center;
}

.s2-title {
  margin: 0;
  line-height: 1.02;
  font-weight: 800;
  font-size: var(--s2-title-fz);
  letter-spacing: .01em;
  text-align: center;
}

.s2-desc {
  margin: 0;
  max-width: var(--s2-desc-max);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.8;
  color: #222;
}

.s2-desc .en {
  font-style: italic;
  font-weight: 700;
}

html[data-theme="dark"] .section.s2 {
  background: #0f0f10;
}

html[data-theme="dark"] .s2-title {
  color: #eee;
}

html[data-theme="dark"] .s2-desc {
  color: #ddd;
}

/* S2：移动端左对齐 & 间距优化 */
@media (max-width:900px) {
  :root {
    --s2-pad-y: clamp(40px, 14svh, 120px);
    --s2-gap: clamp(20px, 4.8svh, 32px);
    --s2-title-fz: clamp(40px, 16vw, 96px);
  }

  .section.s2 .wrapper {
    padding-top: clamp(56px, 14svh, 120px);
    padding-bottom: clamp(40px, 10svh, 120px);
  }

  .s2-stage {
    justify-items: start;
    text-align: left;
    align-content: center;
  }

  .s2-title {
    text-align: left;
    padding-bottom: clamp(8px, 1.8svh, 16px);
  }

  .s2-desc {
    line-height: 1.9;
  }
}

/* 平板/桌面：阅读更松 */
@media (min-width:901px) and (max-width:1199px) {
  .section.s2 .wrapper {
    padding-block: clamp(80px, 12vh, 160px);
  }

  .s2-stage {
    row-gap: clamp(24px, 4vh, 40px);
  }

  .s2-title {
    margin-bottom: clamp(12px, 2vh, 20px);
  }

  .s2-desc {
    line-height: 1.95;
    max-width: 60ch;
  }
}

@media (min-width:1200px) {
  .section.s2 .wrapper {
    padding-block: clamp(96px, 14vh, 200px);
  }

  .s2-stage {
    row-gap: clamp(28px, 4.5vh, 48px);
  }

  .s2-title {
    margin-bottom: clamp(14px, 2.2vh, 24px);
  }

  .s2-desc {
    line-height: 2.0;
    max-width: 58ch;
  }
}

/* ================================
   SECTION 3 · 重写版（stage 占满 100% 高度）
   结构：
   <section class="section s3">
     <div class="wrapper">
       <div class="s3-stage">
         <h2 class="s3-title">…</h2>
         <p  class="s3-desc">…</p>
         <figure class="s3-photo"><img …></figure>
       </div>
     </div>
   </section>
================================ */
.section.s3 {
  background: #dedede;
}

.section.s3 .wrapper {
  /* wrapper 已由全局规则给了 min-height（统一高度） */
  padding-inline: var(--page-pad-x);
  padding-block: clamp(24px, 6svh, 56px);
  display: grid;
  align-content: stretch;
  /* 让子元素可以拉满 */
}

.section.s3 .s3-stage {
  /* 关键：占满 wrapper 的可用高度 */
  height: 100%;
  min-height: 100%;
  display: grid;
  gap: clamp(16px, 2.6cqw, 28px);
  padding: clamp(16px, 2.6cqw, 24px);

  /* 默认：移动端（栈式，上图下文） */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  /* 图 1fr 吃剩余高度，标题/正文自适应 */
  grid-template-areas:
    "photo"
    "title"
    "desc";

  /* 避免旧样式影响 */
  aspect-ratio: auto !important;
  overflow: visible !important;
  container-type: inline-size;
}

/* 元素位 */
.section.s3 .s3-title {
  grid-area: title;
  margin: 0;
  line-height: 1.02;
  font-weight: 900;
  color: #0a0a0a;
  white-space: normal;
  /* 允许换行 */
  font-size: clamp(28px, 9.5vw, 44px);
  padding-bottom: clamp(6px, 1svh, 10px);
}

.section.s3 .s3-desc {
  grid-area: desc;
  margin: 0;
  max-width: 68ch;
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.9;
  color: #222;
  padding-top: clamp(8px, 1.2svh, 12px);
}

.section.s3 .s3-photo {
  grid-area: photo;
  /* 关键：让图片区域可拉伸填满 1fr 行 */
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: 36svh;
  /* 手机兜底可视高度 */
  background: transparent;
}

.section.s3 .s3-photo>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 完整显示，不裁切 */
  display: block;
  animation: s1-float 6s ease-in-out infinite alternate;
  will-change: transform, filter;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1), filter .4s ease;
}

@media (hover:hover) {
  .section.s3 .s3-photo:hover img {
    transform: translateY(var(--s1-hover-raise)) scale(var(--s1-hover-scale));
    filter: var(--s1-drop);
  }
}

@media (prefers-reduced-motion:reduce) {
  .section.s3 .s3-photo>img {
    animation: none;
    transition: none;
  }
}

/* 平板/桌面：左文右图（右边图片整列填满），同样占满高度 */
@media (min-width: 901px) {
  .section.s3 .s3-stage {
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto 1fr;
    /* 标题 auto，正文 + 右图占余量 */
    grid-template-areas:
      "title photo"
      "desc  photo";
  }

  .section.s3 .s3-title {
    font-size: clamp(40px, 7cqw, 120px);
    white-space: nowrap;
    /* 桌面单行更干净 */
    padding-bottom: clamp(10px, 1.6svh, 16px);
  }

  .section.s3 .s3-desc {
    font-size: clamp(16px, 1.6cqw, 20px);
  }

  .section.s3 .s3-photo {
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
    /* 允许被网格控制高度 */
  }
}

/* 大桌面：稍微把左侧往下“错层”一些（可选） */
@media (min-width: 1200px) {
  .section.s3 .s3-title {
    margin-top: clamp(12px, 6vh, 100px);
  }

  .section.s3 .s3-desc {
    margin-top: clamp(6px, 3vh, 50px);
  }
}


/* ===== S3 等分网格（标题区与正文区等高） ===== */
@media (min-width: 901px) {
  .section.s3 .s3-stage {
    /* 舞台已是 100% 高，这里把两行等分 */
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* ← 等高关键 */
    grid-template-areas:
      "title photo"
      "desc  photo";
    align-items: stretch;
    /* 行内元素拉满格子 */
  }

  /* 右侧图片整列填满，两行跨越 */
  .section.s3 .s3-photo {
    grid-area: photo;
    grid-row: 1 / span 2;
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
    /* 允许由网格控制高度 */
  }

  .section.s3 .s3-photo>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 标题格：内容贴近格子的“底边”显示 */
  .section.s3 .s3-title {
    grid-area: title;
    margin: 0;
    align-self: end;
    /* ↓靠下 */
    justify-self: start;
    padding-bottom: clamp(10px, 1.6svh, 16px);
    /* 与格线留呼吸 */
    white-space: nowrap;
    /* 桌面单行更稳；用 .fit 防溢出 */
    min-height: 0;
  }

  /* 正文字格：内容贴近格子的“顶边”显示 */
  .section.s3 .s3-desc {
    grid-area: desc;
    margin: 0;
    align-self: start;
    /* ↑靠上 */
    justify-self: start;
    padding-top: clamp(8px, 1.2svh, 12px);
    max-width: 68ch;
    overflow: hidden;
    /* 极端情况下防溢出抖动 */
    min-height: 0;
  }
}

/* （可选）如果你希望标题允许换行则删掉上面的 nowrap：
.section.s3 .s3-title{ white-space: normal; }
并在 HTML 标题上保留 class="fit" data-lines="2" data-balance="true"
*/

/* ========== S3：移动/平板不限制高度；仅桌面端等分且占满 ========== */

/* 默认（≤1199px）：栈式，自由增高 */
.section.s3 .s3-stage {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  /* 图片/标题/正文 按内容自适应 */
  grid-template-areas:
    "photo"
    "title"
    "desc";
  gap: clamp(16px, 2.6cqw, 28px);
  padding: clamp(16px, 2.6cqw, 24px);
}

.section.s3 .s3-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  min-height: 36svh;
  /* 可调：让手机上图片更有呼吸感 */
}

.section.s3 .s3-photo>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section.s3 .s3-title {
  white-space: normal;
  /* 移动端可换行 */
  font-size: clamp(28px, 9.5vw, 44px);
  align-self: end;
}

.section.s3 .s3-desc {
  align-self: start;
  max-width: 68ch;
}

/* ≥1200px（桌面端）：舞台占满 + 左文右图 + 上下两行等高 */
@media (min-width: 1200px) {
  .section.s3 .s3-stage {
    height: 100% !important;
    min-height: 100% !important;

    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* 等分两行 */
    grid-template-areas:
      "title photo"
      "desc  photo";
    align-items: stretch;
  }

  .section.s3 .s3-photo {
    grid-area: photo;
    grid-row: 1 / span 2;
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
    aspect-ratio: auto;
    /* 由网格控制高度 */
  }

  .section.s3 .s3-photo>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .section.s3 .s3-title {
    grid-area: title;
    align-self: end;
    /* 贴近下边 */
    justify-self: start;
    white-space: nowrap;
    /* 桌面端单行更干净（有 .fit 兜底） */
    padding-bottom: clamp(10px, 1.6svh, 16px);
    font-size: clamp(40px, 7cqw, 120px);
  }

  .section.s3 .s3-desc {
    grid-area: desc;
    align-self: start;
    /* 贴近上边 */
    justify-self: start;
    padding-top: clamp(8px, 1.2svh, 12px);
    font-size: clamp(16px, 1.6cqw, 20px);
    overflow: hidden;
  }
}

/* ===== S3 图片溢出修复（移动端 + 桌面端） ===== */

/* 统一：图片容器裁边，防止悬停放大溢出 */
.section.s3 .s3-photo {
  overflow: hidden !important;
  /* 关键：关掉外泄 */
  /* 可选：给一点内边距，避免贴边看起来“顶到线” */
  padding: clamp(6px, 0.8cqw, 12px);
  box-sizing: border-box;
}

/* 移动端：保持你之前 16:10 视窗，不溢出 */
@media (max-width: 1199px) {
  .section.s3 .s3-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
    min-height: 36svh;
  }

  .section.s3 .s3-photo>img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 完整显示，不裁切 */
  }
}

/* 桌面端：右列跨两行填满，但仍不溢出 */
@media (min-width: 1200px) {
  .section.s3 .s3-photo {
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
    /* 交给网格控制高度 */
  }

  .section.s3 .s3-photo>img {
    /* 用“最大宽高 100% + 自适应”避免拉伸与外溢 */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* 画面完整可见 */
    transform-origin: center center;
    /* 悬停放大不往外顶 */
  }
}




/* =========================================
   SECTION 4  ·  目标用户（白底 / 21:9 / 左→右平移 / 信息带透明）
   - 顶图：固定 21:9 容器，object-fit: cover 居中裁切
   - 图片从左向右缓慢平移一次后停住
   - 标题缩小防溢出，并允许换行
   - 信息带（.s4-info）无背景色
   - 遵守统一高度（手机/平板/桌面）
========================================= */
:root {
  --s4-hero-ratio: 21/9;
  /* 你的超宽图比例 */
  --s4-gap-y: clamp(20px, 3.5svh, 32px);
  --s4-band-pad: clamp(16px, 2.8svh, 24px);
  --s4-band-gap: clamp(14px, 3cqw, 20px);

  /* 动画参数：调大更慢 */
  --s4-pan-duration: 22s;
  --s4-pan-delay: .4s;
}

/* 容器：本节白底（暗色模式也保持白） */
.section.s4 {
  background: #fff;
}

html[data-theme="dark"] .section.s4 {
  background: #fff;
}

/* wrapper 仍按版心排版与统一高度 */
.section.s4 .wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  display: grid;
  row-gap: var(--s4-gap-y);
  align-content: center;
}

/* 顶图容器：固定比例 + 裁切 */
.section.s4 .s4-hero {
  margin: 0;
  width: 100%;
  aspect-ratio: var(--s4-hero-ratio);
  overflow: hidden;
  background: transparent;
  /* 去掉占位白底 */
}

.section.s4 .s4-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  /* 从左边开始显示 */
  display: block;

  /* 关键动画：把裁切窗口从左平移到右，并停住 */
  animation: s4-pan var(--s4-pan-duration) linear var(--s4-pan-delay) 1 both;
}

@keyframes s4-pan {
  from {
    object-position: left center;
  }

  to {
    object-position: right center;
  }
}

/* 信息带：左标题 + 右说明（背景改为透明） */
.section.s4 .s4-info {
  width: 100%;
  background: transparent;
  /* ✅ 取消白色背景条 */
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: end;
  column-gap: var(--s4-band-gap);
  padding: var(--s4-band-pad) 0;
}

/* 标题缩小、防溢出、可换行 */
.section.s4 .s4-title {
  margin: 0;
  line-height: 1;
  font-weight: 900;
  color: #111;
  font-size: clamp(32px, 7cqw, 96px);
  white-space: normal;
  word-break: keep-all;
  /* 中文友好换行 */
}

.section.s4 .s4-title .bar {
  margin-left: .2em;
}

/* 说明文字 */
.section.s4 .s4-desc {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  color: #222;
}

/* 移动端：栈式，左对齐，统一高度 */
@media (max-width:900px) {
  .section.s4 .wrapper {
    min-height: calc(var(--section-mobile-h) - var(--header-h));
    row-gap: clamp(14px, 3svh, 20px);
  }

  .section.s4 .s4-info {
    grid-template-columns: 1fr;
    row-gap: clamp(8px, 1.6svh, 12px);
    align-items: start;
    text-align: left;
    padding: clamp(14px, 2.6svh, 20px) 0;
  }

  .section.s4 .s4-title {
    font-size: clamp(26px, 8.5vw, 40px);
  }

  .section.s4 .s4-desc {
    font-size: clamp(15px, 4vw, 18px);
  }

  /* 手机可改为 16:9，避免过矮；若仍需 21:9，可删掉这一行 */
  .section.s4 .s4-hero {
    aspect-ratio: 16/9;
  }
}

/* 平板/桌面：统一高度（如你已有全局规则，也可删除） */
@media (min-width:901px) and (max-width:1199px) {
  .section.s4 .wrapper {
    min-height: calc(var(--section-tablet-h) - var(--header-h));
  }
}

@media (min-width:1200px) {
  .section.s4 .wrapper {
    min-height: calc(var(--section-desktop-h) - var(--header-h));
  }
}

/* 暗色文本优化（保持白底，因此仅调文本颜色即可） */
html[data-theme="dark"] .section.s4 .s4-title {
  color: #111;
}

html[data-theme="dark"] .section.s4 .s4-desc {
  color: #222;
}

/* 减少动态：尊重用户系统设置 */
@media (prefers-reduced-motion: reduce) {
  .section.s4 .s4-hero img {
    animation: none;
    object-position: center;
  }
}

/* ===== Section5 · 设计方法 ===== */
:root {
  --s5-gap-x: clamp(20px, 3cqw, 28px);
  --s5-gap-y: clamp(18px, 3svh, 26px);
  --s5-card-r: 18px;
}

.section.s5 {
  background: #ececec;
  /* 视觉稿里的浅灰 */
}

html[data-theme="dark"] .section.s5 {
  background: #121314;
}

.section.s5 .wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  padding-block: clamp(40px, 10svh, 120px);
}

.s5-title {
  margin: 0 0 .4em;
  line-height: 1;
  font-weight: 900;
  font-size: clamp(44px, 9cqw, 120px);
}

.s5-desc {
  margin: 0 0 clamp(20px, 4svh, 32px);
  max-width: 72ch;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  color: #222;
}

html[data-theme="dark"] .s5-desc {
  color: #ddd;
}

.s5-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5-gap-y) var(--s5-gap-x);
}

.s5-card {
  margin: 0;
  background: #b9b9b9;
  border-radius: var(--s5-card-r);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}

html[data-theme="dark"] .s5-card {
  background: #2a2a2a;
}

.s5-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  /* 方形缩略图 */
  object-fit: cover;
  /* 充满卡片 */
  display: block;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1), filter .2s ease;
}

@media (hover:hover) {
  .s5-card img:hover {
    transform: scale(1.03);
    filter: brightness(1.03);
    cursor: zoom-in;
  }
}

.s5-card figcaption {
  padding: clamp(10px, 1.6svh, 14px) clamp(12px, 2cqw, 16px);
  font-size: clamp(14px, 1.2vw, 16px);
  color: #111;
}

html[data-theme="dark"] .s5-card figcaption {
  color: #eee;
}

/* 响应式：平板 2 列，手机 1 列 */
@media (max-width:1199px) {
  .s5-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ===== 图片放大预览（Modal） ===== */
.zoom-modal {
  position: fixed;
  inset: 0;
  display: none;
  /* 默认隐藏 */
  place-items: center;
  background: rgba(0, 0, 0, .64);
  z-index: 9999;
  padding: clamp(10px, 4vw, 28px);
}

.zoom-modal.open {
  display: grid;
}

.zoom-modal img {
  max-width: min(96vw, 1600px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: zoomIn .18s ease-out;
}

@keyframes zoomIn {
  from {
    transform: scale(.96);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.zoom-close {
  position: absolute;
  top: clamp(8px, 2vw, 18px);
  right: clamp(8px, 2vw, 18px);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.zoom-close:hover {
  background: rgba(0, 0, 0, .7);
}

/* 兼容“减少动态” */
@media (prefers-reduced-motion: reduce) {
  .s5-card img {
    transition: none;
  }

  .zoom-modal img {
    animation: none;
  }
}

/* ===== Section 6 · 颜色 & 字体（左右 1/2，统一高度） ===== */
:root {
  --s6-gap: clamp(16px, 2.4cqw, 28px);
  --s6-pad: clamp(18px, 3cqw, 32px);
  --s6-r: 14px;
  --s6-eyebrow-fz: clamp(40px, 8.2cqw, 120px);
  --s6-kicker-fz: clamp(32px, 6.2cqw, 96px);

  --swatch-size: clamp(64px, 9.5cqw, 96px);
  --swatch-gap: clamp(12px, 2cqw, 18px);
}

.section.s6 {
  background: #fff;
}

html[data-theme="dark"] .section.s6 {
  background: #fff;
}

.section.s6 .wrapper {
  display: grid;
  align-content: stretch;
  min-height: calc(var(--section-desktop-h) - var(--header-h));
}

@media (max-width:1199px) {
  .section.s6 .wrapper {
    min-height: calc(var(--section-tablet-h) - var(--header-h));
  }
}

@media (max-width:900px) {
  .section.s6 .wrapper {
    min-height: calc(var(--section-mobile-h) - var(--header-h));
  }
}

/* 左右各占 1/2 */
.s6-grid {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* ✅ 50/50 */
  gap: var(--s6-gap);
}

.s6-pane {
  padding: var(--s6-pad);
  display: grid;
  grid-template-rows: max-content max-content 1fr max-content;
  /* 眉、中文、主体、说明 */
  row-gap: clamp(10px, 2svh, 16px);
}

/* 左灰右白 */
.s6-left {
  background: #6c6c6c;
  color: #fff;
}

.s6-right {
  background: #ffffff;
  color: #111;
}

/* 标题 */
.s6-eyebrow {
  margin: 0;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: var(--s6-eyebrow-fz);
}

.s6-kicker {
  margin: 0;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  font-size: var(--s6-kicker-fz);
}

/* —— 颜色球（代码绘制） —— */
.s6-swatches {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--swatch-gap);
  align-self: center;
}

.swatch {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(8px, 1.4cqw, 12px);
  background: rgba(0, 0, 0, .08);
  border-radius: 999px;
  padding: clamp(6px, 1cqw, 10px) clamp(10px, 1.6cqw, 14px);
  color: #fff;
}

.swatch .dot {
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 50%;
  background: var(--c);
  display: inline-block;
}

.swatch.is-light .dot {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
}

.swatch .meta {
  display: flex;
  flex-direction: column;
}

.swatch .meta b {
  font-weight: 800;
}

.swatch .meta small {
  opacity: .9;
  font-size: .82em;
}

/* —— 字体图（使用 img/fonts.png，无任何动效） —— */
.s6-asset {
  margin: 0;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.s6-asset img {
  max-width: min(720px, 100%);
  max-height: calc(100% - 2 * var(--s6-pad));
  /* 不把半区撑爆 */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--s6-r);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .14);
  display: block;

  /* 明确无动效（仅保留点击放大交互） */
  transition: none;
  animation: none;
  will-change: auto;
  cursor: zoom-in;
}

/* 文案 */
.s6-copy {
  margin: 0;
  line-height: 1.9;
  font-size: clamp(15px, 1.4vw, 18px);
  color: inherit;
}

/* 手机：上下堆叠（如需一直 50/50，可移除本媒体查询） */
@media (max-width:900px) {
  .s6-grid {
    grid-template-columns: 1fr;
  }

  .s6-swatches {
    justify-content: flex-start;
  }

  .s6-asset img {
    max-width: 100%;
    max-height: none;
    width: 100%;
  }
}

/* ===== S6 · 统一主体高度（图片 = 颜色区），段落齐头对齐 ===== */
.section.s6 {
  /* 主体区统一高度（两侧共用）。需要更高/更低只改这里即可 */
  --s6-main-h: clamp(300px, 40vh, 480px);
}

/* 两栏无缝相接 */
.section.s6 .s6-grid {
  gap: 0;
}

/* 两侧面板：明确 4 行轨道 = 眉 / 中文 / 主体(固定高) / 段落 */
.section.s6 .s6-pane {
  display: grid !important;
  grid-template-rows: auto auto var(--s6-main-h) auto !important;
  padding: var(--s6-pad);
  container-type: inline-size;
  /* 让 cqw 按半屏缩放标题 */
}

/* 行位 */
.section.s6 .s6-eyebrow {
  grid-row: 1;
  margin: 0;
}

.section.s6 .s6-kicker {
  grid-row: 2;
  margin: 0;
}

.section.s6 .s6-copy {
  grid-row: 4;
  align-self: start;
  margin: 0;
}

/* 左侧标题靠右；右侧保持靠左 */
.section.s6 .s6-left .s6-eyebrow,
.section.s6 .s6-left .s6-kicker {
  text-align: right;
  justify-self: end;
}

.section.s6 .s6-right .s6-eyebrow,
.section.s6 .s6-right .s6-kicker {
  text-align: left;
  justify-self: start;
}

/* —— 主体：颜色球（第3行），靠左，上2下3 —— */
.section.s6 .s6-left .s6-swatches {
  grid-row: 3;
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--swatch-gap);
  align-content: start;
  justify-items: start;
  /* 靠左 */
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(5) {
  grid-column: 3;
  grid-row: 2;
}

.section.s6 .s6-left .swatch .meta {
  text-align: left;
}

/* —— 主体：fonts 图片（第3行），高度与颜色区同步 —— */
.section.s6 .s6-asset {
  grid-row: 3;
  width: 100%;
  height: var(--s6-main-h);
  /* ✅ 与颜色区同高 */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.section.s6 .s6-asset img {
  height: 100%;
  /* 按高度撑满主体区 */
  width: auto;
  /* 等比缩放，避免拉伸 */
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  animation: none;
}

/* 顶部标题再大一点（按半屏自适应） */
.section.s6 {
  --s6-eyebrow-fz: clamp(44px, 6.8cqw, 96px);
  --s6-kicker-fz: clamp(34px, 5.2cqw, 76px);
}

.section.s6 .s6-right .s6-eyebrow {
  font-size: clamp(44px, 6.4cqw, 92px);
}

/* 段落更易读 */
.section.s6 .s6-copy {
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 2.0;
  margin-bottom: clamp(22px, 5svh, 48px);
}

/* ========== Section 6 · 四行同高（两栏严格对齐） ========== */
/* 统一四个“行高”变量：只改这里即可整体齐头 */
.section.s6 {
  --s6-row1-h: clamp(64px, 7.8cqw, 110px);
  /* 英文眉行高 */
  --s6-row2-h: clamp(42px, 5.2cqw, 80px);
  /* 中文副题行高 */
  --s6-main-h: clamp(320px, 42vh, 520px);
  /* 主体区（颜色球 / fonts.png） */
  --s6-foot-h: clamp(140px, 18vh, 220px);
  /* 说明段落区 */
}

/* 两栏无缝 */
.section.s6 .s6-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 100%;
}

/* 每栏采用同样的4行网格 → 高度由上面的变量统一控制 */
.section.s6 .s6-pane {
  display: grid !important;
  grid-template-rows: var(--s6-row1-h) var(--s6-row2-h) var(--s6-main-h) var(--s6-foot-h) !important;
  padding: var(--s6-pad);
  container-type: inline-size;
  /* 让 cqw 按半屏缩放标题 */
}

/* 行位固定：两侧元素落在相同行 → 自然对齐 */
.section.s6 .s6-eyebrow {
  grid-row: 1;
  margin: 0;
  align-self: center;
}

.section.s6 .s6-kicker {
  grid-row: 2;
  margin: 0;
  align-self: center;
}

.section.s6 .s6-left .s6-swatches {
  grid-row: 3;
}

.section.s6 .s6-right .s6-asset {
  grid-row: 3;
}

.section.s6 .s6-copy {
  grid-row: 4;
  align-self: start;
  margin: 0;
}

/* 左灰右白保持不变 */
.section.s6 .s6-left {
  background: #6c6c6c;
  color: #fff;
}

.section.s6 .s6-right {
  background: #ffffff;
  color: #111;
}

/* 顶部：左侧标题靠右，右侧保持靠左 */
.section.s6 .s6-left .s6-eyebrow,
.section.s6 .s6-left .s6-kicker {
  text-align: right;
  justify-self: end;
}

.section.s6 .s6-right .s6-eyebrow,
.section.s6 .s6-right .s6-kicker {
  text-align: left;
  justify-self: start;
}

/* 主体：左侧颜色球——靠左 “上2 下3” */
.section.s6 .s6-left .s6-swatches {
  width: 100%;
  height: 100%;
  /* = var(--s6-main-h) */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: center;
  /* 在主体区内垂直居中两行 */
  justify-items: start;
  /* 靠左 */
  gap: var(--swatch-gap);
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.section.s6 .s6-left .s6-swatches .swatch:nth-child(5) {
  grid-column: 3;
  grid-row: 2;
}

.section.s6 .s6-left .swatch .meta {
  text-align: left;
}

/* 主体：右侧 fonts.png——高度与左侧完全同步 */
.section.s6 .s6-asset {
  width: 100%;
  height: 100%;
  /* = var(--s6-main-h) */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.section.s6 .s6-asset img {
  height: 100%;
  /* 以高度填满主体区 */
  width: auto;
  max-width: 100%;
  /* 等比缩放，不拉伸 */
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  animation: none;
}

/* 段落：两侧同高 & 顶部对齐；字号更大一些 */
.section.s6 .s6-copy {
  font-size: clamp(18px, 2.0vw, 22px);
  line-height: 2.0;
  overflow-wrap: anywhere;
}

/* 标题再稍大（按半屏自适应） */
.section.s6 {
  --s6-eyebrow-fz: clamp(46px, 7.0cqw, 100px);
  --s6-kicker-fz: clamp(36px, 5.4cqw, 78px);
}

.section.s6 .s6-right .s6-eyebrow {
  font-size: clamp(46px, 6.6cqw, 96px);
}


/* ===== SR-only：若你项目里已有可忽略 ===== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== 仅供无障碍隐藏文字（若项目已有可忽略） ========== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* S7 */
/* ===== Section 7 · 原型开发与迭代 ===== */
:root {
  /* 可按需求微调舞台比例与间距 */
  --s7-gap: clamp(16px, 2.6cqw, 28px);
  --s7-pad: clamp(16px, 2.6cqw, 24px);
  --s7-title-fz: clamp(40px, 8cqw, 96px);
  --s7-panel: #e9e9ea;
}

.section.s7 {
  background: #fff;
  /* 视觉节奏：与 s6/s8 一致为白底 */
  scroll-margin-top: calc(var(--header-h, 0px) + 16px);
}

html[data-theme="dark"] .section.s7 {
  background: #fff;
}

/* 统一高度：复用全局 section .wrapper 规则，无需重复设置。
   仅补充上内边距，避免顶到导航 */
.section.s7 .wrapper {
  display: grid;
  align-content: center;
  gap: var(--s7-gap);
  padding-inline: var(--page-pad-x);
  /* 让本节在统一高度内“看起来更满” */
  padding-block: clamp(16px, 4svh, 32px);
}

/* 舞台：跟你其他 section 一样宽；桌面 21:9，移动端 16:10 便于增高 */
.s7-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  background: var(--s7-panel);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

@media (max-width:900px) {
  .section.s7 .wrapper {
    row-gap: clamp(14px, 3svh, 20px);
  }

  .s7-stage {
    aspect-ratio: 16/10;
  }
}

.s7-figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

.s7-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .45s ease, opacity .25s ease;
}

/* 箭头按钮：与整体风格一致的白色圆钮 */
.s7-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #111;
  font-size: 28px;
  line-height: 44px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: .95;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
}

.s7-prev {
  left: 12px;
}

.s7-next {
  right: 12px;
}

.s7-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.s7-nav:focus-visible {
  outline: 3px solid #4da3ff;
  outline-offset: 2px;
}

/* 信息区：左标题、右说明（双列）；移动端栈式 */
.s7-info {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(20px, 3cqw, 40px);
  align-items: start;
  padding-inline: var(--s7-pad);
}

@media (max-width:960px) {
  .s7-info {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-inline: 0;
  }
}

.s7-title-block h2 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: .01em;
  font-size: var(--s7-title-fz);
  color: #111;
}

.s7-title-block h2 span {
  font-weight: 800;
}

.s7-step {
  margin: 0 0 6px;
  font-weight: 800;
  color: #222;
  font-size: clamp(18px, 2.6cqw, 22px);
}

.s7-desc {
  margin: 0;
  color: #333;
  line-height: 1.9;
  font-size: clamp(15px, 1.6cqw, 18px);
}

/* 减少动态偏好 */
@media (prefers-reduced-motion:reduce) {
  .s7-figure img {
    transition: none;
  }
}

/* 复用你的 sr-only 工具类（若已存在可忽略） */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 强制：Section 7 灰色底（深浅色模式都一致） --- */
.section.s7 {
  background: #dedede !important;
  /* 与 s1/s3 相同的灰 */
  color: #111;
  /* 避免暗色模式下文字过浅 */
}

html[data-theme="dark"] .section.s7 {
  background: #dedede !important;
  color: #111 !important;
}

/* --- 强制：Section 8 白色底（你已有，但这里一并兜底） --- */
.section.s8 {
  background: #ffffff !important;
}

html[data-theme="dark"] .section.s8 {
  background: #ffffff !important;
}



/* ===== S8 基本布局 ===== */
.section.s8 {
  --s8-gap: clamp(16px, 2.6cqw, 28px);
  --s8-pad: clamp(18px, 3cqw, 32px);
  --s8-chip-gap: clamp(6px, 1cqw, 10px);

  margin-top: clamp(20px, 5svh, 64px);
  scroll-margin-top: calc(var(--header-h, 0px) + 12px);
}

.section.s8 .wrapper {
  min-height: calc(var(--section-desktop-h) - var(--header-h));
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s8-gap);
  align-items: start;
  padding-inline: var(--page-pad-x);
}

@media (max-width:1199px) {
  .section.s8 .wrapper {
    min-height: calc(var(--section-tablet-h) - var(--header-h));
    grid-template-columns: 1fr;
    gap: clamp(14px, 2svh, 20px);
  }
}

/* 左侧 */
.s8-left {
  padding: var(--s8-pad) 0;

  margin-top: 100px;
}

.s8-title {
  margin: 0 0 clamp(10px, 1.6svh, 14px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: .01em;
  font-size: clamp(48px, 8.6cqw, 120px);
}

.s8-tags {
  margin: 0 0 clamp(12px, 2svh, 18px);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8-chip-gap);
}

.tag {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: #111;
  font-weight: 700;
  padding: .42em .8em;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}

.tag:hover {
  transform: translateY(-1px);
}

html[data-theme="dark"] .tag {
  background: #1d1d1e;
  color: #eaeaea;
  box-shadow: none;
}

.s8-copy {
  margin: 0;
  max-width: 66ch;
  font-size: clamp(16px, 1.6cqw, 19px);
  line-height: 1.95;
}

/* 右侧：Logo 云（圆圈） */
.s8-right {
  padding: var(--s8-pad) 0;
}

.s8-logos {
  position: relative;
  height: clamp(320px, 44vh, 560px);
  background: transparent;
  container-type: inline-size;
  /* 允许用 cqw 做相对尺寸 */
}

/* 通用圆圈外观 */
.s8-logos .logo {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #bdbdbd;
  color: #111;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12), 0 6px 12px rgba(0, 0, 0, .06);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1),
    box-shadow .25s ease, outline-color .2s;
  outline: 0 solid transparent;
}

.s8-logos .logo img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  filter: saturate(.9);
}

.s8-logos .logo .logo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: clamp(16px, 2.6cqw, 26px);
  color: #222;
  mix-blend-mode: multiply;
}

html[data-theme="dark"] .s8-logos .logo {
  background: #7b7b7b;
  color: #fff;
}

html[data-theme="dark"] .s8-logos .logo .logo-fallback {
  color: #fff;
}

/* 大中小尺寸（按容器宽度缩放） */
.s8-logos .logo-big {
  width: clamp(150px, 34cqw, 260px);
  aspect-ratio: 1/1;
}

.s8-logos .logo-mid {
  width: clamp(105px, 22cqw, 170px);
  aspect-ratio: 1/1;
}

.s8-logos .logo-sm {
  width: clamp(70px, 16cqw, 120px);
  aspect-ratio: 1/1;
}

/* 位置布局 —— 视觉簇（VS 在右下最大） */
.logo-vs {
  right: 2%;
  bottom: 0%;
}

/* 最大 */
.logo-echarts {
  right: 28%;
  bottom: 16%;
}

.logo-js {
  right: 48%;
  bottom: 8%;
}

.logo-html {
  right: 32%;
  top: 12%;
}

.logo-css {
  right: 10%;
  top: 8%;
}

.logo-json {
  right: 0%;
  top: 26%;
}

/* 交互：悬停/聚焦/标签联动高亮 */
.s8-logos .logo:hover,
.s8-logos .logo.is-hot {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22), 0 8px 18px rgba(0, 0, 0, .12);
  outline: 3px solid rgba(17, 17, 17, .16);
}

html[data-theme="dark"] .s8-logos .logo.is-hot {
  outline-color: rgba(255, 255, 255, .22);
}

/* 手机单列：下移 Logo 云 */
@media (max-width:900px) {
  .section.s8 .wrapper {
    grid-template-columns: 1fr;
  }

  .s8-logos {
    height: clamp(280px, 46vh, 520px);
  }
}

/* ========== S8 · 左侧文字的间距与字号体系 ========== */

/* 整体上移留白够了，这里让左列里的每个模块都“有顶边距” */
.section.s8 .s8-left {
  padding-top: clamp(8px, 2svh, 18px);
}

/* 标题也给一点 margin-top（与上方元素/分割更松） */
.section.s8 .s8-title {
  margin-top: clamp(8px, 1.6svh, 16px);
}

/* 让标题之后的每一块都有顶边距：标签行、正文段落等 */
.section.s8 .s8-left>*+* {
  margin-top: clamp(10px, 2.2svh, 20px);
}

/* —— 字号层级 —— */
/* 正文：比之前略大、行距更舒服 */
.section.s8 .s8-copy {
  font-size: clamp(17px, 1.9cqw, 22px);
  line-height: 2.0;
  max-width: 66ch;
}

/* # 标签：作为“次一级大”，显著大于正文，但明显小于标题 */
.section.s8 .tag {
  /* 更大的字号 + 稍厚的内边距 */
  font-size: clamp(18px, 2.4cqw, 26px);
  padding: .55em 1.05em;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 14px rgba(0, 0, 0, .08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}

.section.s8 .s8-tags {
  gap: clamp(8px, 1.2cqw, 12px);
}

html[data-theme="dark"] .section.s8 .tag {
  background: #1d1d1e;
  color: #eaeaea;
  box-shadow: none;
}

/* S8 背景强制白色（含暗色模式） */
.section.s8 {
  background: #fff;
}

html[data-theme="dark"] .section.s8 {
  background: #fff;
}

/* S8 与其他 section 高度统一 */
@media (max-width:900px) {
  .section.s8 .wrapper {
    min-height: calc(var(--section-mobile-h) - var(--header-h));
  }
}

@media (min-width:901px) and (max-width:1199px) {
  .section.s8 .wrapper {
    min-height: calc(var(--section-tablet-h) - var(--header-h));
  }
}

@media (min-width:1200px) {
  .section.s8 .wrapper {
    min-height: calc(var(--section-desktop-h) - var(--header-h));
  }
}

/* S8 顶部留白更大：拉开与上一段的距离 */
.section.s8 .wrapper {
  padding-top: clamp(28px, 6svh, 84px);
  /* 可按需调大/调小 */
}

/* 若有锚点跳转，额外留出偏移避免被顶部遮住 */
.section.s8 {
  scroll-margin-top: calc(var(--header-h, 0px) + 20px);
}



/* 深色可选 */

/* S8：白色（深/浅色都保持白） */
.section.s8 {
  background: #ffffff !important;
}

html[data-theme="dark"] .section.s8 {
  background: #ffffff !important;
}

/* 1) 删掉 S8 的 margin-top，用等距 padding 填充上下留白 */
.section.s8 {
  margin-top: 0 !important;
}

.section.s8 .wrapper {
  /* 保持页面宽度（仍用你的 --page-pad-x） */
  padding-inline: var(--page-pad-x);
  /* 上下等距留白：自己按需调这组值 */
  padding-block: clamp(40px, 12svh, 120px) !important;
}

/* 2) 右侧泡泡去灰底（透明），可选细边框以免图片在白底上“漂” */
.s8-logos .logo {
  background: transparent !important;
  box-shadow: none;
  /* 不要投影就去掉 */
  border: 2px solid rgba(0, 0, 0, .06);
  /* 想完全透明可把此行删掉 */
}

html[data-theme="dark"] .s8-logos .logo {
  border-color: rgba(255, 255, 255, .18);
}

/* 如果曾经有备用文字的混合模式，改为正常以避免灰感 */
.s8-logos .logo .logo-fallback {
  mix-blend-mode: normal;
}

/* =========================
   S6 · 移动端上下栈式（覆盖）
   ========================= */
@media (max-width: 900px) {
  .section.s6 .wrapper {
    /* 统一高度逻辑仍生效，这里只调排版与留白 */
    align-content: start;
    padding-block: clamp(24px, 6svh, 56px);
  }

  /* 一列栈式 + 自然行高，强制覆盖之前的“四行同高”设置 */
  .section.s6 .s6-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(14px, 3svh, 22px);
  }

  .section.s6 .s6-pane {
    grid-template-rows: auto auto auto auto !important;
    /* 允许内容按需增高 */
  }

  /* 左侧颜色球：两列更贴合手机宽度 */
  .section.s6 .s6-left .s6-swatches {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--swatch-gap);
    align-content: start;
    justify-items: start;
  }

  /* 右侧字体图片：高度自适应，图按宽度铺满 */
  .section.s6 .s6-asset {
    height: auto !important;
    align-items: flex-start;
    justify-content: center;
  }

  .section.s6 .s6-asset img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* 手机标题稍微收紧，避免挤压 */
  .section.s6 .s6-eyebrow {
    font-size: clamp(32px, 10vw, 44px);
  }

  .section.s6 .s6-kicker {
    font-size: clamp(26px, 8vw, 36px);
  }
}

/* =========================
   S8 · 移动端：Logo 在上、文字在下
   ========================= */
@media (max-width: 900px) {
  .section.s8 .wrapper {
    grid-template-columns: 1fr !important;
    /* 上下栈式 */
    gap: clamp(14px, 2.4svh, 20px);
    /* 保持你之前“上下等距 padding”的设置 */
    padding-inline: var(--page-pad-x);
    padding-block: clamp(40px, 12svh, 120px) !important;
  }

  /* 置顶 Logo 云 */
  .section.s8 .s8-right {
    order: -1;
  }

  .section.s8 .s8-left {
    order: 0;
  }

  /* Logo 容器拉满宽度，居中显示，适度增高 */
  .section.s8 .s8-logos {
    width: 100%;
    height: clamp(260px, 46vh, 520px);
    display: grid;
    place-items: center;
    margin: 0;
    /* 去掉潜在外边距 */
  }
}

/* S6 颜色：手机端每行一个，纵向排列 */
@media (max-width: 900px) {
  .section.s6 .s6-left .s6-swatches {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* 一列 */
    gap: clamp(10px, 2.4svh, 14px);
    /* 行距 */
  }

  .s8-left {

    margin-top: 0px;
  }

  /* 取消之前的 nth-child 定位，改为自然流 */
  .section.s6 .s6-left .s6-swatches .swatch {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    justify-content: flex-start;
    padding: clamp(10px, 1.8svh, 14px) clamp(12px, 3.5cqw, 16px);
  }

  /* 圆点与文字在手机上更协调的尺寸 */
  .section.s6 .s6-left .s6-swatches .swatch .dot {
    width: clamp(44px, 10vw, 56px);
    height: clamp(44px, 10vw, 56px);
  }

  .section.s6 .s6-left .s6-swatches .swatch .meta b {
    font-size: clamp(14px, 4.2vw, 16px);
  }

  .section.s6 .s6-left .s6-swatches .swatch .meta small {
    font-size: clamp(12px, 3.6vw, 14px);
  }
}

/* ===== S1 桌面端补丁：左列上下等高 + 对齐方式 + 右图居中 ===== */
@media (min-width: 901px) {
  .section.s1 .s1-stage {
    /* 左列两行等高；元素可拉满行高 */
    grid-template-rows: 1fr 1fr !important;
    align-items: stretch;
  }

  /* 让内容不要用自身最小高度“撑开”行高 */
  .section.s1 .s1-title,
  .section.s1 .s1-cta-wrap {
    min-height: 0;
  }

  /* 标题：贴下沿，用 padding-bottom 控距离（你已定义了变量） */
  .section.s1 .s1-title {
    align-self: end !important;
    padding-bottom: var(--s1-title-pb) !important;
    margin: 0;
    white-space: nowrap;
    /* 若希望可换行可改为 normal */
  }

  /* 胶囊：贴上沿，用 padding-top 控距离（保留左内边距节奏） */
  .section.s1 .s1-cta-wrap {
    align-self: start !important;
    padding-top: var(--s1-cta-pt) !important;
    padding-left: var(--s1-cta-pl) !important;
  }

  /* 右侧图片：在舞台中垂直居中（与左列的中线对齐） */
  .section.s1 .s1-photo {
    place-self: center end;
    /* 垂直居中，靠右对齐；若要完全居中可用 center center */
  }
}

/* S1：缩短胶囊所在蓝色区域的宽度（仅桌面端） */
@media (min-width: 901px) {
  .section.s1 .s1-cta-wrap {
    justify-self: start !important;
    /* 不再拉伸整列 */
    width: max-content;
    /* 跟内容同宽（按钮宽度 + 自己的内边距） */
    inline-size: fit-content;
    /* 逻辑属性，兼容性更好 */
  }
}

/* ===== S3 · 桌面端：右侧图片上下居中 ===== */
@media (min-width: 1200px) {
  .section.s3 .s3-photo {
    /* 占满右侧格子的可用高度，然后在格子内居中内容 */
    align-self: stretch !important;
    justify-self: stretch !important;
    min-height: 0;
    /* 允许高度被网格控制 */
    display: grid !important;
    place-items: center !important;
    /* ← 上下&左右都居中 */
    overflow: hidden;
    /* 悬停放大不外溢（可保留/可去掉） */
    margin: 0;
  }

  .section.s3 .s3-photo>img {
    /* 按容器最大值等比缩放，不拉伸不裁切 */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform-origin: center center;
  }
}

/* =========================
   全局白底 & 去除 Section 灰底 · 覆盖补丁
   粘贴到 CSS 最末尾
========================= */

/* 1) 整页背景统一白色（包含暗色模式也用白底） */
body {
  background: #ffffff !important;
  color: #111;
  /* 维持原有文字颜色 */
}

html[data-theme="dark"] body {
  background: #ffffff !important;
  color: #111 !important;
}

/* 2) 所有 section 取消自带底色（让其透出白底） */
.section {
  background: transparent !important;
}

/* 3) 针对曾显式设为灰色的内容节做一次明确覆盖（含暗色） */
.section.s1,
.section.s3,
.section.s5,
.section.s7 {
  background: transparent !important;
}

html[data-theme="dark"] .section.s1,
html[data-theme="dark"] .section.s3,
html[data-theme="dark"] .section.s5,
html[data-theme="dark"] .section.s7 {
  background: transparent !important;
}

/* 说明：
   - s2 / s4 / s6 / s8 之前有白底声明，但上面把 .section 设为透明后也没问题，
     因为 body 已是白色 → 视觉效果仍然是白底页面。
   - 若你希望某些区块继续保持白底（而不是透明），可在它们后面再单独加：
     .section.s4{ background:#fff !important; } 等。
*/
/* ===== S3 · 桌面端：右侧图片上下居中 ===== */
@media (min-width: 1200px) {
  .section.s3 .s3-photo {
    /* 占满右侧格子的可用高度，然后在格子内居中内容 */
    align-self: stretch !important;
    justify-self: stretch !important;
    min-height: 0;
    /* 允许高度被网格控制 */
    display: grid !important;
    place-items: center !important;
    /* ← 上下&左右都居中 */
    overflow: hidden;
    /* 悬停放大不外溢（可保留/可去掉） */
    margin: 0;
  }

  .section.s3 .s3-photo>img {
    /* 按容器最大值等比缩放，不拉伸不裁切 */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform-origin: center center;
  }
}

/* =========================
   S3 · 桌面端补丁
   1) 右侧图片缩小 & 居中
   2) 标题/正文在各自半格里垂直居中
   ========================= */
:root {
  /* 调小/调大图片占格子比例：0.86 = 86% */
  --s3-photo-fit: 0.86;
}

@media (min-width: 1200px) {

  /* 保持两行等高（如果你已有这条，可忽略） */
  .section.s3 .s3-stage {
    grid-template-rows: 1fr 1fr;
  }

  /* 右侧图片容器：占满右列，内部项目居中 */
  .section.s3 .s3-photo {
    align-self: stretch !important;
    justify-self: stretch !important;
    min-height: 0;
    display: grid !important;
    place-items: center !important;
    /* 上下&左右居中 */
    overflow: hidden;
  }

  .section.s3 .s3-photo>img {
    /* 等比缩放，整体比格子略小（可调 --s3-photo-fit） */
    max-width: calc(100% * var(--s3-photo-fit)) !important;
    max-height: calc(100% * var(--s3-photo-fit)) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transform-origin: center center;
  }

  /* 标题/正文：由“贴边”改为在各自半格里垂直居中 */
  .section.s3 .s3-title {
    align-self: center !important;
    /* 垂直居中 */
    padding-bottom: 0 !important;
    /* 取消向下的额外间距 */
    margin: 0;
  }

  .section.s3 .s3-desc {
    align-self: center !important;
    /* 垂直居中 */
    padding-top: 0 !important;
    /* 取消向上的额外间距 */
    margin: 0;
  }
}

/* ==== S4 标题上下 padding（默认 + 桌面端略大） ==== */
:root {
  /* 需要更松就把这个值调大 */
  --s4-title-pad-y: clamp(8px, 1.4svh, 16px);
  --s4-title-pad-y-desktop: clamp(10px, 1.6svh, 20px);
}

/* 所有断点：给标题加上下 padding，并居中对齐所在网格行 */
.section.s4 .s4-title {
  padding-block: var(--s4-title-pad-y) !important;
  /* ↑↓ 间距 */
  align-self: center !important;
  /* 垂直居中 */
  margin: 0;
  /* 避免 margin 参与折叠 */
  line-height: 1.02;
}

/* 桌面端再稍微宽一点 */
@media (min-width: 1200px) {
  .section.s4 .s4-title {
    padding-block: var(--s4-title-pad-y-desktop) !important;
  }
}

/* ===== S5 撤销 4×2，并让每格高度随图片自适应 ===== */

/* 恢复你原来的列数：桌面 3 列，平板 2 列，手机 1 列（按你现有媒体查询即可）。
   这里只确保不再用固定行高/拉伸。*/
.section.s5 .s5-grid {
  grid-auto-rows: auto !important;
  /* 行高由内容（图片）决定 */
  align-items: start !important;
  /* 子项不再被拉伸到等高 */
}

/* 卡片高度跟随内容（图+标题），不要 100% 拉满格子 */
.section.s5 .s5-card {
  height: auto !important;
  align-self: start !important;
  /* 占满宽度，但以内容高度为准 */
  display: block !important;
  /* 不强制 grid 结构也可 */
  overflow: hidden;
  /* 以防个别图存在外溢 */
  border-radius: var(--s5-card-r);
}

/* 关键：图片按宽度等比缩放，高度自适应，驱动整格高度 */
.section.s5 .s5-card img {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  /* 取消方形强制 */
  object-fit: contain;
  /* 保证不裁切不变形 */
  display: block;
}

/* 说明条正常占内容高度 */
.section.s5 .s5-card figcaption {
  padding: clamp(10px, 1.6svh, 14px) clamp(12px, 2cqw, 16px);
}

/* ===== S3 · 桌面端：标题贴格子底部，对齐并留出下间距 ===== */
:root {
  /* 调整标题与网格线的下间距（越大越往上“提”一些视觉留白） */
  --s3-title-bottom-gap: clamp(8px, 1.4svh, 18px);
}

@media (min-width: 1200px) {
  .section.s3 .s3-title {
    align-self: end !important;
    /* 贴所在网格“底部” */
    padding-bottom: var(--s3-title-bottom-gap) !important;
    margin-bottom: 0 !important;
    /* 避免 margin 折叠干扰 */
  }
}

/* ===== S3 · 桌面端：正文贴顶部对齐 ===== */
:root {
  --s3-desc-top-gap: clamp(8px, 1.4svh, 16px);
  /* 上方留白，按需改 */
}

@media (min-width: 1200px) {
  .section.s3 .s3-desc {
    align-self: start !important;
    /* 贴格子顶边 */
    justify-self: start !important;
    padding-top: var(--s3-desc-top-gap) !important;
    margin-top: 0 !important;
    /* 防止 margin 折叠干扰 */
    min-height: 0;
  }
}

/* ===== S3 · 桌面端：右侧图片占据三行高度 ===== */
:root {
  --s3-title-bottom-gap: clamp(8px, 1.4svh, 16px);
  /* 标题与横线的下间距 */
  --s3-desc-top-gap: clamp(6px, 1.0svh, 12px);
  /* 正文与横线的上间距 */
  --s3-photo-fit: 0.9;
  /* 图片相对容器的占比(0~1) */
}

@media (min-width: 1200px) {

  /* 舞台改 3 行：标题(auto) + 两个内容区(1fr/1fr) */
  .section.s3 .s3-stage {
    grid-template-columns: 1.1fr 1fr !important;
    grid-template-rows: auto 1fr 1fr !important;
    align-items: stretch;
  }

  /* 标题：第1行贴底 */
  .section.s3 .s3-title {
    grid-column: 1;
    grid-row: 1;
    align-self: end !important;
    padding-bottom: var(--s3-title-bottom-gap) !important;
    margin: 0 !important;
  }

  /* 正文：左列跨第2~3行，贴顶 */
  .section.s3 .s3-desc {
    grid-column: 1;
    grid-row: 2 / 4;
    /* 2→3 行 */
    align-self: start !important;
    padding-top: var(--s3-desc-top-gap) !important;
    margin: 0 !important;
    min-height: 0;
  }

  /* 图片：右列跨第1~3行 = 整列三行高度 */
  .section.s3 .s3-photo {
    grid-column: 2;
    grid-row: 1 / 4;
    /* 1→3 行 */
    display: grid !important;
    place-items: center !important;
    /* 居中 */
    overflow: hidden;
    min-height: 0;
  }

  .section.s3 .s3-photo>img {
    max-width: calc(100% * var(--s3-photo-fit)) !important;
    max-height: calc(100% * var(--s3-photo-fit)) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transform-origin: center;
  }
}

/* ===== S3 · 桌面端：右侧图片顶部对齐 + 顶部留白 ===== */
:root {
  /* 想多一点/少一点就改这里 */
  --s3-photo-top-gap: clamp(12px, 1.8svh, 28px);
}

@media (min-width: 1200px) {
  .section.s3 .s3-photo {
    /* 右列跨三行（按你当前布局） */
    grid-column: 2;
    grid-row: 1 / 4;

    /* 顶部对齐 + 水平居中 */
    display: grid !important;
    place-items: start center !important;

    /* 顶部留白 */
    padding-top: var(--s3-photo-top-gap) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
  }

  .section.s3 .s3-photo>img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    /* 扣掉顶部 padding 后再等比适配高度 */
    max-height: calc(100% - var(--s3-photo-top-gap)) !important;
    object-fit: contain !important;
    transform-origin: top center;
  }
}

/* ===== S3 · 桌面端：右侧图片顶部对齐 + 顶部留白 ===== */
:root {
  /* 想多一点/少一点就改这里 */
  --s3-photo-top-gap: clamp(12px, 1.8svh, 28px);
}

@media (min-width: 1200px) {
  .section.s3 .s3-photo {
    /* 右列跨三行（按你当前布局） */
    grid-column: 2;
    grid-row: 1 / 4;

    /* 顶部对齐 + 水平居中 */
    display: grid !important;
    place-items: start center !important;

    /* 顶部留白 */
    padding-top: var(--s3-photo-top-gap) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
  }

  .section.s3 .s3-photo>img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    /* 扣掉顶部 padding 后再等比适配高度 */
    max-height: calc(100% - var(--s3-photo-top-gap)) !important;
    object-fit: contain !important;
    transform-origin: top center;
  }
}