/* ==========================================================================
   AD-VC 广告创投基金 · 官网样式表
   品牌色取自 AD-VC 官方物料（广告创投资源 PDF）：
     识别红 #BD273B / 深红 #A72A39 / 辅蓝 #2A3991 / 强调橙 #F7941D / 点缀金 #C9A227
   结构：1 设计令牌 · 2 基础重置 · 3 版式 · 4 布局 · 5 页头页脚 · 6 组件 · 7 动效 · 8 响应式
   ========================================================================== */

/* ============================ 1. 设计令牌 ============================ */
:root {
  /* 品牌红 —— 主色 */
  --red-600: #bd273b;
  --red-700: #a72a39;
  --red-800: #8c1f2e;
  --red-900: #6f1824;
  --red-100: #f6e1e4;
  --red-050: #fbf0f1;

  /* 辅助蓝 —— 资本属性 */
  --navy-700: #2a3991;
  --navy-800: #1f2a6e;
  --navy-050: #eef0fa;

  /* 强调色 */
  --orange: #f7941d;
  --gold: #c9a227;
  --gold-soft: #e8d9a8;

  /* 中性色 */
  --ink-900: #16181d;
  --ink-800: #24272e;
  --ink-700: #34383f;
  --ink-500: #5c6270;
  --ink-400: #8b919d;
  --ink-300: #b9bec7;
  --line: #e6e8ec;
  --line-soft: #f0f1f4;
  --bg: #ffffff;
  --bg-soft: #f8f8f9;
  --bg-warm: #faf7f6;
  --bg-dark: #14161b;
  --bg-dark-2: #1c1f26;

  /* 字号 */
  --fs-display: clamp(2.125rem, 1.35rem + 3.1vw, 4rem);
  --fs-h1: clamp(1.875rem, 1.3rem + 2.3vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --fs-h3: clamp(1.175rem, 1.02rem + 0.62vw, 1.5rem);
  --fs-lead: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* 间距与容器 */
  --container: 1200px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --sec-py: clamp(3.5rem, 7vw, 6.5rem);
  /* 「紧凑块」（.section--tight）自身的上下留白。单点定义：首页首屏后那位
     紧跟的紧凑块要把上留白减半（见 .hero + .section--tight），用的是同一个值。 */
  --sec-py-tight: clamp(2.5rem, 5vw, 4rem);
  --gap: clamp(1rem, 2vw, 1.75rem);

  /* 圆角与阴影 */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(22, 24, 29, 0.05);
  --sh-2: 0 4px 16px rgba(22, 24, 29, 0.07);
  --sh-3: 0 14px 40px rgba(22, 24, 29, 0.11);
  --sh-red: 0 12px 32px rgba(189, 39, 59, 0.22);

  /* 字体 */
  --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* 缓冲曲线 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 客服气泡整体的上移量。**单点定义**：气泡位置 / 面板位置 / 面板高度上限 /
     页脚底部净空 四处都从这里取值 —— 这四处必须同步平移，改一处漏三处就出事
     （面板会盖住气泡、或面板顶出视口、或备案号被气泡压住）。
     2026-10-14 潘老师定：在原位置基础上再上移 75px。 */
  --kefu-lift: 75px;
}

/* ============================ 2. 基础重置 ============================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-cn);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background-color: transparent; }

a { color: var(--red-600); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--red-800); }

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

button { font-family: inherit; }

/* 键盘可见焦点：绝不移除 outline，仅做美化 */
:focus-visible {
  outline: 3px solid var(--red-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 跳转链接：用位移移出视口，而不是 left:-9999px。
   负方向位移不会撑出滚动区域，键盘用户聚焦时还能得到平滑滑入效果。 */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--red-600);
  color: #fff;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 700;
  transform: translateY(-130%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================ 3. 版式 ============================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  color: var(--red-600);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--red-600);
}

.section-title {
  margin: 0 0 1rem;
  font-size: var(--fs-h2);
  line-height: 1.24;
}

/* 导语与下方正文等宽（2026-09-24 潘老师要求，与首页首屏导语同一处理）。
   从前这里限了一道 max-width: 62ch（1440px 下实测 690.8px），而容器内容宽是 1120px，
   导语比下方内容短 429px——宽屏上文字缩在左边，和下方卡片网格的右边界对不齐。
   去掉限制后宽度由 `.container` 决定，天然与正文左右对齐；
   在更窄的父容器里（如联系页表单列）则跟着父容器走，同样等宽。
   ⚠️ 这是纯视觉量：把 max-width 加回来页面照样能看、构建照样成功，
   没有任何机制会报警——守它的是 tools/check_lead_width.js。 */
.section-lead {
  color: var(--ink-500);
  font-size: var(--fs-lead);
  line-height: 1.8;
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.text-red { color: var(--red-600); }

/* ============================ 4. 布局 ============================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-py); }
.section--soft { background: var(--bg-soft); }
.section--warm { background: var(--bg-warm); }
.section--tight { padding-block: var(--sec-py-tight); }

/* 首页：首屏底 → 紧随其后的紧凑块（数据卡区）之间的留白减半。
   这块本来带一整条 --sec-py-tight（1440px 下 64px、1070px 下 53.5px），
   潘老师 2026-09-24 连提两次「间距太大」，要求缩一半 → 32px / 26.75px
   （窄屏 40px → 20px，正好与内页 .page-hero + .section 的 20px 齐平）。
   红白交界本身就是分界，不需要靠留白分隔。 */
.hero + .section--tight { padding-top: calc(var(--sec-py-tight) / 2); }

/* 相邻两块在语义上属于同一段内容时用这两个修饰类收口。
   默认每个 .section 上下各带一条 --sec-py，两块挨在一起就是两条叠加
   （1440px 下约 200px），中间会空出一大片。收口后只留一段呼吸。 */
.section--tight-end { padding-bottom: 20px; }
.section--tight-start { padding-top: 0; }

/* 内容区 → 红色 CTA 版块之间的收口。
   上一块用 --tight-end 收成 20px 灰底尾巴；这一块若再用 --tight-start（=0），
   红卡会**直接贴住灰底**（实测白底留白 0px），太挤。
   所以 CTA 这侧留 20px 白，整段从约 220px 收到约 40px。
   用在哪：insights / cases / team / index 四个页面末尾的 .callout 版块。 */
.section--tight-cta { padding-top: 20px; }

/* page-hero 之后紧跟的第一块同理：hero 自带下内边距（1440px 下约 72px），
   这一块再带一条 --sec-py（约 104px），红底与首个内容块之间会空出约 176px。
   红白交界本身就是分界，白底这侧收到 20px。
   八个内页（简介/团队/媒体/动态/案例/观点/FAQ/联系）都是这个结构。 */
.page-hero + .section { padding-top: 20px; }

.section--dark {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.76);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .section-lead { color: rgba(255, 255, 255, 0.66); }
.section--dark a { color: var(--red-100); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}

/* ============================ 5. 页头 ============================ */
/* 毛玻璃底衬放在伪元素上。
   注意：backdrop-filter 若直接加在 .site-header 上，会让页头成为 position:fixed
   子元素的包含块，移动端抽屉导航的定位就会跟着页头跑偏（且横向滑入会撑出滚动条）。
   放在 ::before 上既能保留磨砂质感，又不会污染定位上下文。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-header.is-stuck {
  box-shadow: var(--sh-2);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  color: var(--ink-900);
}
.brand:hover { color: var(--ink-900); }

/* 页头品牌标识：整张横向 logo（红方块 + AD-VC + 广告创投基金），文字已含在图中。
   600×179 是文件真实像素（HTML 里的 width/height 必须与之一致），
   这里只用宽度约束显示大小，高度 height:auto 按同比例自动得出（≈48px）——
   固定宽、高自适应，任何情况下都不会被拉伸变形。改宽度即改全站页头 logo 大小。
   2026-09-24 潘老师要求「缩小为原来的 80%」：200px → 160px（高度 59.7 → 47.7px）。
   页头总高不受影响：.header-inner 的 min-height: 72px 才是撑高的那一个。 */
.brand-logo { width: 160px; height: auto; flex-shrink: 0; }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  position: relative;
  padding: 0.55rem 0.8rem;
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav a:hover { color: var(--red-600); background: var(--red-050); }
.nav a[aria-current="page"] { color: var(--red-600); font-weight: 700; }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.2rem;
  height: 2px;
  background: var(--red-600);
}

.nav-cta {
  margin-left: 0.5rem;
  padding: 0.62rem 1.15rem !important;
  background: var(--red-600);
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--r-sm);
}
.nav-cta:hover { background: var(--red-800); }
.nav-cta[aria-current="page"]::after { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--ink-800);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: relative; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* ============================ 6. 首页首屏 ============================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(70vh, 580px);
  /* 首屏高度与内容位置（2026-09-24 两轮调整的结果，别单独改其中一条）：
     第一轮把内容上提（对称 112px → 上窄下宽），代价是下侧放宽到 207px，
     1440×900 上「按钮底 → 首屏底」实测 254.7px，是上沿 128.7px 的两倍，
     首屏整体也偏高（760px）。第二轮按潘老师要求**两头一起收**：
       · 首屏从 min(88vh,760px) 降到 min(70vh,580px) → 背景图不再拉那么长；
       · 下侧内边距 7rem–14rem 收到 6rem–7.5rem → 按钮离底边约 108px（原 254.7px）；
       · 上侧同步收到 5.5rem–6rem → 上沿约 88px（原 128.7px），内容仍偏上
         （下侧留白比上侧多约 20px），且仍比收缩前更靠上。
     1440×900 实测：首屏 572.5px、上沿 88px、按钮到首屏底 108px。
     上侧保底 5.5rem(88px) 必须大于页头高度（73px），否则内容被 sticky 页头压住；
     下侧保底 6rem 是给「min-height 失效、hero 由内容撑高」的矮视口留安全边。
     ⚠️ 改这三个值就等于改首屏高度与内容垂直位置——守它的是 tools/check_home_hero.js
        （它同时钉住「上沿留白」「按钮到首屏底的留白」与「首屏总高上限」三个量）。 */
  padding-top: clamp(5.5rem, 9vh, 6rem);
  padding-bottom: clamp(6rem, 12vh, 7.5rem);
  overflow: hidden;
  background: var(--red-900);
  color: #fff;
  isolation: isolate;
}
/* 底图组：每条轮播一张图，叠在同一位置交叉淡入。
   （轮播化之前是单张 .hero__bg 直接挂在 .hero 上，现在多了一层容器。） */
