/* ============================================================
 * 单元格门户首页 — 局部样式
 * 设计稿: Pencil [Homepage]
 * 仅作用于 .hp / .hp-* 元素，不污染开心格 / 法务页
 * ============================================================ */

/* 滚动条占位锁定：长页面有滚动条时浏览器从 body 右边占 ~15px，
   会让 `margin: 0 auto` 算出的中心向左偏 ~7.5px，肉眼可见。
   stable 让这条 gutter 永远保留 → margin auto 算的中心 = 视觉中心。 */
html { scrollbar-gutter: stable; }

/* 全局 border-box：让 width / flex-basis 都包含 padding+border。
   homepage 不加载 style.css，没有全局 reset；不补这条会导致 3 卡布局
   下 padding 把卡片撑出 viewport，看起来像 2.5 张。 */
*, *::before, *::after { box-sizing: border-box; }

/* ─── iconfont (阿里图标库 5168175，已本地化到 /static/fonts/) ─── */
@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.woff2') format('woff2'),
       url('../fonts/iconfont.woff') format('woff'),
       url('../fonts/iconfont.ttf') format('truetype');
  font-display: swap;
}
.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-xiaohongshu:before          { content: "\e631"; }
.icon-AIzhineng:before            { content: "\e679"; }
.icon-chanpin:before              { content: "\e67c"; }
.icon-xiaochengxu:before          { content: "\e63e"; }
.icon-rengongzhinengdanao:before  { content: "\e610"; }
.icon-xiaochengxu1:before         { content: "\e636"; }
.icon-sousuo:before               { content: "\e60d"; }
.icon-program-full:before         { content: "\e991"; }
.icon-shuju:before                { content: "\e606"; }
:root {
  --hp-fg: #0F1A14;
  --hp-fg-2: #525E5A;
  --hp-fg-3: #8E9994;
  --hp-fg-inverse: #FFFFFF;

  --hp-surface: #FFFFFF;
  --hp-surface-2: #F4F6F4;
  --hp-surface-3: #ECF2EE;
  --hp-card: #FFFFFF;
  --hp-border: #E2E7E4;

  --hp-accent: #2D5E3A;
  --hp-accent-strong: #1F4528;
  --hp-accent-soft: #DBEDDF;

  --hp-radius: 8px;
  --hp-radius-lg: 14px;
  --hp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --hp-shadow: 0 4px 14px rgba(15, 26, 20, 0.06);
  --hp-shadow-lg: 0 10px 32px rgba(15, 26, 20, 0.1);

  --hp-max-w: 1180px;
  --hp-pad-x: clamp(20px, 6vw, 96px);
}

body { background: var(--hp-surface); color: var(--hp-fg); }

.hp { display: block; }
.hp-container {
  max-width: var(--hp-max-w);
  margin: 0 auto;
  padding-left: var(--hp-pad-x);
  padding-right: var(--hp-pad-x);
  width: 100%;
}

.hidden { display: none !important; }

/* ─── 顶部 nav ─── */
.hp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--hp-border);
}
.hp-nav-inner {
  max-width: 100%;
  margin: 0;
  padding: 22px clamp(16px, 3vw, 32px);   /* 14 → 22，整体 nav 高约 84px */
  display: flex;
  align-items: center;
  gap: 12px;
}
.hp-brand {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  color: #05290E;
  font-weight: 800;
}
.hp-brand-mark {
  width: 40px; height: 40px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
}
img.hp-brand-mark { object-fit: contain; }
.hp-brand-name {
  height: 32px;
  width: auto;
  display: inline-block;
  object-fit: contain;
}
.hp-brand-en {
  font-family: 'Cambria', 'Constantia', 'Iowan Old Style', 'Source Serif Pro', 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #05290E;
  margin-left: -2px;
}
/* 中间导航：让 brand-actions 两端撑开，自己居中 */
.hp-nav-links {
  display: flex;
  gap: 38px;                   /* 6 个 tab 后收窄到 38px，避免横向拥挤 */
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.hp-nav-links a {
  color: var(--hp-fg);
  font-size: 1.05rem;
  font-weight: 400;            /* 600 → 400，去掉加粗 */
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-bottom-color .15s;
  letter-spacing: 0.02em;
}
.hp-nav-links a:hover {
  color: var(--hp-accent);
}
.hp-nav-links a.active {
  color: var(--hp-accent);
  border-bottom-color: var(--hp-accent);
  font-weight: 500;            /* 当前 tab 略微加重，区分静态项 */
}

.hp-nav-actions {
  margin-left: 0;
  display: flex; align-items: center; gap: 14px;
}

/* 邮件联系按钮：mail icon + 邮箱字 */
.hp-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #05290E;
  font-family: 'Cambria', 'Constantia', 'Iowan Old Style', 'Georgia', serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
.hp-mail:hover {
  border-color: var(--hp-accent);
  color: var(--hp-accent);
  background: var(--hp-accent-soft);
}
.hp-mail-icon { flex-shrink: 0; }

.hp-link {
  font-size: 0.92rem;
  color: var(--hp-fg-2);
  text-decoration: none;
}
.hp-link:hover { color: var(--hp-fg); }

/* ─── 通用 ─── */
.hp-section-title {
  /* 与 hero headline 同字体 */
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-weight: 800;
  color: var(--hp-fg);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  letter-spacing: -0.01em;
  text-align: center;
}
.hp-section-body {
  font-size: 1rem;
  line-height: 2.05;                  /* 1.75 → 2.05，给嵌入的 pill 更多垂直空间 */
  color: var(--hp-fg-2);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* 产品/品牌名小药丸：浅绿底 + 浅灰字 + 全圆角，存在感弱、更柔和 */
.hp-brand-pill {
  display: inline-block;
  background: var(--hp-accent-soft);
  color: var(--hp-fg-2);              /* 深 fg → 中灰 fg-2，pill 里的产品名不再"扎眼" */
  padding: 1px 10px;
  border-radius: 999px;
  font-weight: 500;                   /* 600 → 500，配合浅色不再厚重 */
  font-size: 0.92em;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: 0.05em;
  margin: 0 2px;
}
/* 4 个 section 共用的标题区：中文标题 + 英文副标 + 可选 sub
   节奏 = 中文紧贴英文（断感弱），整组与下方内容保持适中距离 */
.hp-section-head {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  margin: 0 auto 28px;
  max-width: 720px;
  gap: 0;                                       /* 用单元素 margin 精控，不依赖 gap */
}
.hp-section-head .hp-section-title { margin: 0; }
.hp-section-en {
  margin-top: 4px;                              /* 中文标题↔英文 极紧 */
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--hp-fg-3);
  text-transform: uppercase;
  /* 给末尾留出 letter-spacing 视觉空间 */
  padding-left: 0.28em;
}
.hp-section-sub {
  margin-top: 14px;                             /* 英文↔中文描述 略松，让英文独立成一层 */
  color: var(--hp-fg-2);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 640px;
}

.hp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: var(--hp-radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--hp-fg);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .05s;
  white-space: nowrap;
}
.hp-btn:active { transform: translateY(1px); }
.hp-btn-primary {
  background: var(--hp-accent);
  color: #fff;
}
.hp-btn-primary:hover { background: var(--hp-accent-strong); }
.hp-btn-outline {
  background: transparent;
  color: var(--hp-fg);
  border-color: var(--hp-fg);
}
.hp-btn-outline:hover {
  background: var(--hp-fg);
  color: var(--hp-fg-inverse);
}
.hp-btn-ghost {
  color: var(--hp-fg);
  border-color: var(--hp-border);
  padding: 8px 16px;
}
.hp-btn-ghost:hover { border-color: var(--hp-accent); color: var(--hp-accent); }
.hp-btn-link {
  background: none;
  color: var(--hp-accent);
  padding: 0;
  border: none;
  border-radius: 0;
  font-weight: 600;
}
.hp-btn-link:hover { color: var(--hp-accent-strong); }
.hp-btn-block { width: 100%; }

/* ─── 1. Hero ─── */
.hp-hero {
  position: relative;                                  /* 给 .hp-ai-badge 做绝对定位锚点 */
  background: var(--hp-surface);
  /* 100vh - nav 高度 (84px)：首屏正好占满视口可见区域；老旧/极矮屏幕用 600px 兜底 */
  min-height: max(600px, calc(100vh - 84px));
  display: flex;
  align-items: center;
  padding-top: 50px;
  padding-bottom: clamp(28px, 4vw, 60px);
  border-bottom: 1px solid var(--hp-border);
}

