/* ================================
   全局变量（可按需微调）
   （不会改你的导航栏 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（左文右图，右图跨两行）
   —— 样式节奏参考 Section 1，
      胶囊按钮换成文本描述
================================ */
.section.s3 {
  background: #dedede;
}

.section.s3 .wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  padding-block: clamp(32px, 7svh, 96px);
  place-items: center;
}

/* 舞台：左两格（标题/文本）、右一格「跨两行」的图片 */
.s3-stage {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  contain: size;
  overflow: clip;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  /* 左稍宽，和 s1 一致 */
  grid-template-rows: 1fr auto;
  /* 上格与右图对齐，下格自适应文本高度 */
  grid-template-areas:
    "title photo"
    "desc  photo";
  column-gap: var(--s1-gap);
  row-gap: var(--s1-gap);
  padding: clamp(20px, 3cqw, 36px);
  container-type: inline-size;
}

/* 标题：沿用 s1 的风格（单行、不换行、底部对齐） */
.s3-title {
  grid-area: title;
  align-self: end;
  justify-self: start;
  margin: 0;
  padding-bottom: var(--s1-title-pb);
  line-height: 1;
  white-space: nowrap;
  /* 与 s1 一致：不换行 */
  overflow: hidden;
  max-width: 100%;
  font-size: clamp(48px, 9.2cqw, 140px);
  color: #0a0a0a;
}

/* 文本：代替 s1 的胶囊按钮，放在左下格 */
.s3-desc {
  grid-area: desc;
  justify-self: start;
  align-self: start;
  margin: 0;
  max-width: var(--s3-desc-max);
  padding-top: var(--s1-cta-pt);
  /* 和 s1 的按钮间距保持节奏一致 */
  /* 如需和标题左侧保持对齐，也可加左内边距：
     padding-left: var(--s1-cta-pl); */
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  color: #222;
}

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

/* 右侧图片：跨两行；容器只负责布局，动效加在 <img> 上 */
.s3-photo {
  grid-area: photo;
  grid-row: 1 / span 2;
  /* 关键：跨两行 */
  place-self: center end;
  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;
}

/* ✅ 图片动效与阴影：完全复用 Section 1 的设定 */
.s3-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) {
  .s3-photo:hover img {
    transform: translateY(var(--s1-hover-raise)) scale(var(--s1-hover-scale));
    filter: var(--s1-drop);
  }
}

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

/* —— 你前面「标题和正文下移、飞机更大」的需求也保留 —— */
/* 桌面 >=1200px */
@media (min-width:1200px) {
  .s3-photo {
    width: clamp(520px, 42vw, 980px);
  }

  .s3-title {
    margin-top: var(--s3-text-shift);
  }

  .s3-desc {
    margin-top: calc(var(--s3-text-shift) * 0.45);
  }
}

/* 平板 901–1199px */
@media (min-width:901px) and (max-width:1199px) {
  .s3-photo {
    width: clamp(460px, 48vw, 860px);
  }

  .s3-title {
    margin-top: calc(var(--s3-text-shift) * 0.7);
  }

  .s3-desc {
    margin-top: calc(var(--s3-text-shift) * 0.35);
  }
}

/* 移动端：竖排（图 / 标题 / 文本），与 s1 保持一致的节奏 */
@media (max-width:900px) {
  .section.s3 .wrapper {
    padding-block: clamp(24px, 6svh, 72px);
  }

  .s3-stage {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content;
    grid-template-areas:
      "photo"
      "title"
      "desc";
    row-gap: clamp(12px, 2.6svh, 18px);
  }

  .s3-photo {
    width: 100%;
    aspect-ratio: 16/10;
    margin: 0;
  }

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

  .s3-title {
    font-size: clamp(28px, 9.5vw, 44px);
    padding-bottom: clamp(8px, 1.2svh, 12px);
    margin-top: 0;
    white-space: normal;
    /* 移动端允许换行更易读 */
  }

  .s3-desc {
    max-width: 68ch;
    padding-top: clamp(8px, 1.2svh, 12px);
  }
}

/* =========================================
   SECTION 3  ·  数据梳理期（左文右图，右图跨两行）
   - 桌面/平板：左右 1/2，右图跨两行、完整可见（contain）
   - 移动端：栈式顺序「图片 → 标题 → 文字」与 S1 一致
   - 遵守统一高度：沿用你已有的变量 --section-*-h / --header-h
========================================= */

/* 桌面/平板：左右各占一半，右图跨两行 */
.section.s3 .s3-stage {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  contain: size;
  overflow: clip;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "title photo"
    "desc  photo";
  column-gap: var(--s1-gap);
  row-gap: var(--s1-gap);
  padding: clamp(20px, 3cqw, 36px);
  container-type: inline-size;
}

/* 标题/正文（与 S1 节奏一致） */
.section.s3 .s3-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, 120px);
  color: #0a0a0a;
}