.hero__bgs {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
/* 0.5 是轮播化之前那张固定底图的透明度：底图是被红色渐变压在下面做氛围的，不是主角 */
.hero__bg.is-active { opacity: 0.5; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(189, 39, 59, 0.92) 0%, rgba(140, 31, 46, 0.86) 38%, rgba(20, 22, 27, 0.94) 100%),
    linear-gradient(180deg, rgba(20, 22, 27, 0.35), rgba(20, 22, 27, 0.75));
}
/* 首屏内容区不再整体限宽：段落要与下方正文容器左右对齐，而原先的 46rem 会把段落
   卡在 736px（右边缘比正文缩进 320px）。宽度改由标题与段落各自约束：
   标题限 46rem 避免大字号排成长行，段落则撑满容器内容宽。
   position: relative 是给圆点指示器当定位基准用的（见下面 .hero__dots）。 */
.hero__inner { position: relative; max-width: none; }

/* 轮播文字区：所有条目用同一个 grid 单元格叠放，容器高度取「最高的那一条」。
   所以切轮播时下方按钮不会上下跳——这就是「按钮位置不变」在版式上的实现，
   ⚠️ 不要改成 position:absolute 叠放（那样容器高度会塌成 0，按钮会跳上去）。 */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  /* 与下方按钮之间的间距。**不能靠 .hero__sub 的 margin-bottom**：
     导语是条目里的最后一个元素，会被全局的 `p:last-child { margin-bottom: 0 }`
     （见本文件「基础排版」一节）抹掉——那段留白就凭空消失，首屏内容矮 32px，
     按钮与首屏底的距离跟着变（实测差 16px，check_home_hero.js 会直接报出来）。
     所以间距由条目自己的下内边距承担：无论这条有没有导语，与按钮的距离都一致。 */
  padding-bottom: 2rem;
  /* flow-root：让条目内元素的上下外边距留在条目内，不「穿过」边界塌陷出去。
     grid 轨道量的是条目自身高度，塌陷出去的部分就不算数了。 */
  display: flow-root;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0.6s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 主标题：轮播里第一张用 <h1>、其余用 <p>（一个页面只该有一个 h1），
   两者共用这套样式，视觉上完全一致。 */