/* 概览页右上角小标签：使用 AI 技术深度参与本页面构建。随 hero 滚动消失，灰色半透明，低存在感 */
.hp-ai-badge {
  position: absolute;
  top: 12px;                                            /* 紧贴 nav 下方的 border 线之下 */
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(15, 26, 20, 0.04);
  color: rgba(15, 26, 20, 0.42);
  border: 1px solid rgba(15, 26, 20, 0.06);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.hp-ai-badge svg { flex-shrink: 0; opacity: 0.55; }
@media (max-width: 640px) {
  .hp-ai-badge {
    top: 10px;
    right: 8px;
    padding: 3px 8px 3px 6px;
    font-size: 0.6rem;
    max-width: calc(100vw - 16px);
    white-space: normal;
    line-height: 1.25;
    text-align: right;
  }
}
.hp-hero-inner {
  display: grid;
  /* 文字 1 份、图 1.5 份——图缩小、文字栏拉宽，整体更平衡 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(20px, 2.5vw, 36px);                      /* 内 gap 缩小 */
  align-items: center;
  width: 100%;
  /* 左右对称留白略缩 */
  max-width: 100%;
  padding-left: clamp(48px, 10vw, 200px);
  padding-right: clamp(48px, 10vw, 200px);
}
.hp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hp-accent-soft);
  color: var(--hp-accent-strong);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.hp-hero-eyebrow::before {
  content: "\e679";                /* iconfont icon-AIzhineng */
  font-family: "iconfont";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--hp-accent);
  font-size: 1rem;
  line-height: 1;
}
/* 左右对称布局后，文字列内不再单独 indent，直接贴 grid 列起点 */
.hp-hero-headline {
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-weight: 800;
  /* 1.6→2.2，2.4→3.2rem，main 标题明显放大；保留 <br> 控制换行不再 nowrap */
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--hp-fg);
}
/* "归宿" — 用与团队 section 同源的暖金色，与冷绿 accent 形成温暖呼应 */
.hp-hero-accent {
  background: linear-gradient(135deg, #C9A35C 0%, #B5882F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;                       /* 与 headline 同字重，保持视觉一致 */
}
@media (max-width: 520px) {
  .hp-hero-headline { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* 副标题：accent green，介于主标 (3rem 黑色) 与正文 (1rem 灰) 之间，调性偏宣传 */
.hp-hero-tagline {
  margin-top: 18px;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  color: var(--hp-accent);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.hp-hero-sub {
  margin-top: 24px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--hp-fg-2);
  max-width: 520px;
}
.hp-hero-btns {
  display: flex; gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hp-hero-right {
  /* 图右对齐到列右边缘，保持「图右 = 文字左」的对称留白 */
  display: flex; justify-content: flex-end; align-items: center;
}
.hp-hero-img {
  width: 90%;                   /* 整体缩 10%（80% → 90%） */
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ─── 2. About ─── */
.hp-about {
  background: var(--hp-surface);
  padding: clamp(44px, 5.5vw, 72px) 0;
  position: relative;
  /* 不能用 overflow: hidden —— 否则内部 .hp-codebase 的 sticky 会失效 */
}
.hp-about-inner {
  display: flex; flex-direction: column;
  gap: 16px; align-items: center;
}
.hp-about .hp-section-head { margin-bottom: 0; }
.hp-tags {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 8px 0 0;
  padding: 0;
}
.hp-tags li {
  background: var(--hp-surface-2);
  color: var(--hp-fg-2);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ─── About · 代码仓库增长（scroll-driven）─────────────────────
   --hp-codebase-progress 由 home.js 写入到 .hp-codebase（0~1）
   - p=0：左侧文字隐藏 / 右侧 chart 放大居中（吃掉两列空间）
   - p=1：左侧文字浮现 / 右侧 chart 缩回原位（右栏）
   ────────────────────────────────────────────────────────── */
.hp-codebase {
  position: relative;
  /* 比常规栏区更宽：突出曲线作为页面主视觉 */
  max-width: min(1500px, calc(100% - 24px));
  margin: -8px auto 0;                              /* 负 margin，紧贴上方 about 内容 */
  /* ⚠ bottom padding 是关键 — sticky 模式下 stage 释放时落在 codebase 底,
     不留 padding-bottom 会让 foot 备注跨过 about 边界进入 capability 区。
     此值需要保留(48-80px),否则会"被覆盖"。 */
  padding: 0 clamp(16px, 3vw, 40px) clamp(48px, 5vw, 80px);
  height: 230vh;                                    /* 加长滚动跑道,trace dot 推进更慢 */
}
.hp-codebase-stage {
  position: sticky;
  /* 初始贴近顶部（部分藏在 nav blur 下），随 title 阶段下滑到更靠下的中段位置，
     这样开始划滑块时图正好坐在视口偏下的中心 */
  top: calc(28px + var(--p-title, 0) * 130px);
  /* shrink 阶段把 stage 高度塌下去，避免内容居中后上下出现大块空白 */
  height: calc((100vh - 96px) - var(--p-shrink, 0) * 340px);
  max-height: calc(760px - var(--p-shrink, 0) * 340px);
  min-height: 380px;
  --p: var(--hp-codebase-progress, 0);

  /* 多阶段进度（每段映射到不同动画）：
     - p ∈ [0.00, 0.06]：标题刷出 + 图整体快速下滑（由 JS 写 --p-title）
     - p ∈ [0.06, 0.70]：dot 沿曲线推进，里程碑依次弹出
     - p ∈ [0.70, 0.88]：chart 由满宽收到右半
     - p ∈ [0.88, 1.00]：左侧文字浮现 */
  --p-trace:  clamp(0, calc((var(--p) - 0.06) / 0.64), 1);
  --p-shrink: clamp(0, calc((var(--p) - 0.70) / 0.18), 1);
  --p-text:   clamp(0, calc((var(--p) - 0.88) / 0.12), 1);
}

/* ─── 左：文字（最后阶段才浮现）─── 宽度更窄、整组靠右一点 */
.hp-codebase-text {
  position: absolute;
  left: clamp(48px, 5.5vw, 110px);                  /* 整组继续向右移，左边距更大 */
  top: -14px;                                       /* 整组再向上一点，与 chart-head 顶对齐 */
  width: calc(30% - clamp(10px, 1.5vw, 20px));
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;             /* 顶对齐，与 chart 同步 */
  opacity: var(--p-text);
  transform: translateX(calc((1 - var(--p-text)) * -20px));
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.hp-codebase-stage:hover .hp-codebase-text { pointer-events: auto; }
.hp-codebase-eyebrow {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--hp-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hp-codebase-title {
  /* 与 hero headline 同字体 */
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.55vw, 2.3rem);        /* 再加大一档 */
  line-height: 1.25;
  color: var(--hp-fg);
  margin: 0;
}
.hp-codebase-lead {
  margin: 12px 0 40px;                              /* 与下方时间轴拉开距离 */
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--hp-fg-2);
  max-width: 460px;
}
.hp-codebase-lead strong {
  color: var(--hp-accent);
  font-weight: 700;
}
.hp-codebase-events {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;                                   /* 时间点间距收到 8px，比 14 紧但不憋 */
  border-left: 2px solid var(--hp-accent-soft);
}
.hp-codebase-events li {
  display: flex;
  gap: 18px;
  padding: 6px 0 6px 20px;                    /* 上下内距收紧，与上方拉开靠 lead margin 实现 */
  position: relative;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--hp-fg-2);
}
.hp-codebase-events li::before {
  content: "";
  position: absolute;
  left: -8px; top: 16px;
  width: 14px; height: 14px;                  /* 圆点也跟着变大 */
  border-radius: 50%;
  background: var(--hp-accent-soft);
  border: 2px solid var(--hp-accent);
}
.hp-codebase-events .ev-date {
  flex-shrink: 0;
  width: 68px;                                /* 给更大的日期字体留位 */
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--hp-fg);
  font-size: 0.96rem;                         /* 0.82 → 0.96 */
}
.hp-codebase-events .ev-desc { color: var(--hp-fg-2); }

/* ─── 右：chart 容器（绝对定位 + width 跟着 p-shrink 收窄） ─── */
.hp-codebase-chart {
  position: absolute;
  top: 0;
  /* 满屏时贴右边；缩小后同步留出右边距，整体向左挪 */
  right: calc(var(--p-shrink, 0) * clamp(28px, 3.5vw, 72px));
  /* 全宽 → 占右 54%（缩小后预留中间空隙，左 30% 文字 + 中间 ~16% gap + 右 54% chart）。
     不加 transition：scroll 直接驱动，否则滑块位置会因宽度过渡滞后而抖动 */
  width: calc(100% - var(--p-shrink) * 46%);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;            /* 顶对齐：曲线贴到 stage 顶部 */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  z-index: 2;
}
.hp-codebase-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;                  /* flex-end → flex-start：标题贴顶 */
  gap: 24px;
  margin-top: -10px;                        /* 再往上拉一点，整组紧贴 stage 顶部 */
  margin-bottom: 14px;
}

/* 大英文标题：字体与 hero headline 一致；全大写 + 斜体；单行
   字号随 --p-shrink 插值：满屏 2.5rem，缩小态 1.1rem
   clip-path 由 --p-title 驱动 ── 在滚动早期就已经全部刷出 */
.hp-codebase-bigtitle {
  margin: 0;
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: calc(1.3rem + (1 - var(--p-shrink, 0)) * 1.2rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--hp-fg);
  flex: 1 1 auto;
  white-space: nowrap;                              /* 单行，不换行 */
  /* 左→右刷新效果：滚动 10% 时即刷完，之后再开始 dot 滑动 */
  clip-path: inset(0 calc((1 - var(--p-title, 0)) * 100%) 0 0);
  -webkit-clip-path: inset(0 calc((1 - var(--p-title, 0)) * 100%) 0 0);
  transition: clip-path .12s linear;
}

.hp-codebase-chart-stat {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
}
.hp-codebase-chart-value {
  /* 与 hero headline 同字体 */
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  /* 满屏 ~2.7rem，缩小态 ~1.4rem，跟着 chart 一起收 */
  font-size: calc(1.4rem + (1 - var(--p-shrink, 0)) * 1.3rem);
  font-weight: 800;
  color: var(--hp-accent);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;          /* 数字等宽，跳动时不晃 */
}
.hp-codebase-chart-label {
  margin-top: 4px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--hp-fg-3);
}

/* ─── chart canvas ─── */
.hp-codebase-canvas {
  position: relative;
  cursor: crosshair;
}
.hp-codebase-canvas svg {
  display: block;
  width: 100%;
  /* 高度全程 460 → 收缩态 340（缩小后图片更高更挺拔，trace dot 落点更准）；
     去掉 transition，避免与 scroll 驱动竞争导致滑块抖动 */
  height: calc(340px + (1 - var(--p-shrink, 0)) * 120px);
}
.hp-codebase-grid line {
  stroke: var(--hp-border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.6;
}
.hp-codebase-area {
  fill: var(--hp-accent-soft);
  fill-opacity: 0.55;
}
.hp-codebase-line {
  fill: none;
  stroke: var(--hp-accent);
  stroke-width: 4.5;                        /* 加粗，远看也清晰 */
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* trace dot：HTML 层（不被 SVG preserveAspectRatio 拉伸 → 保证正圆）—— 加大、更醒目 */
.hp-codebase-trace-dot {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--hp-accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(45, 94, 58, 0.4);
  z-index: 4;
}
.hp-codebase-trace-glow {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--hp-accent);
  opacity: 0.22;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.hp-codebase-cursor {
  stroke: var(--hp-accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity .15s;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.hp-codebase-cursor-dot {
  fill: var(--hp-accent);
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
  transition: opacity .15s;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.hp-codebase-canvas.is-hover .hp-codebase-cursor,
.hp-codebase-canvas.is-hover .hp-codebase-cursor-dot { opacity: 1; }

/* 里程碑：HTML 覆盖层 —— 不在 SVG 内，避免 preserveAspectRatio="none" 导致文字被横向挤压
   每个里程碑由 dot（曲线上）+ line（连接线）+ avatar（圆形头像）+ date + label 构成 */
.hp-codebase-ms-layer {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* 高度与 SVG 同步（不含底部 axes 区域），保证 milestone 的 top:y% 精确落在曲线像素位置 */
  height: calc(340px + (1 - var(--p-shrink, 0)) * 120px);
  pointer-events: none;
  z-index: 2;
}
.hp-codebase-ms {
  position: absolute;
  /* JS 写 left/top 把 dot 锚在数据点 */
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity .35s;
}
.hp-codebase-ms[data-visible="1"] { opacity: 1; }

/* 曲线上的圆点：尺寸随 --p-shrink 缩放，满屏 24px / 缩小态 12px */
.hp-codebase-ms-dot {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  width:  calc(12px + (1 - var(--p-shrink, 0)) * 12px);
  height: calc(12px + (1 - var(--p-shrink, 0)) * 12px);
  border-radius: 50%;
  background: var(--hp-accent);
  border: calc(2.5px + (1 - var(--p-shrink, 0)) * 1.5px) solid #fff;
  box-shadow: 0 3px 8px rgba(45, 94, 58, 0.45);
}

/* 标注线：独立 absolute，直接锚到 dot 中心，从曲线垂直伸出 */
.hp-codebase-ms-line {
  position: absolute;
  left: 50%;
  bottom: 0;                                   /* 默认上方布局：line 底端贴 dot 中心，向上延伸 */
  transform: translateX(-50%);
  width: 1.5px;
  /* 短线 32 → 缩小态 22；曲线顶部空间小的点用这一档 */
  height: calc(22px + (1 - var(--p-shrink, 0)) * 10px);
  background: var(--hp-accent);
  opacity: 0.6;
}
/* 长线：早期点（曲线低位）和奇偶交错走这档，给 label 抬高位置 */
.hp-codebase-ms--tall .hp-codebase-ms-line {
  height: calc(50px + (1 - var(--p-shrink, 0)) * 22px);
}

.hp-codebase-ms--below .hp-codebase-ms-line {
  bottom: auto;
  top: 0;                                      /* 翻转：line 顶端贴 dot 中心，向下延伸 */
}

/* 上方布局：line 上方堆 avatar / date / label
   关键：固定 width，让 label 在自己的"卡片"内换行（不再靠 nowrap 横向无限扩张）
   →相邻 milestone 即使 x 距离很近也只会通过 short/tall 上下错开，不会水平重叠 */
.hp-codebase-ms-stack {
  position: absolute;
  /* 与 line 高度严格对齐：line 22-32 → stack bottom 24-34 */
  bottom: calc(24px + (1 - var(--p-shrink, 0)) * 10px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(72px + (1 - var(--p-shrink, 0)) * 38px);   /* 缩小态 72 / 满屏 110 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
/* tall 档：line 50-72 → stack bottom 52-74 */
.hp-codebase-ms--tall .hp-codebase-ms-stack {
  bottom: calc(52px + (1 - var(--p-shrink, 0)) * 22px);
}

/* 翻转到曲线下方：avatar 在 line 下面 */
.hp-codebase-ms--below .hp-codebase-ms-stack {
  bottom: auto;
  top: 28px;
  flex-direction: column-reverse;
}
.hp-codebase-ms--below.hp-codebase-ms--tall .hp-codebase-ms-stack { top: 58px; }

/* ─── 横向布局：上方空间不够时往左/右伸 —— line 水平、stack 横向贴在 line 外侧 ─── */
.hp-codebase-ms--left .hp-codebase-ms-line,
.hp-codebase-ms--right .hp-codebase-ms-line {
  bottom: auto;
  top: 50%;
  height: 1.5px;                    /* 横线 */
  transform: translateY(-50%);
}
.hp-codebase-ms--left .hp-codebase-ms-line {
  left: auto;
  right: 0;                         /* 线右端贴 dot，向左延伸 */
  width: 28px;
}
.hp-codebase-ms--right .hp-codebase-ms-line {
  left: 0;                          /* 线左端贴 dot，向右延伸 */
  right: auto;
  width: 28px;
}
.hp-codebase-ms--left.hp-codebase-ms--tall .hp-codebase-ms-line,
.hp-codebase-ms--right.hp-codebase-ms--tall .hp-codebase-ms-line {
  width: 56px;
}

.hp-codebase-ms--left .hp-codebase-ms-stack,
.hp-codebase-ms--right .hp-codebase-ms-stack {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hp-codebase-ms--left .hp-codebase-ms-stack {
  left: auto;
  right: 32px;                      /* line 宽 + 缓冲 */
}
.hp-codebase-ms--left.hp-codebase-ms--tall .hp-codebase-ms-stack { right: 60px; }

.hp-codebase-ms--right .hp-codebase-ms-stack {
  left: 32px;
  right: auto;
  flex-direction: row-reverse;      /* 镜像：avatar 在远端，text 靠近 dot */
}
.hp-codebase-ms--right.hp-codebase-ms--tall .hp-codebase-ms-stack { left: 60px; }

/* 横向布局里 avatar 没有上下 margin，对齐文字块 */
.hp-codebase-ms--left .hp-codebase-ms-avatar,
.hp-codebase-ms--right .hp-codebase-ms-avatar { margin: 0; }

/* 文本块在横向布局里靠近 dot 一侧对齐 */
.hp-codebase-ms--left .hp-codebase-ms-text { align-items: flex-end; }
.hp-codebase-ms--right .hp-codebase-ms-text { align-items: flex-start; }

.hp-codebase-ms-avatar {
  /* 头像：满屏 50px / 缩小态 32px，跟随图表大小同比例缩 */
  width:  calc(32px + (1 - var(--p-shrink, 0)) * 18px);
  height: calc(32px + (1 - var(--p-shrink, 0)) * 18px);
  border-radius: 50%;
  background: var(--hp-accent-soft);
  border: none;
  color: var(--hp-accent-strong);
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-weight: 700;
  /* 字号同步放大：缩小态 0.78rem / 满屏 1.05rem，让 emoji / 单字撑满更大头像 */
  font-size: calc(0.78rem + (1 - var(--p-shrink, 0)) * 0.27rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(45, 94, 58, 0.18);
  margin-bottom: 2px;
  overflow: hidden;                              /* 让 <img> 被圆角裁掉四角 */
}
/* 上传图片头像：取消浅绿底（避免透明区干扰），让图片占满整圆 */
.hp-codebase-ms-avatar.has-image { background: #fff; }
.hp-codebase-ms-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hp-codebase-ms--below .hp-codebase-ms-avatar { margin-bottom: 0; margin-top: 2px; }

.hp-codebase-ms-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.hp-codebase-ms-date {
  font-family: 'Geist', 'Inter', sans-serif;
  /* date：缩小态 9.5 / 满屏 13.5 — 缩小态变小配合 72px 窄容器 */
  font-size: calc(9.5px + (1 - var(--p-shrink, 0)) * 4px);
  font-weight: 700;
  color: var(--hp-accent);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hp-codebase-ms-label {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* label：缩小态 9 / 满屏 12 — 缩小态显著缩，匹配 72px 窄容器 */
  font-size: calc(9px + (1 - var(--p-shrink, 0)) * 3px);
  font-weight: 500;
  color: var(--hp-fg-3);
  white-space: normal;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hp-codebase-tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--hp-fg);
  color: #fff;
  font-size: 0.78rem;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  z-index: 3;
  box-shadow: var(--hp-shadow);
}
.hp-codebase-tooltip.show { opacity: 1; }
.hp-codebase-tooltip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 8px; height: 8px;
  background: var(--hp-fg);
  transform: translateX(-50%) rotate(45deg);
}
.hp-codebase-tt-date {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
}
.hp-codebase-tt-value {
  font-weight: 700;
  margin-top: 2px;
}

/* 横坐标：双 axis 重叠 —— 满屏显示季度（15 个），缩小后切到年度（5 个）
   两组都用 absolute + space-between 独立分布，opacity 由 --p-shrink 插值 */
.hp-codebase-axes {
  position: relative;
  margin: 8px 0 0;
  height: 1.4em;
}
.hp-codebase-axis {
  position: absolute;
  left: 0; right: 0; top: 0;
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  justify-content: space-between;
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 500;
  color: var(--hp-fg-2);
  letter-spacing: 0.04em;
}
.hp-codebase-axis--full {
  font-size: 0.92rem;
  opacity: calc(1 - var(--p-shrink, 0));
}
.hp-codebase-axis--sparse {
  font-size: 0.78rem;
  opacity: var(--p-shrink, 0);
}
.hp-codebase-foot {
  margin: 28px 0 0;                            /* 与 axis 拉开;下方间距由 .hp-about + .hp-capability 控制 */
  font-size: 0.86rem;
  color: var(--hp-fg-3);
}

/* 窄屏：取消 sticky / scroll 驱动，单列堆叠 */
@media (max-width: 900px) {
  .hp-codebase { height: auto; }
  .hp-codebase-stage {
    position: static;
    grid-template-columns: 1fr;
    gap: 32px;
    height: auto;
    max-height: none;
  }
  .hp-codebase-text { opacity: 1; transform: none; }
  .hp-codebase-chart { transform: none; z-index: auto; }
}
@media (max-width: 640px) {
  .hp-codebase-chart-value { font-size: 1.25rem; }
  .hp-codebase-axis--full li:nth-child(2n) { visibility: hidden; }
}

/* ─── 3. Capability ─── */
.hp-capability {
  background: var(--hp-surface-3);
  /* 跟上面 codebase padding-bottom 合计形成 section 间距;codebase pb 已是关键值,这里 padding-top 取适中 */
  padding: clamp(44px, 5.5vw, 72px) 0;
}
/* 这块区域的 container 左右内距收窄，把省下的空间留给卡片间的 gap，
   让 3 张卡片之间有更明显的呼吸 */
.hp-capability .hp-container {
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}
.hp-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
}
.hp-cap-card {
  background: var(--hp-card);
  border-radius: var(--hp-radius-lg);
  padding: 32px 24px;
  display: flex; flex-direction: column;
  gap: 14px;                                /* 12 → 14，icon↔标题、各元素间距整体松一档 */
  box-shadow: var(--hp-shadow-sm);
  border: 1px solid var(--hp-border);
  transition: transform .15s, box-shadow .15s;
}
.hp-cap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hp-shadow);
}
.hp-cap-icon {
  width: 52px; height: 52px;               /* 56 → 52 */
  border-radius: 12px;
  background: var(--hp-accent);            /* 品牌绿 #2D5E3A */
  color: #fff;                             /* 白色图标 */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.65rem;                      /* glyph 同比微调 */
}
.hp-cap-card h3 {
  margin: 10px 0 0;                              /* 在 14px gap 之上再加 10px = 24px，icon↔标题更舒展 */
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 1.28rem;                            /* 1.15 → 1.28，标题更醒目 */
  font-weight: 700;
  color: var(--hp-fg);
}
.hp-cap-en {
  margin-top: 0;                                 /* 中英留 12px = flex gap */
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--hp-fg-3);
  text-transform: uppercase;
  padding-left: 0.2em;
}
.hp-cap-card p {
  margin: 18px 0 0;                              /* 12px gap + 18px = 30px 英文↔正文 */
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--hp-fg-2);
}

/* ─── 4. Projects · 三卡横排（参考 SaaS 大块图） ─── */
.hp-projects {
  background: var(--hp-surface);
  padding: clamp(44px, 5.5vw, 72px) 0;
}
/* projects 区域专用：比常规 1180 容器略宽，让三卡舒展但不过头 */
.hp-projects > .hp-container {
  max-width: min(1240px, calc(100% - 24px));
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}
.hp-proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.7vw, 24px);
  margin-top: 24px;
}
.hp-proj-card {
  position: relative;
  min-height: 480px;                            /* 560 → 480，整体收一点 */
  border-radius: var(--hp-radius-lg);
  /* 顶部留 60px 给 badge → 标题之间的呼吸；overflow visible 让 hover QR 弹出 */
  padding: 60px clamp(26px, 2.8vw, 36px) clamp(26px, 2.8vw, 36px);
  /* 默认背景：品牌渐变；上传 bg_image 后被 inline style 覆盖 */
  background-color: var(--hp-accent);
  background-image: linear-gradient(155deg, var(--hp-accent) 0%, var(--hp-accent-strong) 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--hp-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
}
.hp-proj-card:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow-lg); }

/* 有自定义背景图时：黑 / 深灰中性蒙版，alpha=0.72，白字更明显，背景图依然透出细节 */
.hp-proj-card.has-bg .hp-proj-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(40, 40, 40, 0.55) 0%, rgba(15, 15, 15, 0.6) 100%);
  pointer-events: none;
}
.hp-proj-card:not(.has-bg) .hp-proj-card-overlay { display: none; }

.hp-proj-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}