.section.s3 .s3-desc {
  grid-area: desc;
  justify-self: start;
  align-self: start;
  margin: 0 !important;
  /* 只用 padding 控距 */
  padding: clamp(6px, 1svh, 14px) 0 0;
  /* 与标题的距离 */
  max-width: 68ch;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.9;
  color: #222;
}

.section.s3 .s3-desc p {
  margin: 0;
}

/* 右图跨两行，完整可见 */
.section.s3 .s3-photo {
  grid-area: photo;
  grid-row: 1 / span 2;
  /* 跨两行 */
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.section.s3 .s3-photo>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ✅ 不溢出，不裁切 */
  display: block;

  /* 保留与你的 S1 一致的动效 */
  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;
  }
}

/* —— 移动端：栈式顺序「图片 → 标题 → 文字」，与 S1 一致 —— */
@media (max-width:900px) {
  .section.s3 .s3-stage {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content;
    grid-template-areas:
      "photo"
      "title"
      "desc";
    row-gap: clamp(12px, 2.6svh, 18px);
    padding: clamp(14px, 3svh, 20px);
  }

  .section.s3 .s3-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    /* 略扁可控高度 */
  }

  .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);
    padding-bottom: clamp(8px, 1.2svh, 12px);
  }

  .section.s3 .s3-desc {
    max-width: 68ch;
    padding-top: clamp(6px, 1svh, 12px);
  }
}

/* —— 统一高度（与你之前规则一致）：可保留现有全局规则
   如需单独指定，可启用下面两段 —— */
/*
@media (max-width:900px){
  .section.s3 .wrapper{ min-height: calc(var(--section-mobile-h) - var(--header-h)); }
}
@media (min-width:901px) and (max-width:1199px){
  .section.s3 .wrapper{ min-height: calc(var(--section-tablet-h) - var(--header-h)); }
}
@media (min-width:1200px){
  .section.s3 .wrapper{ min-height: calc(var(--section-desktop-h) - var(--header-h)); }
}
*/


/* =========================================
   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);
  }
}
/* 字体补丁：为中文启用思源黑体/宋体（此处为思源宋体 CN），英文仍走原有英文字体栈 */

/* Regular 400 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-Regular-1.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:
    U+3000-303F,   /* CJK 符号和标点 */
    U+3400-4DBF,   /* 扩展A */
    U+4E00-9FFF,   /* 基本汉字 */
    U+F900-FAFF,   /* 兼容汉字 */
    U+20000-2A6DF, /* 扩展B */
    U+2A700-2B73F, /* 扩展C */
    U+2B740-2B81F, /* 扩展D */
    U+2B820-2CEAF, /* 扩展E */
    U+2CEB0-2EBEF, /* 扩展F */
    U+2F800-2FA1F, /* 兼容扩展 */
    U+FF00-FFEF;   /* 全角与半角 */
}

/* ExtraLight 200 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-ExtraLight-3.otf") format("opentype");
  font-weight:200;
  font-style:normal;
  font-display:swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2CEB0-2EBEF, U+2F800-2FA1F, U+FF00-FFEF;
}

/* Light 300 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-Light-5.otf") format("opentype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2CEB0-2EBEF, U+2F800-2FA1F, U+FF00-FFEF;
}

/* Medium 500 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-Medium-6.otf") format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2CEB0-2EBEF, U+2F800-2FA1F, U+FF00-FFEF;
}

/* SemiBold 600 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-SemiBold-7.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2CEB0-2EBEF, U+2F800-2FA1F, U+FF00-FFEF;
}

/* Bold 700 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-Bold-2.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2CEB0-2EBEF, U+2F800-2FA1F, U+FF00-FFEF;
}

/* Heavy 900 */
@font-face{
  font-family:"SourceHanSerifCN";
  src: url("../../font/SourceHanSerifCN-Heavy-4.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+2CEB0-2EBEF, U+2F800-2FA1F, U+FF00-FFEF;
}

/* 全局字体栈：英文走 Inter/系统，无需改动已有英文标题；中文字符自动命中思源 */
:root{
  --font-latin: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-cjk-serif: "SourceHanSerifCN", "Source Han Serif CN", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
}

body{
  font-family: var(--font-latin), var(--font-cjk-serif);
}

/* 明确中文区域/类使用思源，英文不受影响 */
:lang(zh), :lang(zh-CN), .cn, [lang^="zh"]{
  font-family: var(--font-cjk-serif), var(--font-latin);
}
/* Patch: 仅让 Section 1 标题里的英文 “F/A-18” 使用 Russo One，
   字体文件位于 ../../font/RussoOne-Regular.ttf；不影响其它英文或中文 */

@font-face{
  font-family: "Russo One Local";
  src: url("../../font/RussoOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* 只限定到拉丁字符和常用标点，避免影响中文渲染 */
  unicode-range:
    U+0000-00FF,      /* Basic Latin + Latin-1 */
    U+0131, U+0152-0153,
    U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F,      /* General Punctuation */
    U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 只作用到 Section 1 的英文片段 */
.section.s1 .s1-title .en{
  font-family: "Russo One Local", var(--font-latin, "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .01em; /* 可按需微调 */
}