.hero h1, .hero__title {
  max-width: 46rem;
  margin-bottom: 1.15rem;
  color: #fff;
  font-size: var(--fs-display);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.hero h1 em, .hero__title em {
  font-style: normal;
  color: var(--gold-soft);
  background: linear-gradient(180deg, transparent 62%, rgba(201, 162, 39, 0.34) 62%);
}
/* 单条轮播可选的排版，由 content/hero.json 的 titleInline / titleBold 打开，
   只作用于勾了的那一条（其余条目不会出现这两个类名）：
   is-inline —— 主标与金色副标并成一行。两段之间刻意不加空格（见 tools/build.js，
   为的是让 textContent 仍等于 title+titleEm），所以在这里补一点视觉间距，
   免得「广告你打风险我扛」连成一串。
   is-bold   —— 这一条的主标加粗：第一屏是 <h1>（本就 700），其余条目是 <p>，
   继承正文的 400，所以加粗这个开关对它们才有效。 */
.hero__title.is-inline em { margin-left: 0.3em; }
.hero__title.is-bold { font-weight: 800; }
.hero__sub {
  /* 不设 max-width：宽度就是正文容器的内容宽，与下方各版块左右严格对齐。
     （从前这里限 40rem / 640px，右边缘比正文短一截。） */
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-lead);
  line-height: 1.8;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hero__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* 圆点指示器：只有多条轮播时才会由构建脚本输出（一条时按着也没反应）。
   ⚠️ **必须脱流（absolute）**，不能让它留在正常流里。
   它一旦在流里，就是按钮之后又一行内容：首屏会从 580px 顶到 611px，
   而「按钮底 → 首屏底」同时从 108px 变成 146px——那正是潘老师 2026-09-24 两轮
   要求压下去的两个量（首屏不虚高、按钮离底边不远）。锚在 .hero__inner 的底边
   （= 按钮底边）往下挪一点，落进「按钮下方本来就空着的那段下内边距」里，
   于是**首屏高度、内容位置、按钮位置三样都分毫不动**。
   守它的有两个测试：check_home_hero.js（真实三条数据下首屏 ≤600px、按钮到底 ≤125px）
   与 check_hero_carousel.js（把圆点藏起来前后比首屏高度与按钮 y，必须完全一致）。 */
.hero__dots {
  --hero-dots-gap: 3.25rem; /* 圆点底边落在按钮下方多少 */
  position: absolute;
  left: 0; /* 与正文内容左边缘对齐 */
  bottom: calc(-1 * var(--hero-dots-gap));
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.62); }
.hero__dot.is-active { width: 26px; background: var(--gold); }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 首屏轮播的动效同样尊重「减少动态效果」：
   关掉过渡与位移，但仍保留切换本身（内容照常换，只是不animate）。 */
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__slide, .hero__dot { transition: none; }
  .hero__slide { transform: none; }
}

/* ============================ 7. 按钮 ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red-600); color: #fff; box-shadow: var(--sh-red); }
.btn--primary:hover { background: var(--red-800); color: #fff; box-shadow: 0 16px 38px rgba(140, 31, 46, 0.3); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.42); color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn--ghost:hover { background: #fff; color: var(--red-700); border-color: #fff; }
.btn--outline { border-color: var(--line); color: var(--ink-800); background: #fff; }
.btn--outline:hover { border-color: var(--red-600); color: var(--red-600); }
/* 「强引导」轮廓按钮 —— 用于区块末尾唯一的跳转动作。
   默认态就把描边做实：2px 品牌红 + 淡红投影（`--line` 的 1px 浅灰边几乎看不见，
   访客认不出这是能点的东西）；hover / focus 反白填充成实心红。
   ⚠️ 只给需要"一眼看出可点击"的位置用，别替换掉全部 .btn--outline。 */