/* 标题区：固定主标题 2 行 + 副标题 1 行高度，保证下方 meta/desc/cta 永远对齐 */
.hp-proj-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-proj-card-name {
  margin: 0;
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* 始终占 2 行高度（实际只有 1 行也保留位置）；顶对齐：所有卡的主标题顶端在同一水平线 */
  min-height: calc(2em * 1.25);
  display: flex;
  align-items: flex-start;
}
.hp-proj-card-sub {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.02em;
  /* 始终占 1 行高度 */
  min-height: 1.5em;
}

.hp-proj-card-meta {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.hp-proj-card-meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hp-proj-card-meta .meta-k {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.hp-proj-card-meta .meta-v {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.hp-proj-card-desc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.hp-proj-card-desc p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
}

/* CTA 容器 —— 锚定底部，hover 时小程序二维码从上方弹出 */
.hp-proj-card-cta-wrap {
  position: relative;
  margin-top: auto;
  align-self: flex-start;
}
.hp-proj-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .05s;
}
.hp-proj-card-cta:hover {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
}
.hp-proj-card-cta:active { transform: translateY(1px); }
.hp-proj-card-cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.hp-proj-card-cta[disabled]:hover {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
}

/* 小程序类型：右下角常驻二维码 */
.hp-proj-card-qr {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 6px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.hp-proj-card-qr img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 4px;
}
.hp-proj-card-qr span {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--hp-accent-strong);
  letter-spacing: 0.04em;
}