.btn--cta { border: 2px solid var(--red-600); color: var(--ink-800); background: #fff; box-shadow: 0 2px 10px rgba(189, 39, 59, 0.13); }
.btn--cta:hover, .btn--cta:focus-visible { background: var(--red-600); color: #fff; border-color: var(--red-600); box-shadow: var(--sh-red); }
.btn--sm { padding: 0.6rem 1.2rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.link-more::after { content: "→"; transition: transform 0.2s var(--ease); }
.link-more:hover::after { transform: translateX(4px); }

/* ============================ 8. 数据条 / 数据卡片 ============================ */
.databar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  background: var(--red-700);
  border-radius: var(--r-md);
  overflow: hidden;
}
.databar__item {
  padding: clamp(1.15rem, 2.6vw, 1.9rem) 1rem;
  text-align: center;
  background: var(--red-700);
}
.databar__num {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}
.databar__num sup {
  font-size: 0.52em;
  font-weight: 700;
  vertical-align: super;
}
.databar__label {
  display: block;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
}

.stat {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.stat:hover { border-color: var(--red-100); box-shadow: var(--sh-2); transform: translateY(-3px); }
.stat__num {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--red-600);
  letter-spacing: -0.02em;
}
.stat__num sup { font-size: 0.5em; vertical-align: super; }
.stat__label {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink-900);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.stat__note {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-400);
  font-size: var(--fs-xs);
}

/* ============================ 9. 卡片 ============================ */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--red-100); box-shadow: var(--sh-3); transform: translateY(-4px); }
.card h3 { margin-bottom: 0.6rem; font-size: var(--fs-h3); }
.card p { color: var(--ink-500); font-size: var(--fs-sm); }
.card__index {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--font-num);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--red-600);
  letter-spacing: 0.12em;
}
.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
  background: var(--red-050);
  color: var(--red-600);
}
.card__icon svg { width: 22px; height: 22px; }
.card--dark {
  background: var(--bg-dark-2);
  border-color: rgba(255, 255, 255, 0.09);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: rgba(255, 255, 255, 0.66); }
.card--dark .card__index { color: var(--gold-soft); }
.card--dark .card__icon { background: rgba(255, 255, 255, 0.08); color: var(--gold-soft); }

/* 可点击的整卡链接 */
a.card { color: inherit; }
a.card:hover { color: inherit; }

/* ============================ 10. 媒体资源 ============================ */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap);
}
.media-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.media-card:hover { border-color: var(--red-100); box-shadow: var(--sh-3); transform: translateY(-4px); }
.media-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
}
.media-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.media-card:hover .media-card__media img { transform: scale(1.04); }
.media-card__tag {
  position: absolute;
  left: 0.85rem; top: 0.85rem;
  padding: 0.28rem 0.7rem;
  background: rgba(20, 22, 27, 0.76);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
}
.media-card__body { padding: 1.35rem 1.5rem 1.5rem; flex: 1; }
.media-card__body h3 { margin-bottom: 0.35rem; font-size: 1.125rem; }
.media-card__body > p { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: 1rem; }
.media-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.media-card__stat { display: flex; align-items: baseline; gap: 0.35rem; }
.media-card__stat b {
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--red-600);
  letter-spacing: -0.01em;
}
.media-card__stat span { color: var(--ink-400); font-size: var(--fs-xs); }

/* ============================ 11. 合作品牌墙 ============================ */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logo-wall__item {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 1.1rem 1.3rem;
  background: #fff;
  transition: background 0.25s var(--ease);
}
.logo-wall__item:hover { background: var(--bg-warm); }
.logo-wall__item img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.logo-wall__item:hover img { filter: none; opacity: 1; }

/* ============================ 12. 时间轴 ============================ */
.timeline { position: relative; margin: 0; padding: 0 0 0 1.75rem; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--red-600), var(--red-100));
}
.timeline li { position: relative; margin-bottom: 2rem; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.75rem; top: 0.55rem;
  width: 12px; height: 12px;
  border: 2px solid var(--red-600);
  border-radius: 50%;
  background: #fff;
}
.timeline__year {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-num);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--red-600);
  letter-spacing: 0.02em;
}
.timeline__title { margin: 0 0 0.3rem; font-size: 1.0625rem; font-weight: 700; color: var(--ink-900); }
.timeline p { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); }

/* ============================ 13. 流程模型 ============================ */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  counter-reset: flow;
}
.flow__step {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.flow__step::before {
  counter-increment: flow;
  content: "0" counter(flow);
  position: absolute;
  right: 1.1rem; top: 0.5rem;
  font-family: var(--font-num);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--line-soft);
}
.flow__step h3 { position: relative; margin-bottom: 0.55rem; font-size: 1.125rem; }
.flow__step p { position: relative; margin: 0; color: var(--ink-500); font-size: var(--fs-sm); }
.flow__step--accent { border-color: var(--red-600); }
.flow__step--accent::before { color: var(--red-100); }

.flow-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding: 1.15rem 1.35rem;
  background: var(--red-050);
  border-left: 3px solid var(--red-600);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.flow-note strong { color: var(--red-700); }

/* ============================ 15. 案例卡片 ============================ */
.case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.case-card:hover { border-color: var(--red-100); box-shadow: var(--sh-3); transform: translateY(-4px); }
.case-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.6rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.case-card__logo {
  display: grid;
  place-items: center;
  min-height: 54px;
  flex: 1;
}
.case-card__logo img { max-height: 46px; width: auto; object-fit: contain; }
.case-card__sector {
  flex-shrink: 0;
  padding: 0.25rem 0.65rem;
  background: var(--red-050);
  color: var(--red-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.case-card__body { padding: 1.35rem 1.6rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.case-card__body h3 { margin-bottom: 0.5rem; font-size: 1.1875rem; }
.case-card__body > p { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: 1.15rem; }
.case-card__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
}
.case-card__metric b {
  display: block;
  font-family: var(--font-num);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--red-600);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.case-card__metric span { display: block; margin-top: 0.2rem; color: var(--ink-400); font-size: var(--fs-xs); }

/* 投前 / 投后 对比 */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.compare__col { padding: clamp(1.35rem, 2.8vw, 2rem); border-radius: var(--r-lg); }
.compare__col--before { background: var(--bg-soft); border: 1px solid var(--line); }
.compare__col--after { background: var(--red-700); color: rgba(255, 255, 255, 0.9); }
.compare__col--after h3, .compare__col--after h4 { color: #fff; }
.compare__label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: #fff;
  letter-spacing: 0.08em;
}
.compare__col--after .compare__label { background: rgba(255, 255, 255, 0.18); }
.compare ul { margin: 0; padding-left: 1.15rem; }
.compare li { margin-bottom: 0.55rem; font-size: var(--fs-sm); }
.compare li:last-child { margin-bottom: 0; }
.compare li b { color: var(--red-600); }
.compare__col--after li b { color: var(--gold-soft); }

/* ============================ 16. 筛选 Tab ============================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.filter {
  padding: 0.55rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.filter:hover { border-color: var(--red-600); color: var(--red-600); }
.filter.is-active, .filter[aria-pressed="true"] {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #fff;
  font-weight: 700;
}

.is-hidden { display: none !important; }

/* 空结果提示 */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-400);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* ============================ 17. 列表条目 ============================ */
.post-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.post {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 2.6vw, 1.85rem) clamp(1.25rem, 2.6vw, 2rem);
  background: #fff;
  color: inherit;
  transition: background 0.2s var(--ease);
}
.post:hover { background: var(--bg-warm); color: inherit; }
.post__date {
  font-family: var(--font-num);
  color: var(--ink-400);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.post__cat {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--red-100);
  border-radius: var(--r-sm);
  color: var(--red-700);
  font-size: 0.75rem;
  font-weight: 700;
}
.post h3 { margin-bottom: 0.35rem; font-size: 1.0625rem; }
.post p { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); }
.post__meta { display: flex; align-items: center; gap: 1rem; }
.post__read { color: var(--ink-400); font-size: var(--fs-xs); white-space: nowrap; }

/* ============================ 18. 文章正文 ============================ */
.prose { max-width: 46rem; margin-inline: auto; }
.prose h2 { margin-top: 2.5rem; font-size: var(--fs-h3); }
.prose h3 { margin-top: 2rem; font-size: 1.0625rem; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.9; color: var(--ink-700); }
.prose ul { padding-left: 1.35rem; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: 1.15rem 1.5rem;
  background: var(--red-050);
  border-left: 3px solid var(--red-600);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-700);
  font-style: normal;
}
.prose blockquote p:last-child { margin-bottom: 0; }
/* 正文里直接插入的图片（后台「插入图片」）。img 上的 width/height 是后台按真实尺寸写的，
   用来让浏览器提前留出位置；这两条把它覆盖成自适应，避免大图把正文撑出横向滚动条。
   必须放在 .prose figure img 之前：图注图（figure）的 width:100% 特异性更高，不受影响。 */
.prose img { display: block; max-width: 100%; height: auto; margin: 1.75rem auto; border-radius: var(--r-md); }
.prose figure { margin: 2rem 0; }
.prose figure img { width: 100%; border-radius: var(--r-md); }
.prose figcaption { margin-top: 0.6rem; color: var(--ink-400); font-size: var(--fs-xs); text-align: center; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: var(--fs-sm); }
.prose th, .prose td { padding: 0.75rem 1rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-soft); font-weight: 700; color: var(--ink-900); }

/* ============================ 19. FAQ 手风琴 ============================ */
.faq { max-width: 52rem; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.4rem 0;
  background: none;
  border: 0;
  color: var(--ink-900);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}
.faq__q:hover { color: var(--red-600); }
.faq__q span:first-child { flex: 1; }
.faq__icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.35rem; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--red-600);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.4rem; color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.85; }

/* ============================ 20. 表单 ============================ */
.form {
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.15rem; }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--ink-900); font-size: var(--fs-sm); font-weight: 700; }
.field .req { color: var(--red-600); }
.field .hint { color: var(--ink-400); font-size: var(--fs-xs); font-weight: 400; }
/* ⚠️ 控件描边**不能用 `--line`**（#e6e8ec）。那是卡片与分割线用的极浅灰，和表单卡片
   自身的描边同色，输入框在白卡片上几乎看不出边界 —— 潘老师 2026-10-12 反馈「边线太淡」。
   改用 `--ink-400`：对白底对比度 3.17:1，刚好过 WCAG 2.1 非文本对比度 3:1 的门槛
   （备选实测：#e6e8ec 1.23:1 ／ #b9bec7 1.87:1 ／ #5c6270 6.11:1，后者描边抢戏）。
   改深浅只需动下面这一处；四档候选与改前改后对照见 screenshots/contact-field-border-*.png。
   ⚠️ 这条**没有护栏兜底**（样式类断言只覆盖 logo/导航），改动后必须人眼看图核对。 */
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--ink-400);
  border-radius: var(--r-sm);
  color: var(--ink-900);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