/* 自营徽章 —— 紧贴右上角白底小药丸，字色为深黑 */
.hp-proj-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #0F1A14;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ─── 5. Data ─── */
.hp-data {
  background: linear-gradient(135deg, #143020 0%, var(--hp-accent-strong) 60%, #0E2417 100%);
  padding: clamp(32px, 4.5vw, 48px) 0;
}
/* 这块区域左右内距比通用 container 更窄，把节省下来的空间留给列间距，
   让四列在视觉上彼此分得更开 */
.hp-data .hp-container {
  padding-left: clamp(12px, 2vw, 32px);
  padding-right: clamp(12px, 2vw, 32px);
}
.hp-data-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  row-gap: 22px;
  column-gap: clamp(32px, 5vw, 64px);
  text-align: center;
  align-items: end;
}
/* 让每个 .hp-stat 的 num/label 直接参与父级网格，
   这样 4 列的 num 共用同一行高、4 列的 label 共用同一行高 → 横向对齐 */
.hp-stat { display: contents; }
.hp-stat-num {
  font-family: 'Funnel Sans', 'Noto Serif SC', 'Noto Sans SC', 'Inter', serif;
  font-size: 2rem;                                       /* 固定 2rem，让 "Build & Launch" 这种长词组也能一行装下 */
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  align-self: end;
  text-align: center;
}
.hp-stat-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  letter-spacing: 0.06em;
  align-self: start;
}
.hp-stat-ai-text {
  font-size: 1.6em;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #6BFFA8 0%, #FFFFFF 55%, #B6FFC9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(108, 255, 168, 0.5));
}

/* ─── 6. Team（轮播 6 人，每屏 3 张，左右切换） ─── */
/* 团队介绍 — 暖米黄渐变背景 + 白色卡片 + 金色 hairline，
   参考 Pencil 设计稿 (id: fLpeh) */
.hp-team {
  /* 局部色板：cream 系 + gold，仅在 .hp-team 作用域内有效 */
  --tm-cream-soft: #FAF6EB;
  --tm-cream:      #F5EFE0;
  --tm-cream-deep: #F2EAD3;
  --tm-gold:       #C9A35C;
  --tm-gold-soft:  rgba(201, 163, 92, 0.20);

  background:
    radial-gradient(ellipse at 0% 0%,   var(--tm-cream-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, var(--tm-cream-deep) 0%, transparent 55%),
    linear-gradient(180deg, var(--tm-cream-soft) 0%, var(--tm-cream) 100%);
  padding: clamp(56px, 6.5vw, 88px) 0;
}
/* ─── stage：tiles 暖场动画 + carousel 揭示 + 加入按钮位移 ─── */
.hp-team-stage {
  position: relative;
  /* 顶部预留 56px 给"加入我们"按钮（按钮在卡片区上方、不重叠）。
     初始紧凑：仅 tiles + 留白；揭示后 stage 撑高到容纳 cards，整体下方下移。 */
  padding-top: 56px;
  min-height: 220px;                                  /* 紧凑：56 padding + 164 tiles 区 */
  /* 横向放出 -56px 处的左右箭头；纵向继续 clip 让掉落的 tiles 在 stage 底边干净消失 */
  overflow-x: visible;
  overflow-y: clip;
  transition: min-height .8s ease 1.05s;              /* 等最后一个 tile 落完后才撑高 */
}
.hp-team-stage.is-revealed {
  min-height: 436px;                                  /* 揭示后撑到能容下 380 cards */
}

/* 阶段 1：6 个小方块对应 6 名团队，进入视窗即开始摇摆。
   只在卡片区（padding 之下）居中，不进入 padding 顶部的留白。 */
.hp-team-tiles {
  position: absolute;
  top: 56px; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;                                          /* 14→18 配合更大的 tile */
  pointer-events: none;
  transition: opacity .4s ease;
}
.hp-team-tile {
  width: 88px; height: 88px;                          /* 64→88，存在感更强 */
  border-radius: 18px;                                /* 14→18，与 size 匹配 */
  background: linear-gradient(135deg, var(--tm-cream-deep), #FFFCF3);
  border: 1px solid rgba(201, 163, 92, 0.30);
  box-shadow: 0 10px 22px rgba(27, 58, 107, 0.09);
  overflow: hidden;                                   /* 让 <img> 被圆角裁掉四角 */
  animation: hp-tile-wiggle 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.13s);
  transform-origin: center bottom;
  will-change: transform;
  /* 出场过渡先备好（在 base 上定义，避免 .is-revealed 一帧内同时设置 transition+target
     导致浏览器跳过过渡；动画驱动的 wiggle 不会触发这条 transition） */
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.55, 0.085, .68, .53);    /* easeIn-quad，重力感 */
}
.hp-team-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes hp-tile-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-8deg) translateY(-6px); }
  50%      { transform: rotate(0deg)  translateY(0); }
  75%      { transform: rotate(8deg)  translateY(-3px); }
}