/* 悬停再深一档，与默认态、聚焦态形成「浅灰 → 深灰 → 品牌红」三级反馈 */
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px rgba(189, 39, 59, 0.12);
  outline: none;
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--red-600); }
.field__error { color: var(--red-700); font-size: var(--fs-xs); min-height: 1.1em; }

.captcha { display: flex; align-items: center; gap: 0.75rem; }
.captcha__q {
  flex-shrink: 0;
  padding: 0.7rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-num);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: 0.06em;
  user-select: none;
}
.captcha input { flex: 1; }

.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.75rem 1.25rem;
  background: var(--bg-soft);
  border: 1px dashed var(--ink-400);
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--red-600); background: var(--red-050); }
.file-drop svg { width: 26px; height: 26px; color: var(--red-600); }
.file-drop strong { color: var(--ink-900); font-size: var(--fs-sm); }
.file-drop span { color: var(--ink-400); font-size: var(--fs-xs); }
.file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-name { margin-top: 0.5rem; color: var(--red-700); font-size: var(--fs-xs); font-weight: 700; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-soft);
}
.form__foot .btn { min-width: 190px; }
.form__status { font-size: var(--fs-sm); }
.form__status[data-state="ok"] { color: #1a7f4b; }
.form__status[data-state="err"] { color: var(--red-700); }

/* ============================ 21. 页脚 ============================ */
.site-footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-sm);
}
.site-footer h2, .site-footer h3 { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
/* 页脚品牌标识：与页头同一张 logo 的**深色底版**（品牌名已含在图中，不再另写文字）。
   480×143 是文件真实像素（HTML 里的 width/height 必须与之一致），这里只用宽度约束
   显示大小，高度按同比例自动算出（160px 宽 → ≈48px 高）——固定宽、高自适应，
   任何情况下都不会被拉伸变形。改宽度即改全站页脚 logo 大小。
   ⚠️ 页脚底色是深色，只能用反白版；换回页头那张会让「广告创投基金」整行黑字消失。
   守它的是 tools/check_footer_logo.js。 */
.footer-brand { margin-bottom: 1rem; }
.footer-logo { width: 160px; height: auto; }
.footer-col h3 { margin-bottom: 0.9rem; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: rgba(255, 255, 255, 0.66); font-size: var(--fs-sm); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--fs-xs);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.55); }
/* ⚠️ 页脚底栏的链接（隐私政策，将来备案号也会是链接）必须有可见的交互反馈：
   全局 reset 去掉了 <a> 的默认下划线，光有颜色差在深色底上几乎看不出来是链接 ——
   2026-10-14 加隐私政策入口时发现的。hover 加下划线即可，不用改常态样式（避免底栏变花）。 */