/* carousel：viewport 占满容器宽度（保证中间卡片中心 === 页面中心），
   箭头绝对定位在 cards row 两侧、不吃卡片宽度。
   stage 模式：max-height 0 → 600 让 cards 平滑撑开，初始 stage 不被 cards 撑高。 */
.hp-team-carousel {
  position: relative;
  max-height: 0;                                      /* 初始：碎纸屑高度，不撑高 stage */
  /* 横向 visible 让左右箭头（-56px）能露出来；纵向 clip 继续把 max-height 撑开过程中的卡片裁干净。
     overflow-y: clip 比 hidden 好处：不会把 overflow-x 强制改成 auto。 */
  overflow-x: visible;
  overflow-y: clip;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    max-height .85s cubic-bezier(.4,0,.2,1) 1.05s,   /* 等最后一个 tile 落完再展开 */
    opacity .7s ease 1.05s,
    transform .7s ease 1.05s;
}
.hp-team-viewport {
  width: 100%;
  /* 横向 clip 把溢出的 track 裁掉；纵向 visible 让卡片 hover 上抬不被切。
     注意：必须用 clip（不能用 hidden），否则规范会强制把另一轴也变成 auto。 */
  overflow-x: clip;
  overflow-y: visible;
}

/* 加入我们 — 初始浮在卡片区中右（与 tiles 同水平线），揭示后滑到 stage 顶部留白
   →cards 上方 ~12px 间距，按钮整个在卡片区域外。尺寸全程不变。 */
.hp-team-join {
  position: absolute;
  right: 0;
  /* 初始定位到"卡片区"垂直中心：stage 中心 + padding-top 的一半 */
  top: calc(50% + 28px);
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;                                /* 居中的尺寸，从此固定不变 */
  background: var(--hp-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  /* 去掉绿色光晕：保留极轻的中性投影即可，避免按钮"飘"在 cream 背景上 */
  box-shadow: 0 1px 3px rgba(15, 26, 20, 0.10);
  transition:
    top .7s cubic-bezier(.4,0,.2,1),                 /* 立即开始移动，不延迟 */
    transform .7s cubic-bezier(.4,0,.2,1),
    background .15s, box-shadow .15s;
}
.hp-team-join:hover {
  background: var(--hp-accent-strong);
  box-shadow: 0 2px 6px rgba(15, 26, 20, 0.14);
}
.hp-team-join svg { transition: transform .2s ease; }
.hp-team-join:hover svg { transform: translateX(2px); }

/* 揭示后：用新 keyframe animation 替换 wiggle 做出场。
   关键 — 用 animation 而不是 transition：CSS 一个已知坑是 transform 被 animation
   驱动的属性，关掉 animation 时 transition 不会触发（opacity 不受 transform animation
   影响所以正常 transition）。改成 animation→animation 切换，用 forwards 锁定终态。 */
.hp-team-stage.is-revealed .hp-team-tile {
  animation: hp-tile-fall .6s cubic-bezier(.55, .085, .68, .53) forwards;
  animation-delay: calc(var(--i) * 0.10s);
}
/* 奇偶交替倾斜方向，更"翻滚"的感觉 */
.hp-team-stage.is-revealed .hp-team-tile:nth-child(odd) {
  animation-name: hp-tile-fall-odd;
}
@keyframes hp-tile-fall {
  0%   { transform: rotate(0) translateY(0); opacity: 1; }
  100% { transform: rotate(28deg) translateY(180px); opacity: 0; }
}
@keyframes hp-tile-fall-odd {
  0%   { transform: rotate(0) translateY(0); opacity: 1; }
  100% { transform: rotate(-28deg) translateY(180px); opacity: 0; }
}
.hp-team-stage.is-revealed .hp-team-tiles { pointer-events: none; }
.hp-team-stage.is-revealed .hp-team-carousel {
  max-height: 620px;                                  /* 600 + 20 padding，给 hover lift 留空间 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* 给卡片 hover 时 -3px 上抬留 6px 余量；reveal 后再加 padding，避免初始 max-height:0
     状态下也露出一条 6px 空白 */
  padding-top: 6px;
}
.hp-team-stage.is-revealed .hp-team-join {
  top: 0;
  transform: translateY(0);
}

/* 用户偏好：减少动画 → 直接进入终态，不播放 wiggle */
@media (prefers-reduced-motion: reduce) {
  .hp-team-tile { animation: none; opacity: 0; }
  .hp-team-carousel { opacity: 1; transform: none; transition: none; }
  .hp-team-join { top: 0; transform: translateY(0); transition: none; }
}
/* 简洁箭头：圆形浅灰底 + 中性 chevron，hover 略加深。
   挂在 .hp-team-stage 顶级（不在 carousel 里），定位以 stage padding-top(56) + carousel padding(6)
   + 卡片高度一半为参考；用 calc 居中到卡片视觉中心。 */
.hp-team-arrow {
  position: absolute;
  /* stage 顶 56(stage padding) + 6(carousel padding) + ~190(卡片半高) = ~252 */
  top: calc(56px + 6px + 190px);
  transform: translateY(-50%);
  z-index: 11;                                  /* 高于 join(10)，确保任何情况下命中优先 */
  pointer-events: auto;                         /* 显式声明，杜绝继承 none */
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--hp-fg-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, opacity .15s;
}
.hp-team-arrow:hover:not(:disabled) {
  background: #fff;
  color: var(--hp-fg);
}
.hp-team-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─── 团队 carousel 自动轮播指示器（"胶囊进度条"） ─────────────────
   每个 .hp-team-pager-dot 默认是小圆点；当前页加 .active → 撑成胶囊，
   内部的 .hp-team-pager-fill 跑 widthChange 0%→100%，时长 = JS 里 AUTO_INTERVAL。 */
.hp-team-pager {
  position: absolute;
  top: 18px;                                /* 在 stage padding-top 56 之内、加入按钮的左侧 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 11;                              /* 与箭头同层；在 join(10) 之上 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease 1.05s;
}
.hp-team-stage.is-revealed .hp-team-pager {
  opacity: 1;
  pointer-events: auto;
}

.hp-team-pager-dot {
  position: relative;
  overflow: hidden;                         /* 关键：裁掉 fill 溢出 */
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 26, 20, 0.18);
  cursor: pointer;
  transition: width .35s ease, background .25s ease;
}
.hp-team-pager-dot.active {
  width: 36px;
  background: rgba(15, 26, 20, 0.14);
}
.hp-team-pager-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--tm-gold);
  border-radius: 999px;
}
.hp-team-pager-dot.active .hp-team-pager-fill {
  animation: hp-pager-fill var(--hp-auto-interval, 4500ms) linear forwards;
}
/* 用户停了 auto 后，所有 dot 都加 .auto-stopped；激活的 dot 直接显示 100% 填充，不再跑动画 */
.hp-team-pager-dot.active.auto-stopped .hp-team-pager-fill {
  animation: none;
  width: 100%;
}
@keyframes hp-pager-fill {
  0%   { width: 0%;   opacity: 0.6; }
  10%  { opacity: 1; }
  100% { width: 100%; opacity: 1; }
}
/* 把箭头放在 cards row 完全外侧 — 不和卡片重叠。
   宽屏：-56px 让 40px 箭头整圆都在 cards row 之外（落在 .hp-container 外的页面留白里）；
   窄屏：缩小并贴近边缘，避免溢出屏幕。 */
.hp-team-prev { left: -56px; }
.hp-team-next { right: -56px; }
@media (max-width: 1280px) {
  .hp-team-prev { left: -48px; }
  .hp-team-next { right: -48px; }
}
@media (max-width: 1100px) {
  .hp-team-prev { left: -8px; }
  .hp-team-next { right: -8px; }
}
@media (max-width: 768px) {
  .hp-team-prev { left: 4px; }
  .hp-team-next { right: 4px; }
}
.hp-team-track {
  display: flex;
  gap: 40px;                                               /* 24 → 40，3 卡之间更呼吸 */
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.hp-team-card {
  /* 3 张可视，2 个 gap：(100% - 2 × 40px) / 3 */
  flex: 0 0 calc((100% - 80px) / 3);
  background: #FFFFFF;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid var(--tm-gold-soft);
  /* 不再用蓝调投影 — 仅靠极轻一线 hairline 划界，hover 时只通过位移 + 描边变化反馈 */
  box-shadow: none;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  transition: transform .2s ease, border-color .2s ease;
}
.hp-team-card:hover {
  transform: translateY(-3px);
  border-color: var(--tm-gold);                   /* hover 描边换成完整金，不再用阴影 */
}
.hp-team-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFCF3 0%, var(--tm-cream-deep) 100%);
  /* 双层环：内层 hairline 留呼吸 + 外层金色细环 */
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 4px var(--tm-gold);
  color: var(--hp-accent-strong);
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
  margin-top: 4px;                         /* 给金环留点上方呼吸 */
  overflow: hidden;                        /* 让 <img> 被圆形裁切 */
}
.hp-team-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hp-team-card h3 {
  margin: 0;
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hp-fg);
}
.hp-team-role {
  font-size: 0.78rem;
  color: var(--tm-gold);                   /* 金色角色标签 */
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hp-team-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--hp-fg-2);
  max-width: 240px;
}

/* ─── 7. Value ─── */
.hp-value {
  background: var(--hp-surface-2);
  padding: clamp(44px, 5.5vw, 72px) 0;
}
.hp-value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.hp-value-card {
  background: var(--hp-card);
  border-radius: var(--hp-radius-lg);
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 14px;
  border: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow-sm);
}
.hp-value-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--hp-accent);
  position: relative;
}
.hp-value-icon::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}
.hp-value-card h3 {
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hp-fg);
}
.hp-value-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--hp-fg-2);
}

/* ─── 8. Contact ─── */
.hp-contact {
  background: var(--hp-surface);
  padding: clamp(44px, 5.5vw, 72px) 0;          /* 与其他 section 一致，去掉单独的 80px 底部 */
}
/* 容器左右内距收窄，把空间让给表单 */
.hp-contact .hp-container {
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}
.hp-contact-body {
  display: grid;
  /* 表单字段多 → 左列再收窄一些，让 form 占更宽 */
  grid-template-columns: minmax(210px, 0.32fr) 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;                                    /* 两列都从顶部开始，h3 同行 */
}
.hp-contact-left {
  padding: 36px 4px;                                     /* 顶部 36px 与右侧 form 顶部 padding 对齐 → 两个 h3 同行 */
  display: flex; flex-direction: column; gap: 24px;
}
.hp-contact-left h3,
.hp-contact-form h3 {
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px;                                       /* 标题与下方内容拉开一点点 */
}
/* "发送消息" 标题行：左侧标题 + 右侧"我在 中国/美国" radio chip */
.hp-contact-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-contact-form-head h3 { margin: 0; }                  /* 由父级 form gap 接管竖向间距 */
.hp-contact-row {
  display: flex; align-items: center; gap: 14px;
}
.hp-contact-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--hp-accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
/* iconfont 字形比 SVG 视觉重心小，单独放大撑满图标盒 */
.hp-contact-icon .iconfont { font-size: 1.7rem; line-height: 1; }
.hp-contact-row > div + div {
  display: flex; flex-direction: column; gap: 2px;       /* label↔value 极紧 */
}
.hp-contact-label {
  font-size: 0.78rem;
  color: var(--hp-fg-3);
  letter-spacing: 0.04em;
}
.hp-contact-val {
  font-size: 1rem;
  font-weight: 500;
  color: var(--hp-fg);
  line-height: 1.4;
}
.hp-contact-qr {
  width: 156px; height: 156px;
  border-radius: 12px;
  border: 1px solid var(--hp-border);
  background: #fff;
  padding: 6px;                                          /* 给二维码留出"白边"，更易扫码 */
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  margin-top: 4px;                                       /* 与上方 row 区拉开一点 */
}
.hp-contact-form {
  background: var(--hp-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg);
  padding: 36px;
  display: flex; flex-direction: column; gap: 28px;      /* 三大字段块（姓名行/咨询事项/留言）间距，拉开呼吸 */
  box-shadow: var(--hp-shadow);
}
.hp-contact-form label {
  display: flex; flex-direction: column;
  gap: 8px;                                              /* 6→8，label↔input 更松 */
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hp-fg);
}
.hp-contact-form input,
.hp-contact-form textarea {
  width: 100%;
  box-sizing: border-box;                                /* 含 padding+border 才不溢出右侧 */
  padding: 12px 14px;                                    /* 11→12，输入框更舒服 */
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  background: var(--hp-surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}
.hp-contact-form input::placeholder,
.hp-contact-form textarea::placeholder {
  color: var(--hp-fg-3);
}
.hp-contact-form input:focus,
.hp-contact-form textarea:focus,
.hp-contact-form select:focus {
  border-color: var(--hp-accent);
  box-shadow: 0 0 0 3px rgba(45, 94, 58, 0.12);
}

/* 一行两栏：姓名/邮箱、时长/技术状态。窄屏自动堆叠为一栏。 */
.hp-contact-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* 姓名 + 邮箱：姓名是短字段，邮箱长，比例 0.6 : 1 */
.hp-contact-row-2--ne {
  grid-template-columns: 0.6fr 1fr;
}
@media (max-width: 640px) {
  .hp-contact-row-2,
  .hp-contact-row-2--ne { grid-template-columns: 1fr; }
}

/* 想咨询的事情是 — fieldset + chip 多选 */
.hp-contact-fieldset {
  border: 0;
  padding: 0;
  margin: 0;                                             /* 三大模块间距统一交给 form 的 gap (16px) 控制 */
  display: flex; flex-direction: column;
  /* 不靠 gap —— <legend> 在多数浏览器里被特殊处理，并不真正参与 fieldset 的 flex 布局，
     gap 在 legend↔chips 之间常常失效。改用 legend.margin-bottom 显式给间距 */
}
.hp-contact-fieldset legend {
  display: flex; align-items: baseline; gap: 0;          /* "想咨询的事情" 紧贴 "（可多选）"，不再分开 */
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hp-fg);
  padding: 0;
  margin-bottom: 8px;                                    /* 与 label↔input 的 8px 一致；不依赖 fieldset 的 flex gap */
}
.hp-contact-hint {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--hp-fg-3);
}
.hp-contact-chips {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.hp-contact-chip {
  cursor: pointer;
  user-select: none;
  position: relative;
}
/* 真正的 input 只用作状态载体，不显示 */
.hp-contact-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.hp-contact-chip span {
  display: inline-block;
  padding: 8px 16px;                         /* 7/14 → 8/16 配合更大字号 */
  border-radius: 999px;
  border: 1px solid var(--hp-border);
  background: var(--hp-surface);
  color: var(--hp-fg-2);
  font-size: 0.95rem;                        /* 0.85 → 0.95，标签更易读 */
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.hp-contact-chip:hover span {
  border-color: var(--hp-fg-3);
  color: var(--hp-fg);
}
.hp-contact-chip input:checked + span {
  border-color: var(--hp-accent);
  background: var(--hp-accent-soft);
  color: var(--hp-accent-strong);
}
.hp-contact-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(45, 94, 58, 0.12);
}

/* 下拉选择 — 与 input 视觉风格统一，自定义 chevron */
.hp-contact-form select {
  width: 100%;
  padding: 12px 36px 12px 14px;                          /* 右侧 36px 留给 chevron */
  font: inherit;
  font-size: 0.95rem;
  color: var(--hp-fg);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  background: var(--hp-surface);
  outline: none;
  cursor: pointer;
  /* 三家私有都关掉，否则 Firefox/旧 Edge 还会画一个原生箭头叠在自定义 chevron 上 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238E9994' stroke-width='1.6' stroke-linecap='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;                             /* SVG 没写 width/height，部分浏览器会按 select 整高铺满 → 必须显式锁尺寸，不然箭头巨大 */
  transition: border-color .15s, box-shadow .15s;
}
/* IE/旧 Edge 的原生下拉箭头 */
.hp-contact-form select::-ms-expand { display: none; }
.hp-contact-form select:invalid { color: var(--hp-fg-3); }   /* 未选时占位灰 */
/* 提交按钮：在 form 的 20px gap 之上再多挤一点上方留白，
   让按钮和上方"项目背景"输入框之间有"分组结束"的视觉断点 */
.hp-contact-form button[type="submit"] {
  margin-top: 6px;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* 已废弃（地区选择移到标题行了）— 保留键名占位以防外部引用，无实际效果 */
.hp-contact-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hp-contact-submit-row .hp-btn {
  flex: 1;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* 「我在 中国 / 美国」 — 紧凑型 chip 单选 */
/* 地区切换：用浅橙色让用户一眼看到这里能选 */
.hp-contact-region {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;                        /* 0.82 → 0.88，整体更醒目 */
  color: var(--hp-fg-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.hp-contact-region-prefix {
  color: var(--hp-fg-3);
  margin-right: 2px;
}
.hp-contact-region-opt {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.hp-contact-region-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.hp-contact-region-opt span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #F2A35C;                 /* 暖橙描边，未选时也显眼 */
  background: #FFF3E5;                       /* 浅橙底，提示这是可点的 */
  color: #B86A2C;                            /* 中橙字 */
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.hp-contact-region-opt:hover span {
  border-color: #D87E2C;
  background: #FFE8D2;
  color: #8C4A12;
  transform: translateY(-1px);
}
.hp-contact-region-opt input:checked + span {
  background: #F2A35C;                       /* 选中：实色橙 */
  border-color: #D87E2C;
  color: #fff;
  transform: translateY(0);
}
.hp-contact-region-opt input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(242, 163, 92, 0.30);
}
.hp-contact-msg {
  border-radius: var(--hp-radius);
  padding: 10px 12px;
  font-size: 0.9rem;
}
.hp-contact-msg.ok { background: var(--hp-accent-soft); color: var(--hp-accent-strong); }
.hp-contact-msg.err { background: #FBE5E0; color: #8C1C00; }

/* ─── 9. Footer ─── */
.hp-footer {
  background: var(--hp-fg);
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(40px, 6vw, 64px) 0 32px;
}
.hp-footer-inner {
  display: flex; flex-direction: column;
  gap: 32px;
}
.hp-footer-top {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 32px;
}
.hp-footer-brand {
  flex: 1 1 280px;
  min-width: 240px;
}
.hp-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  text-decoration: none;
  color: #fff;
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.hp-footer-logo img {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.hp-footer-name {
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.hp-footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 320px;
}
.hp-footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, auto));
  gap: 48px;
}
.hp-footer-nav h4 {
  font-family: 'Funnel Sans', 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
  /* 与左侧 brand-logo（40px 高的图标 + 文字内联居中）顶部对齐：
     logo 文字视觉位置 ≈ y14，h4 默认从 y0 起算 → 顶推 14px 视觉对齐 */
  margin-top: 14px;
}
.hp-footer-nav a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 8px;
}
.hp-footer-nav a:hover { color: #fff; }
.hp-footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.hp-footer-bottom {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}
.hp-footer-icp {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.hp-footer-icp:hover { color: rgba(255, 255, 255, 0.7); }

/* ─── 响应式 ─── */
@media (max-width: 960px) {
  .hp-hero-inner { grid-template-columns: 1fr; }
  .hp-hero-right { order: -1; }
  .hp-hero-img { max-width: 100%; }
  .hp-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-proj-grid { grid-template-columns: 1fr; }
  .hp-proj-card { min-height: 380px; }
  .hp-team-card { flex-basis: 100%; }                      /* 中小屏：1 张可视，始终居中 */
  .hp-value-grid { grid-template-columns: 1fr; }
  .hp-contact-body { grid-template-columns: 1fr; }
  .hp-data-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hp-nav-links { display: none; }
}
@media (max-width: 640px) {
  .hp-cap-grid { grid-template-columns: 1fr; }
  .hp-team-card { flex-basis: 100%; }                    /* 窄屏：1 张可视 */
  .hp-team-arrow { width: 36px; height: 36px; }
  .hp-footer-nav { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hp-nav-actions .hp-link { display: none; }
  /* 极窄屏只保留 mail 图标，隐藏邮箱文字以省空间 */
  .hp-mail span { display: none; }
  .hp-mail { padding: 8px; }
}

/* ============================================================
 * 手机端综合适配（≤768px）— 仅作为覆盖层，不动 PC 端规则
 * 包含：hero / about codebase / capability / projects / data / team / contact / footer
 * ============================================================ */
@media (max-width: 768px) {
  /* ─── Hero ─── */
  .hp-hero {
    min-height: auto;
    padding: 36px 0 56px;
  }
  .hp-hero-inner { gap: 28px; }
  .hp-hero-eyebrow {
    font-size: 0.72rem;
    padding: 8px 12px;
  }
  .hp-hero-headline { font-size: clamp(1.7rem, 7.6vw, 2.3rem); line-height: 1.22; }
  .hp-hero-tagline { font-size: 1rem; }
  .hp-hero-sub { font-size: 0.9rem; line-height: 1.7; }
  .hp-hero-btns { flex-wrap: wrap; gap: 8px; }
  .hp-btn { padding: 10px 18px; font-size: 0.9rem; }

  /* ─── 通用 section ─── */
  .hp-section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hp-section-en { font-size: 0.7rem; letter-spacing: 0.22em; }
  .hp-section-sub { font-size: 0.92rem; }
  .hp-section-body { font-size: 0.92rem; line-height: 1.85; }

  /* ─── Codebase widget — flatten：取消 sticky scroll-track，单页竖排 ─── */
  .hp-codebase {
    height: auto;                         /* 不再用 230vh 长跑道 */
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 12px 0;
  }
  .hp-codebase-stage {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
    min-height: 0;
    /* 强制进度变量为终态 — 让 PC 端的多阶段动效不在移动端计算 */
    --p-title: 1;
    --p-shrink: 0;
    --p-text: 1;
    /* trace 由 JS 在进入视窗时一次性 0→1 推进（mobile 路径） */
  }
  .hp-codebase-text {
    position: static;
    width: 100%;
    height: auto;
    left: auto; top: auto;
    transform: none;                       /* 不要 PC 的 translateX 浮现 */
    pointer-events: auto;
    margin-bottom: 20px;
  }
  .hp-codebase-title { font-size: clamp(1.4rem, 5.6vw, 1.85rem); }
  .hp-codebase-lead { margin-bottom: 24px; font-size: 0.92rem; }
  .hp-codebase-events li { font-size: 0.95rem; padding: 5px 0 5px 16px; gap: 12px; }
  .hp-codebase-events .ev-date { min-width: 64px; font-size: 0.92rem; }
  .hp-codebase-chart {
    /* 关键：PC 端 chart 是 absolute 浮在 .hp-codebase 右上角，移动端必须强制
       回到 normal flow，否则会盖住上方文字、右侧也错位 */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100%;
    height: auto;
    transform: none !important;            /* 取消 PC shrink 的位移 */
    margin: 24px 0 0;                       /* 与上方文字明显分开 */
  }
  .hp-codebase-canvas {
    height: 220px !important;               /* 强行收回，覆盖 PC 上的 calc 高度 */
  }
  .hp-codebase-canvas svg {
    height: 220px !important;
  }
  .hp-codebase-chart-head { padding: 0 4px; }
  .hp-codebase-bigtitle { font-size: 1.1rem; line-height: 1.3; }
  .hp-codebase-chart-value { font-size: 1.4rem; }
  .hp-codebase-chart-label { font-size: 0.65rem; letter-spacing: 0.18em; }
  .hp-codebase-canvas { height: 220px; }
  .hp-codebase-canvas svg { height: 220px; }
  /* 移动端只显示稀疏 axis 标签，避免拥挤 */
  .hp-codebase-axis--full { display: none; }
  .hp-codebase-axis--sparse li { font-size: 0.7rem; }
  .hp-codebase-trace-dot { width: 16px; height: 16px; border-width: 3px; }
  .hp-codebase-trace-glow { width: 36px; height: 36px; }
  .hp-codebase-foot { font-size: 0.8rem; }
  /* milestones：移动端简化 — 隐藏，避免和狭小图表抢空间 */
  .hp-codebase-ms { display: none; }
  /* 进入视窗触发 line 描画 + dot 推进的 hook，靠 JS 加 .is-in-view */
  .hp-codebase.is-in-view .hp-codebase-line {
    animation: hp-cb-draw 2.2s cubic-bezier(.4,0,.2,1) forwards;
  }
  .hp-codebase-line {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
  }

  /* ─── Capability cards ─── */
  .hp-cap-card { padding: 24px 18px; }
  .hp-cap-card h3 { font-size: 1.18rem; margin-top: 8px; }
  .hp-cap-en { font-size: 0.66rem; letter-spacing: 0.18em; }
  .hp-cap-card p { font-size: 0.88rem; margin-top: 14px; }
  .hp-cap-icon { width: 46px; height: 46px; font-size: 1.45rem; }

  /* ─── Projects ─── */
  .hp-proj-grid { gap: 16px; }
  .hp-proj-card { padding: 56px 22px 24px; min-height: 480px; }
  .hp-proj-card-name { font-size: 1.45rem; }
  .hp-proj-card-desc p { font-size: 0.92rem; }
  .hp-proj-card-qr img { width: 70px; height: 70px; }
  .hp-proj-card-qr { right: 14px; bottom: 14px; }

  /* ─── Data band — 4 列 → 2 列 ─── */
  .hp-data-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    column-gap: 16px;
    row-gap: 28px;
  }
  /* 取消 display:contents，让每个 stat 自己成为一个 grid item */
  .hp-stat {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
  }
  .hp-stat-num { font-size: 1.5rem; align-self: center; }
  .hp-stat-label { font-size: 0.85rem; align-self: center; }

  /* ─── Team section — tiles 缩小适配窄屏，stage 高度同步缩 ─── */
  .hp-team-stage {
    padding-top: 64px;                    /* 给按钮 + 卡片间距留 64px */
    min-height: 200px;                    /* 64 padding + 136 tiles 区 */
  }
  .hp-team-stage.is-revealed { min-height: 420px; }
  .hp-team-tiles {
    top: 64px;
    gap: 10px;
  }
  .hp-team-tile {
    width: 52px; height: 52px;            /* 88 → 52，6 张能并排放进 360px viewport */
    border-radius: 12px;
  }
  /* fall 距离适配较矮的 stage：从 180 → 130 */
  .hp-team-stage.is-revealed .hp-team-tile {
    transform: translateY(130px) rotate(28deg);
  }
  .hp-team-stage.is-revealed .hp-team-tile:nth-child(odd) {
    transform: translateY(130px) rotate(-28deg);
  }
  /* wiggle 幅度小一点，避免小 tile 摇得太夸张 */
  @keyframes hp-tile-wiggle-mobile {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(-6deg) translateY(-4px); }
    50%      { transform: rotate(0deg)  translateY(0); }
    75%      { transform: rotate(6deg)  translateY(-2px); }
  }
  .hp-team-tile { animation-name: hp-tile-wiggle-mobile; }
  /* 加入按钮：缩小 padding，初始位置同步对齐缩小后的 padding-top（64/2=32） */
  .hp-team-join {
    top: calc(50% + 32px);
    padding: 8px 14px;
    font-size: 0.84rem;
  }
  /* 箭头收回：从 -56px → 0，避免溢出小屏 */
  .hp-team-prev { left: 0; }
  .hp-team-next { right: 0; }

  /* ─── Contact form ─── */
  .hp-contact-form { padding: 24px 20px; gap: 22px; }
  .hp-contact-form-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hp-contact-form input,
  .hp-contact-form textarea,
  .hp-contact-form select { font-size: 0.92rem; padding: 10px 12px; }
  .hp-contact-form select { padding-right: 32px; }
  .hp-contact-chip span { font-size: 0.88rem; padding: 6px 12px; }
  .hp-contact-region { font-size: 0.85rem; }
  .hp-contact-left { padding: 0 4px; gap: 18px; }
  .hp-contact-qr { width: 132px; height: 132px; }

  /* ─── Footer ─── */
  .hp-footer { padding: 36px 0 24px; }
  .hp-footer-top { gap: 28px; }
  .hp-footer-brand p { font-size: 0.88rem; }
}

/* ============================================================
 * 极窄屏（≤480px）进一步收紧
 * ============================================================ */
@media (max-width: 480px) {
  /* tiles 再收一档 */
  .hp-team-tiles { gap: 7px; }
  .hp-team-tile { width: 44px; height: 44px; border-radius: 10px; }

  /* data 4 stats 在极窄屏改成单列堆叠（避免一行两列被名词压挤） */
  .hp-data-inner {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  /* 卡片间距收紧 */
  .hp-cap-card { padding: 22px 16px; }
  .hp-team-card { padding: 20px 16px; }
  .hp-contact-form { padding: 20px 16px; }

  /* hero 按钮全宽 */
  .hp-hero-btns .hp-btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
}

/* line 描画动画（移动端 .is-in-view 触发） */
@keyframes hp-cb-draw {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
 * Hamburger 导航（PC 隐藏 / 手机显示，点击展开下拉）
 * ============================================================ */
.hp-nav-toggle {
  display: none;                            /* PC 端隐藏 */
  width: 38px; height: 38px;
  border: 1px solid var(--hp-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}
.hp-nav-toggle span {
  position: absolute;
  left: 9px; right: 9px;
  height: 2px;
  background: var(--hp-fg);
  border-radius: 2px;
  transition: transform .25s, opacity .25s, top .25s;
}
.hp-nav-toggle span:nth-child(1) { top: 11px; }
.hp-nav-toggle span:nth-child(2) { top: 18px; }
.hp-nav-toggle span:nth-child(3) { top: 25px; }
.hp-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 18px; transform: rotate(45deg);
}
.hp-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hp-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 18px; transform: rotate(-45deg);
}

/* 手机端下拉面板 */
.hp-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: clamp(16px, 3vw, 32px);
  margin-top: 6px;
  min-width: 180px;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 26, 20, 0.12);
  padding: 8px;
  z-index: 49;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hp-mobile-menu.is-open { display: flex; }
.hp-mobile-menu a {
  padding: 10px 14px;
  color: var(--hp-fg);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.hp-mobile-menu a:hover,
.hp-mobile-menu a.active {
  background: var(--hp-accent-soft);
  color: var(--hp-accent-strong);
}

@media (max-width: 960px) {
  .hp-nav-toggle { display: inline-block; }
  /* 两个按钮之间间距 + 把整组 nav-actions 往右贴边一点 */
  .hp-nav-actions { gap: 14px; margin-left: auto; padding-right: 4px; }
}

/* ============================================================
 * 手机端二次精修（≤768px）— 修正 codebase 间距、团队 swap 模式、
 * contact 居中、容器对齐等
 * ============================================================ */
@media (max-width: 768px) {
  /* ─── 容器对齐统一：所有 section 用同一组左右 padding，避免某些屏幕上
     codebase 比 .hp-container 宽出来形成的视觉错位 ─── */
  .hp-container { padding-left: 16px; padding-right: 16px; }
  .hp-codebase {
    /* 改成与 .hp-container 完全对齐 */
    max-width: 100%;
    margin: 32px auto !important;          /* 顶部 + "codebase growth" eyebrow 与上方 about 拉开间距 */
    padding: 24px 16px 32px;
  }

  /* ─── Codebase chart 头部：title + value 改为纵向堆叠，title 允许换行避免溢出 ─── */
  .hp-codebase-chart-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 0;
    padding: 0;
  }
  .hp-codebase-bigtitle {
    white-space: normal !important;        /* 撤销 PC 的 nowrap，允许换行 */
    font-size: 0.95rem !important;          /* 进一步收紧字号确保不挤 */
    line-height: 1.25;
    flex: 0 0 auto;
  }
  .hp-codebase-chart-stat {
    align-self: flex-start;
    text-align: left;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .hp-codebase-chart-value { font-size: 1.35rem; }
  .hp-codebase-chart-label { font-size: 0.62rem; letter-spacing: 0.16em; }
  .hp-codebase-eyebrow { margin-top: 12px; }

  /* ─── 移动端：关闭里程碑 avatar 显示，只保留 trace dot + 数字递增 ─── */
  .hp-codebase-ms,
  .hp-codebase-ms-layer { display: none !important; }
  .hp-codebase-canvas { height: 280px !important; }
  .hp-codebase-canvas svg { height: 280px !important; }

  /* ─── 团队介绍：手机端改"内容替换"模式 — 不滑动整张卡，
     只让被点中的卡片在原位显示，其它隐藏 ─── */
  .hp-team-track {
    display: block !important;
    transform: none !important;
    gap: 0 !important;
  }
  .hp-team-card { display: none; }
  .hp-team-card.is-active {
    display: flex;
    flex-basis: 100% !important;
    width: 100%;
    /* 固定卡片最小高度 — 即使简介文本短、长，UI 高度也不变 */
    min-height: 320px;
    justify-content: flex-start;
  }
  /* 箭头透明背景 */
  .hp-team-arrow {
    background: transparent !important;
    border-color: rgba(15, 26, 20, 0.12);
    box-shadow: none !important;
  }
  .hp-team-arrow:hover:not(:disabled) {
    background: rgba(15, 26, 20, 0.04) !important;
    box-shadow: none !important;
  }
  /* 加入按钮：手机端始终钉在 stage 顶部右侧，不要从 tile 中心位移 —
     避免初始状态盖住 6 个头像 tile */
  .hp-team-join {
    top: 0 !important;
    transform: translateY(0) !important;
    padding: 8px 14px;
    font-size: 0.84rem;
  }
  /* tiles 适配窄屏：6 张 + 5 个 gap 必须能塞进屏幕 */
  .hp-team-tiles { gap: 8px; }
  .hp-team-tile { width: 48px; height: 48px; border-radius: 11px; }

  /* ─── Contact 模块手机端：恢复左对齐（去掉之前的居中），保留必要的布局修正 ─── */
  .hp-contact-body {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .hp-contact-left {
    align-items: stretch;                      /* 恢复默认拉伸，不居中 */
    text-align: left;
    padding: 0 4px;
    gap: 18px;
  }
  .hp-contact-left h3 { text-align: left; }
  .hp-contact-row { justify-content: flex-start; align-items: center; }
  .hp-contact-row > div + div { align-items: flex-start; text-align: left; }
  .hp-contact-qr { margin-left: 0; margin-right: auto; }

  /* form 卡片本身的内部对齐保持原 PC 端行为 */
  .hp-contact-form { width: 100%; padding: 22px 18px; gap: 22px; }
  .hp-contact-form-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* 姓名 + 邮箱 ≤768 也强制单列，避免双列太挤 */
  .hp-contact-row-2 { grid-template-columns: 1fr !important; gap: 14px; }
  /* chip 长文本允许换行 */
  .hp-contact-chip span {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
    padding: 7px 14px;
  }
}

/* ============================================================
 * 极窄屏（≤480px）chart 进一步精简
 * ============================================================ */
@media (max-width: 480px) {
  .hp-codebase-canvas { height: 240px !important; }
  .hp-codebase-canvas svg { height: 240px !important; }
}

/* ============================================================
 * 手机端三次精修（≤768px）— codebase 左右更松、项目卡片更宽更矮
 * ============================================================ */
@media (max-width: 768px) {
  /* codebase + 折线图整体左右内边距加大 */
  .hp-codebase {
    padding: 24px 22px 36px !important;
  }
  /* 项目案例：取消"max-width: 100%-24px"额外约束 + 缩小容器 padding → 卡片更宽 */
  .hp-projects > .hp-container {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* 项目卡片：内部 padding 收紧 + 高度降低（PC 380 强撑被取消） */
  .hp-proj-card {
    min-height: 320px !important;
    padding: 44px 18px 22px !important;
  }
  .hp-proj-card-name {
    font-size: 1.45rem !important;
    min-height: auto !important;
  }
  .hp-proj-card-sub {
    font-size: 0.88rem !important;
    min-height: auto !important;
  }
  .hp-proj-card-body { gap: 14px !important; }
  .hp-proj-card-meta { gap: 14px !important; }
}

/* 极窄屏（≤480px）项目卡片再矮一档 */
@media (max-width: 480px) {
  .hp-proj-card {
    min-height: 280px !important;
    padding: 36px 16px 20px !important;
  }
}

/* ============================================================
 * 手机端四次精修（≤768px）— 折线图底部距离收紧 / 项目 CTA 靠右 / QR 隐文字
 * ============================================================ */
@media (max-width: 768px) {
  /* codebase 底部距离下个 section 太空 — 把 padding-bottom + margin-bottom 收紧 */
  .hp-codebase {
    padding: 24px 22px 8px !important;        /* 36 → 8，底部内边距大幅缩 */
    margin: 32px auto 0 !important;            /* 32 32 → 32 0，去掉底部 margin */
  }

  /* 项目卡片：CTA 按钮靠右 */
  .hp-proj-card-cta-wrap {
    align-self: flex-end !important;
  }

  /* 小程序 QR 在手机端只留二维码图，不要"微信扫码体验"文字 */
  .hp-proj-card-qr span { display: none !important; }
  .hp-proj-card-qr {
    /* 从右下角移到右上角"自营"badge 下方一点 */
    top: 56px !important;                       /* badge 在 top:16，自身 ~28 高 + 12 gap → 56 */
    right: 14px !important;
    bottom: auto !important;
    padding: 6px;
    border-radius: 8px;
  }
}