.footer-bottom a:hover, .footer-bottom a:focus-visible {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

/* 版权行不许在词中间断开：
   版权方是公司全称（20 个汉字），13px 下整行要 373px，而 390px 手机的可用宽度只有 354px
   → 这行**注定换两行**。CJK 是逐字断行，各段不锁的话会断成
   「…有限公司 · 版权 / 所有」或「…有限公 / 司 · 版权所有」，把词劈成两半。
   按「辰月玫瑰（深圳）｜文化科技产业发展有限公司｜· 版权所有」分段锁住后，
   断点固定落在括号之后（公司名里天然的地址性后缀边界），两行都读得完整。
   ⚠️ 别改成给整行加 nowrap —— 373px > 354px 会直接溢出，把页面顶出横向滚动条。 */
.footer-bottom .nb { white-space: nowrap; }

/* ============================ 22. 内页头图 ============================ */
.page-hero {
  position: relative;
  /* 上下内边距。2026-10-14 潘老师指出「内页顶部那段空白太高，统一调低」——
     原本 clamp(2.75rem, 6vw, 4.5rem)（宽屏 72px，也就是面包屑上方那条空白的高度），
     现改为 clamp(1.5rem, 3vw, 2.75rem)（宽屏 44px，减掉约 39%）。
     ⚠️ 一个值管全站内页：这个类由 tools/build.js 生成到所有内页（观点/案例/动态/FAQ 等），
        改这里就是「统一调低」，不要逐页去改。
     ⚠️ 窄屏会同时受这里和 .page-hero + .section 的 20px 影响，改完要看一眼手机视图。 */
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--red-800);
  color: #fff;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -40%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11), transparent 68%);
  pointer-events: none;
}
.page-hero h1 { margin-bottom: 0.75rem; color: #fff; font-size: var(--fs-h1); }
/* 导语与下方内容等宽。
   标题条和内容区用的是同一个 .container，宽度本来就一样；
   从前这里多限了一道 max-width: 52ch（约 600px），宽屏上导语比下方正文短一截，
   红块里就看着"文字缩在一角"。去掉限制即与下方内容左右对齐。 */
.page-hero p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: var(--fs-lead); }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: rgba(255, 255, 255, 0.32); }
.breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.breadcrumb a:hover { color: #fff; }

/* ============================ 23. 其他组件 ============================ */
.pill {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  background: var(--red-050);
  color: var(--red-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
}
.pill--navy { background: var(--navy-050); color: var(--navy-700); }
.pill--gold { background: #faf4e2; color: #8a6d10; }

.callout {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(135deg, var(--red-700), var(--red-900));
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, 0.84);
  text-align: center;
}
.callout h2 { color: #fff; }
.callout p { max-width: 46ch; margin-inline: auto; }
.callout .btn { margin-top: 1.5rem; }

.info-list { margin: 0; padding: 0; list-style: none; }
.info-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.info-list li:last-child { border-bottom: 0; }
.info-list dt, .info-list b { color: var(--ink-400); font-weight: 500; }
.info-list span { color: var(--ink-900); }

.tbd {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: #fdf6e3;
  border: 1px dashed var(--gold);
  border-radius: var(--r-sm);
  color: #8a6d10;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.avatar-ph {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(189, 39, 59, 0.12), transparent 60%),
    linear-gradient(160deg, #f4f5f7, #e6e8ec);
  border-radius: var(--r-md);
  color: var(--ink-300);
  font-family: var(--font-num);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.member { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.35rem, 3vw, 2.25rem); }
.member .avatar-ph { border-radius: var(--r-lg); }

/* 团队成员照片：固定的 200×265 框 + object-fit: contain。
   框固定是为了三位成员的照片上下对齐；contain 保证**整张照片按比例缩进框内、绝不裁切**——
   照片比例与框不一致时（例如 20:27）两侧留出极窄的空白，一致时正好填满。
   ⚠️ 不要在这里写 aspect-ratio：它会覆盖图片自身的固有比例，让「框」的比例与照片脱钩
   （窄屏 height:auto 时会把照片按错误的比例算高）。比例一律以文件为准。
   ⚠️ 改成 cover（裁切）或删掉 object-fit（拉伸变形）都算把要求弄丢——
   两者都不会报错，只有人眼能看出来，守它的是 tools/check_team_photo.js。 */
.member__photo {
  display: block;
  width: 200px;
  height: 265px;
  object-fit: contain;
  border-radius: var(--r-lg);
}
.member__role { margin-bottom: 0.5rem; color: var(--red-600); font-size: var(--fs-sm); font-weight: 700; }
.member__bio { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.85; }
.member__quote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--red-100);
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-style: normal;
}
.member__facts { margin: 1rem 0 0; padding-left: 1.15rem; color: var(--ink-500); font-size: var(--fs-sm); }

/* 数据面板图（AD星球数据中台） */
.panel-shot {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.panel-shot img { width: 100%; }

/* ============================ 24. 动效 ============================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================ 25. 响应式 ============================ */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}

/* 导航共 9 项（含 CTA），961–1120px 区间横向空间最紧：
   收紧内边距与字号，避免导航被挤压换行或把页头撑出横向滚动条。
   ≤960px 会切换为抽屉导航，故此处只管桌面档。 */
@media (max-width: 1120px) and (min-width: 961px) {
  .header-inner { gap: 0.75rem; }
  .nav { gap: 0.1rem; }
  .nav a { padding-inline: 0.5rem; font-size: 0.8125rem; }
  .nav a[aria-current="page"]::after { left: 0.5rem; right: 0.5rem; }
  .nav-cta { margin-left: 0.25rem; padding-inline: 0.85rem !important; }
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }

  /* 移动端抽屉导航：淡入 + 轻微上移。
     刻意不用 translateX(100%) 横向滑入——那会让关闭状态的抽屉停在视口右侧，
     把文档撑宽一倍（移动端出现横向滚动条）。 */
  .nav {
    position: fixed;
    inset: 72px 0 0;
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 1.5rem var(--gutter) 3rem;
    background: #fff;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(22, 24, 29, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
      visibility 0.24s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a {
    padding: 0.95rem 1rem;
    font-size: 1.0625rem;
    border-radius: var(--r-md);
  }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { background: var(--red-050); }
  .nav-cta { margin: 0.75rem 0 0; text-align: center; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .member { grid-template-columns: 1fr; }
  .member .avatar-ph { max-width: 190px; }
  /* 单列时照片跟着占位块一起收窄；height: auto 走图片固有比例，收窄后仍不变形 */
  .member .member__photo { max-width: 190px; height: auto; }
  .post { grid-template-columns: 1fr; gap: 0.75rem; }
  .post__meta { justify-content: flex-start; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .info-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  /* 手机上 hero 由内容撑高（min-height: auto），此时不对称内边距会变成
     「下面白一大块」而不是「整体上移」——恢复上下对称（= 原来的 4rem）。 */
  .hero { min-height: auto; padding-block: 4rem; }
  /* 下内边距收到 4rem(64px) 后，圆点离底边只剩 28px，够用但不宽裕：
     把「圆点到按钮」的距离跟着收到 2.25rem，圆点下方仍留 20px 以上。 */
  .hero__dots { --hero-dots-gap: 2.25rem; }
  .case-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__foot .btn { width: 100%; min-width: 0; }
}

/* ============================ 26. 智能客服入口 ============================ */
/* 全站悬浮的「在线客服」气泡 + 展开面板（面板里 iframe 嵌的是独立域名上的客服应用）。
   气泡固定右下角；面板固定右下角浮在上面。
   z-index 取值理由：站内已有的固定层是 页头 100 / 移动端抽屉导航 90 / 跳转链接 200。
   桌面档取 120 —— 高于页头与抽屉，低于跳转链接（跳转链接必须永远能被键盘拿到）。
   ⚠️ 移动端要反过来压到 80：抽屉导航是全屏的，客服气泡若浮在它上面会像"关不掉的浮标"。 */
.kefu-entry { position: relative; }

/* 气泡本体 = 一个圆形按钮，里面是潘老师给的客服图标。
   图标自带白色圆底（内容正好内切画布），所以按钮底色也用白色，
   两者衔接处看不出接缝，整个圆由**投影**来定义边界 —— 页头页脚无论深浅都能看清。
   ⚠️ 别给按钮加 border：图的内切圆和外框之间没有余量，1px 描边会把白边切掉一圈，
   圆看着就"缺了一个角"。要边界感就用 box-shadow。
   ⚠️ 尺寸按潘老师 2026-10-13 的定稿：高宽 **80px**（手机 68px）。
   改尺寸必须同时改下面 .site-footer 的 padding-bottom —— 有个几何护栏盯着（见那一段）。
   ⚠️ 位置不写死：由 --kefu-lift 统一上移。只改这里的 bottom 会让面板盖住气泡。 */
.kefu-entry__btn {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--kefu-lift));
  z-index: 120;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(22, 24, 29, 0.22), 0 2px 6px rgba(22, 24, 29, 0.12);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.kefu-entry__btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(22, 24, 29, 0.26), 0 3px 8px rgba(22, 24, 29, 0.14);
}
/* 展开态：轻轻按下去一点，给一个"当前就是它"的反馈 */
.kefu-entry__btn.is-open {
  transform: scale(0.96);
  box-shadow: 0 3px 10px rgba(22, 24, 29, 0.2);
}
.kefu-entry__icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.kefu-entry__panel {
  position: fixed;
  right: 1.25rem;
  /* 气泡 80px + 下边距 20px + 8px 缝；跟着气泡一起上移，否则底边会压到气泡身上。 */
  bottom: calc(6.75rem + var(--kefu-lift));
  z-index: 120;
  width: min(400px, calc(100vw - 2.5rem));
  /* ⚠️ 底边上移后高度上限必须同步收紧，否则面板顶部会顶出视口。
     原口径 9rem(144px) = 108px 底边 + 36px 顶部余量；再减掉 lift，顶部余量保持 36px。 */
  height: min(620px, calc(100vh - 9rem - var(--kefu-lift)));
  overflow: hidden;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(22, 24, 29, 0.24);
}
/* ⚠️ 必须显式写这条：本规则里若给面板设了 display，就会盖掉浏览器默认的
   [hidden]{display:none}，于是"关掉的"面板仍以透明大块横在页面上、挡住点击。
   客服对话页 2026-10-13 正是这么栽过一次（转人工弹层拦死了发送按钮）。 */
.kefu-entry__panel[hidden] { display: none !important; }

.kefu-entry__frame, .kefu-entry__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.kefu-entry__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-500);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.kefu-entry__close:hover { background: #fff; color: var(--ink-900); }

/* 给悬浮气泡留出底部净空。
   为什么必须留：气泡是 fixed 定位，滚到页面最底时它就停在视口右下角，
   而页脚最后一行（备案号）正好也在右下 —— 1024px 窗口实测被直接压住。
   压不压得到还**取决于窗口高度**（窗口矮一点就压上了），属"看着没事、某天就出事"的类型，
   所以不靠调位置躲，直接留出一条净空：只在页面最底部出现一块深色空白，
   气泡再也不会浮在文字上。

   ⚠️ 这个值要跟着气泡高度与位置上移量重算：气泡占 [下边距 20px + lift, 下边距 + lift + 高度]，
   页脚最后一行的底边必须高于气泡顶边。气泡 80px 时：20 + 80 = 100px，再加 20px 呼吸
   → 120px = 7.5rem；气泡上移后这里必须跟着加同样的量（否则备案号被气泡压住）。
   把气泡改大或挪位置，这里必须一起改 —— tools/check_kefu_entry.js 会按三档视口
   量**几何相交**，漏改就红（42px 胶囊 → 60px → 80px 已经改过两次了）。 */
.site-footer { padding-bottom: calc(7.5rem + var(--kefu-lift)); }

@media (max-width: 960px) {
  /* 抽屉导航展开时（z-index 90）要盖住客服按钮，否则按钮浮在抽屉上像关不掉的浮标 */
  .kefu-entry__btn, .kefu-entry__panel { z-index: 80; }
}

@media (max-width: 640px) {
  /* 手机上不给"浮窗"：屏太窄，浮窗与输入法、底部安全区打架。
     改成一开就铺满整屏，关掉即回到页面。 */
  .kefu-entry__panel {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  /* 气泡尺寸统一 80px（潘老师定），手机上只挪位置并让出底部安全区
     （iPhone 那条横条有 34px）。 */
  .kefu-entry__btn {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  /* 手机上气泡会比桌面更靠上（多出安全区那 34px），页脚净空要跟着加：
     气泡顶边最高到 16+34+80 = 130px，留 144px(9rem) 才不压住备案号。
     ⚠️ 安全区只在真机生效，桌面浏览器里恒为 0，所以护栏的量法测不到这一档 ——
     别因为"护栏是绿的"就把这行删掉。 */
  .site-footer { padding-bottom: 9rem; }
}

@media print {
  .site-header, .site-footer, .hero__bgs, .hero__dots, .nav-toggle, .form,
  .kefu-entry__btn, .kefu-entry__panel { display: none; }
  body { color: #000; }
}