/* ============================================================
   Ready2Offer — 官网设计系统
   主色 #D93228（2026-10-04 由 #EF3423 调整，与品牌 logo 底色统一）
   ============================================================ */

:root {
  /* 品牌色 */
  --r2o-red: #D93228;
  --r2o-red-dark: #B3271A;
  --r2o-red-soft: #FCEBE9;
  --r2o-red-line: rgba(217, 50, 40, 0.14);

  /* Ready2Work 系统色（独立子品牌，与红分离） */
  --sb-0: #312e81;
  --sb-1: #4338ca;
  --sb-2: #4f46e5;
  --sb-soft: #eef2ff;
  --sb-line: rgba(79, 70, 229, .18);

  /* 中性色 */
  --ink: #1a1a1a;
  --ink-2: #3d3d3d;
  --ink-3: #6b6b6b;
  --ink-4: #9a9a9a;
  --line: #ececec;
  --line-soft: #f4f4f4;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-deep: #f5f5f5;

  /* ===== 字体系统（2026-10-20 收敛：中文全站统一 MiSans）=====
     之前中文分两层：标题走邯郸内秀老宋（宋体衬线），正文走 OPPO Sans。
     用户反馈「小标题与正文用起来像乱码、看不清」——根因三条：
       ① 宋体字形在小字号下笔画粘连（.case-tag 10px / .card h3 .en 10.5px 最严重）；
       ② MiSans 只有 400 与 600 两档，页面里的 500 与 700 全部由浏览器合成假粗体；
       ③ 两套中文字体混排，字面大小与灰度不一致，切行位置对不上。
     ⇒ 决策：**中文全站统一 MiSans**（标题与正文同字），层级只靠字号、字重、颜色、字距拉开。
     保留两处品牌字标不动（Logo 专用）：
       Ready2Offer 字标 → Serif Narrow（--font-brand-r2o）
       Ready2Work 字标 → Roman SD（--font-brand-r2w）
     英文 / 数字 / 英文小标签仍走 Serif Narrow，与品牌字标同源。
     ⚠ 上线必须整目录上传 assets/fonts/misans/（112 片 woff2 + MiSans.css）。 */
  /* MiSans（小米，免费商用）。切 112 片 woff2，Regular 400 + Semibold 600，
     unicode-range 命中哪片下哪片。Sarasa 与 OPPO Sans 保留在栈里做兜底。 */
  --font-misans: 'MiSans', 'SarasaUiSC-Regular', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', system-ui, sans-serif;

  /* ⚠ 2026-10-20 已停用：邯郸内秀老宋（衬线，小字发糊）与 OPPO Sans。
     保留变量名是为了不破坏历史注释的引用点，但已不再作为任何层级的首选。 */
  --font-handan: var(--font-misans);
  --font-oppo:   var(--font-misans);
  --font-sarasa: var(--font-misans);

  --font-cn:      var(--font-misans);                                         /* 常规中文（默认正文） */
  --font-display: var(--font-misans);                                         /* 标题 · 重点 · 数字（同字，字号字重拉层级） */
  --font-text:    var(--font-misans);                                         /* 正文 */
  --font-cn-key:  var(--font-misans);                                         /* 重点中文 */

  /* 品牌字标：两个子品牌各用各的字体（永不改） */
  --font-brand:     'SerifNarrow', 'Barlow Semi Condensed', 'Arial Narrow', var(--font-misans); /* 通用（默认 R2O） */
  --font-brand-r2o: 'SerifNarrow', 'Barlow Semi Condensed', 'Arial Narrow', var(--font-misans); /* Ready2Offer 字标 */
  --font-brand-r2w: 'RomanSD', 'Barlow Semi Condensed', var(--font-misans);                      /* Ready2Work 字标 */

  /* 英文专用（2026-10-07 新增）：所有英文段落 / 小标签统一用 Serif Narrow，
     与品牌字标同源，形成「英文 = 品牌腔调」的一致观感。
     适度放大字间距（.01–.04em）抵消窄体在长句里的拥挤感。
     末尾回退链从 serif 改为 MiSans，避免英文层落回系统衬线体。 */
  --font-en:      'SerifNarrow', 'Barlow Semi Condensed', 'Arial Narrow', var(--font-misans);

  /* 尺寸 */
  --wrap: 1180px;
  --radius: 4px;
  --nav-h: 78px;

  /* 动效曲线 */
  --ease: cubic-bezier(.22, .61, .21, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* 阴影（收敛，靠留白与发丝线立结构） */
  --sh-1: 0 1px 2px rgba(0,0,0,.04);
  --sh-2: 0 10px 32px rgba(20,20,20,.07);
  --sh-3: 0 22px 60px rgba(20,20,20,.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* 数字统一等宽对齐（表格/统计数字列对齐用） */
.metric .v, .rec-table .sal, .rec-table .loc, .tl-time, .flow-num, .card-icon {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum' 1;
  font-feature-settings: 'tnum' 1;
}
body {
  font-family: var(--font-text);
  font-size: 16px; line-height: 1.75; color: var(--ink);
  background: var(--bg); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--r2o-red); text-decoration: none; transition: color .18s; }
a:hover { color: var(--r2o-red-dark); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- 顶部红色细条 ---------- */
.topbar { height: 4px; background: var(--r2o-red); }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s;
}
.nav.scrolled {
  background: rgba(255,255,255,.95);
  border-bottom-color: transparent;
  box-shadow: 0 8px 30px rgba(20,20,20,.06);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 28px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
/* 双品牌：Ready2Offer（红） + Ready2Work（系统主色靛蓝） */
.hidden-section { display: none !important; }
/* 2026-10-20：05 案例与合作已恢复展示，nav 与页脚的 #cases 入口不再隐藏。
   .hidden-section 仍保留，供「AI 做不到的事」等模块按需隐藏。 */

/* ---------- 导航品牌区：双品牌等高对齐 ----------
   铁律：Ready2Offer（红）与 Ready2Work（靛蓝）两块视觉重量一致。
   两者都用**文字**渲染（不再用图片，避免图上带入的阴影）。
   等高做法：两侧都用「大写墨迹高」对齐 ——
     Barlow Semi Condensed cap ≈ 0.72em；Roman SD cap ≈ 0.71em（实测字形）
   两者几乎相同，故两边取同一 font-size（28px）即为视觉等高。
   2026-10-07：品牌名由 SuperBiller 换为 Ready2Work，字体 Dream Orphans → Roman SD。 */
:root { --brand-ic: 54px; --brand-font-size: 28px; --brand-font-size-r2w: 22px; }
.nav-brands { display: flex; align-items: center; gap: 16px; }
.nav-sep { width: 1px; height: 34px; background: var(--line); flex: none; }
.nav-sb { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* nav 里的 Ready2Work 用文字（Roman SD，全大写），与左侧 Ready2Offer 视觉等高。
   ⚠ 左侧 Ready2Offer 是「首字母大写+其余小写」，右侧是全大写 ——
   全大写视觉墨迹远大于混合大小写，故右侧用更小字号（--brand-font-size-r2w）补偿。 */
.nav-sb .sb-word {
  font-family: var(--font-brand-r2w);
  font-size: var(--brand-font-size-r2w); font-weight: 600;
  letter-spacing: .5px; line-height: 1; color: var(--sb-1);
  text-transform: uppercase; transition: color .18s;
}
.nav-sb:hover .sb-word { color: var(--sb-0); }
.nav-links a.nav-sb-link {
  color: var(--sb-1);
  font-family: var(--font-brand-r2w);
  font-size: 14px; font-weight: 600; letter-spacing: .4px;
}
.nav-links a.nav-sb-link:hover { color: var(--sb-1); background: var(--sb-soft); }
.nav-links a.nav-sb-link.active { color: var(--sb-1); font-weight: 600; background: var(--sb-soft); }

/* Ready2Work 字标的内联用法：按钮 / 正文里提到系统名时，也用 logo 字体与系统主色 */
.sb-inline {
  font-family: var(--font-brand-r2w);
  font-weight: 600; letter-spacing: .4px; color: var(--sb-1); font-size: 1.02em;
}

.nav-logo { display: flex; align-items: center; gap: 13px; }
/* ⚠ Ready2Offer 定稿（红底白字方块）自带约 4% 呼吸边距，
   与右侧 Ready2Work 文字并排时按实际视觉尺寸对齐：
   此处按 1/0.92 = 1.087 反向补偿，使左侧红块视觉尺寸等于 --brand-ic。 */
.nav-logo img { width: calc(var(--brand-ic) / .92); height: calc(var(--brand-ic) / .92); object-fit: contain; }
.nav-logo .txt {
  font-family: var(--font-brand-r2o); font-size: var(--brand-font-size); font-weight: 700;
  color: var(--r2o-red); letter-spacing: .9px; line-height: 1;
}
.nav-logo .txt sup { font-size: 11px; color: var(--r2o-red); top: -.75em; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-family: var(--font-text); font-size: 14px; color: var(--ink-2);
  font-weight: 500; padding: 8px 14px; border-radius: var(--radius);
  transition: color .18s, background .18s;
}
.nav-links a:hover { color: var(--r2o-red); background: var(--r2o-red-soft); }
.nav-links a.active { color: var(--r2o-red); font-weight: 600; }
.nav-cta {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  background: var(--r2o-red); color: #fff !important;
  padding: 9px 20px; border-radius: var(--radius); margin-left: 10px;
  transition: background .18s, transform .18s;
}
.nav-cta:hover { background: var(--r2o-red-dark); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: .25s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding: 122px 0 100px; overflow: hidden;
  background: linear-gradient(168deg, #ffffff 0%, #fdf6f5 52%, #fafafa 100%);
}
/* 细网格底纹（科技感，向右下淡出） */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,26,26,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 95% at 22% 8%, #000 26%, transparent 72%);
  mask-image: radial-gradient(130% 95% at 22% 8%, #000 26%, transparent 72%);
}
.hero::after {
  content: ""; position: absolute; right: -180px; top: -180px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,50,40,.08) 0%, rgba(217,50,40,0) 66%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.hero-eyebrow {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: 2.4px;
  color: var(--r2o-red); font-weight: 500; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; margin-bottom: 26px;
}
.hero-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--r2o-red); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.6vw, 76px); font-weight: 600;
  line-height: 1.05; letter-spacing: -1.8px; color: var(--ink); margin-bottom: 24px;
}
.hero h1 em { font-style: normal; color: var(--r2o-red); }

/* ===== Hero 主视觉（2026-10-08 改造：借鉴 social 09/11/12 的英文大字排版）=====
   英文全大写 Serif Narrow 当主标题（第二行红色），中文短句降为副标，
   配左侧红色短横线 + 中部细横线 + 底部大写字距标签行。 */
.hero-h1-en {
  font-family: var(--font-en) !important;
  font-size: clamp(38px, 6.2vw, 72px) !important;
  font-weight: 700 !important; line-height: 1.06 !important;
  letter-spacing: .038em !important; text-transform: uppercase;
  color: var(--ink) !important; margin-bottom: 0 !important;
}
.hero-h1-en em { font-style: normal; color: var(--r2o-red); }
.hero-cn-lead {
  font-family: var(--font-cn-key);
  font-size: clamp(17px, 2vw, 22px); font-weight: 600;
  letter-spacing: .06em; color: var(--ink-2);
  margin: 18px 0 26px; padding-left: 16px;
  border-left: 3px solid var(--r2o-red);
}
.hero-cn-lead em { font-style: normal; color: var(--r2o-red); }
.hero-sub { font-size: clamp(15.5px, 1.6vw, 18.5px); color: var(--ink-2); max-width: 760px; line-height: 1.9; margin-bottom: 38px; }
.hero-sub .en {
  display: block; font-family: var(--font-en); font-size: 13px;
  color: var(--ink-4); margin-top: 14px; font-style: italic; line-height: 1.8;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero 底部标签行（social 09/11 的 foot 同款：细横线 + 全大写字距） */
.hero-foot { margin-top: 58px; border-top: 1px solid var(--line); position: relative; z-index: 2; }
.hero-foot .hero-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.hero-foot .hf-l,
.hero-foot .hf-r {
  font-family: var(--font-en); font-size: 12.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-4);
}
.hero-foot .hf-r { color: var(--r2o-red); font-weight: 700; letter-spacing: .18em; }
@media (max-width: 720px) {
  .hero-foot .hero-inner { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* 首屏逐层入场 */
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-eyebrow, .hero h1, .hero-h1-en, .hero-cn-lead, .hero-sub, .hero-actions {
  animation: riseIn .8s var(--ease-out) both;
}
.hero-h1-en { animation-delay: .07s; }
.hero-cn-lead { animation-delay: .12s; }
.hero-sub { animation-delay: .15s; }
.hero-actions { animation-delay: .23s; }

.btn {
  font-family: var(--font-text); font-size: 14.5px; font-weight: 600;
  padding: 13px 28px; border-radius: var(--radius); cursor: pointer;
  border: 1.5px solid transparent; transition: all .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--r2o-red); color: #fff; }
.btn-primary:hover { background: var(--r2o-red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,50,40,.25); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--r2o-red); color: var(--r2o-red); background: #fff; }

/* ---------- 页头（内页） ---------- */
.pagehead {
  position: relative; overflow: hidden;
  padding: 84px 0 66px;
  background: linear-gradient(168deg, #ffffff 0%, #fdf7f6 60%, #fafafa 100%);
  border-bottom: 1px solid var(--line);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,26,26,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 18% 0%, #000 24%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 18% 0%, #000 24%, transparent 70%);
}
.pagehead > * { position: relative; z-index: 1; }
.pagehead h1 {
  font-family: var(--font-display); font-size: clamp(36px, 5.2vw, 56px);
  font-weight: 600; letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 16px;
}
.pagehead .lead { font-size: 16px; color: var(--ink-3); max-width: 900px; line-height: 1.85; }
.breadcrumb { font-family: var(--font-display); font-size: 11.5px; color: var(--ink-4); letter-spacing: 1.2px; margin-bottom: 18px; text-transform: uppercase; }
.breadcrumb a { color: var(--ink-4); }
.breadcrumb a:hover { color: var(--r2o-red); }

/* ---------- 章节 ---------- */
.section { padding: clamp(84px, 9vw, 118px) 0; }
.section.soft { background: var(--bg-soft); }
.section.dark { background: #141414; }

/* ============================================================
   「墨色」区块（2026-10-07 新增）—— 把黑/白/橙三色引入页面节奏
   黑底（--ink-block）用来切开版面、沉淀数据与覆盖范围，与白底章节交替，
   形成「白 → 黑 → 白」的呼吸感。红色保持为唯一强调色。
   ============================================================ */
.section.ink {
  position: relative;
  background: #141414;
  color: #fff;
  overflow: hidden;
}
/* 右上角红色光晕，呼应社媒图的橙底氛围 */
.section.ink::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 90% at 88% 0%, rgba(217,50,40,.28), transparent 62%);
}
.section.ink > * { position: relative; z-index: 2; }
/* 区块内的文字在深底上反白 */
.section.ink .section-title { color: #fff; }
.section.ink .section-title::before { background: var(--r2o-red); }
.section.ink .section-title .en { color: var(--r2o-red); }
.section.ink .section-title .en::after { background: rgba(255,255,255,.18); }
.section.ink .section-lead { color: rgba(255,255,255,.72); }
.section.ink .section-lead .en-text { color: rgba(255,255,255,.56); }
/* 深底里的卡片改用半透明白玻璃 */
.section.ink .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.section.ink .card h3 { color: #fff; }
.section.ink .card p { color: rgba(255,255,255,.66); }
.section.ink .card h3 .en { color: var(--r2o-red); }
/* 深底数据格 */
.section.ink .metric {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.section.ink .metric .v { color: var(--r2o-red); }
.section.ink .metric .l { color: rgba(255,255,255,.6); }
.section.ink .metric:hover { border-color: rgba(217,50,40,.5); box-shadow: none; }

/* 深底里的 MVV 卡（使命/愿景/价值观） */
.section.ink .mvv-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section.ink .mvv-item h3 { color: var(--r2o-red); }
.section.ink .mvv-item p { color: rgba(255,255,255,.82); }
.section.ink .mvv-item .en { color: rgba(255,255,255,.5); }
.section.ink .mvv-item:hover { box-shadow: none; border-color: rgba(217,50,40,.42); }
/* 深底里的合伙人背景区 */
.section.ink .fp-bg { border-top-color: rgba(255,255,255,.14); }
.section.ink .fp-bg-h { color: #fff; }
.section.ink .fp-bg-h .en { color: var(--r2o-red); }
.section.ink .fp-item .fp-n { color: var(--r2o-red); }
.section.ink .fp-item h4 { color: #fff; }
.section.ink .fp-item p { color: rgba(255,255,255,.68); }
.section-title {
  font-family: var(--font-display); font-size: clamp(25px, 3vw, 36px); font-weight: 600;
  letter-spacing: -.5px; color: var(--ink); line-height: 1.22;
  padding-top: 28px; position: relative; margin-bottom: 16px;
}
.section-title::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 46px; height: 3px; background: var(--r2o-red);
}
/* 英文小标签（2026-10-08：按 social 09/11/12 标准加大字距/字重） */
.section-title .en {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-en); font-size: 12px;
  letter-spacing: .28em; color: var(--r2o-red); font-weight: 700;
  text-transform: uppercase; margin-bottom: 14px;
}
.section-title .en::after { content: ""; width: 64px; height: 1px; background: var(--line); }
/* 英文小标签独占一行时（social 11/12 的 kick 行）不拉分隔线 */
.section-title .en.plain::after { display: none; }
.section-lead { font-size: 15.5px; color: var(--ink-3); max-width: 820px; margin-bottom: 54px; line-height: 1.85; }

/* ---------- 一页式分章标题带 ----------
   单页站点靠它把「产品与服务 / 公司与团队 / Ready2Work / 联系我们」四个模块切开，
   滚动时能立刻感知换了一个视角。
   锚点跳转要避开 sticky 导航，所以 scroll-margin-top 必须等于 --nav-h。 */
.group-head {
  background: var(--r2o-red-soft); border-top: 4px solid var(--r2o-red);
  padding: 54px 0 36px; scroll-margin-top: var(--nav-h);
  position: relative;
}
.group-head .gh-en {
  display: block; font-family: var(--font-en); font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--r2o-red);
  margin-bottom: 12px; font-weight: 700;
}
.group-head h2 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.6px; color: var(--ink);
}
/* 分章标题带底部大写字距标签行（social 11/12 foot 同款） */
.group-head .gh-foot {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--r2o-red-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: var(--font-en); font-size: 11.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-4);
  position: relative; z-index: 2;
}
.group-head .gh-foot .r { color: var(--r2o-red); font-weight: 700; letter-spacing: .18em; }
.group-head p { margin-top: 12px; font-size: 15.5px; color: var(--ink-3); max-width: 700px; line-height: 1.8; }
/* Ready2Work 模块整体切到靛蓝，与红色主站形成「另一个产品」的观感 */
.sb-scope .group-head { background: var(--sb-soft); border-top-color: var(--sb-2); }
.sb-scope .group-head .gh-en { color: var(--sb-2); }
.sb-scope .group-head .gh-foot { border-top-color: var(--sb-line); }
.sb-scope .group-head .gh-foot .r { color: var(--sb-1); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 行业词带（无缝滚动） ---------- */
.ticker {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff; overflow: hidden; position: relative;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, #fff 20%, rgba(255,255,255,0)); }
.ticker::after { right: 0; background: linear-gradient(270deg, #fff 20%, rgba(255,255,255,0)); }
.ticker-row { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker:hover .ticker-row { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; }
.ticker-item {
  font-family: var(--font-cn); font-size: 14px; font-weight: 500;
  letter-spacing: 3px; color: var(--ink-2); white-space: nowrap;
  display: flex; align-items: center;
}
.ticker-item .en { font-family: var(--font-display); font-size: 11px; letter-spacing: 1.6px; color: var(--ink-4); margin-left: 8px; }
.ticker-item + .ticker-item::before {
  content: ""; width: 5px; height: 5px; background: var(--r2o-red);
  border-radius: 1px; margin: 0 30px; transform: rotate(45deg); flex: none;
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- 网格与卡片 ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--r2o-red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-4px); border-color: var(--r2o-red-line); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; line-height: 1.4; letter-spacing: 0; }
.card h3 .en { display: block; font-family: var(--font-en); font-size: 11px; letter-spacing: 1.2px; color: var(--r2o-red); text-transform: uppercase; font-weight: 500; margin-top: 6px; }
.card p { font-size: 14px; color: var(--ink-3); line-height: 1.8; }
.card-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--r2o-red-soft); color: var(--r2o-red);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 16px;
}

/* ---------- 档位标记（Core 一律主色实底 + 白字，作为核心专长的统一视觉锚点） ---------- */
.tier-tag {
  display: inline-block; font-family: var(--font-display); font-size: 10px;
  font-weight: 600; letter-spacing: 1.4px; padding: 4px 10px;
  border-radius: 100px; margin-bottom: 14px; text-transform: uppercase;
  background: var(--r2o-red); color: #fff; border: 1px solid var(--r2o-red);
}
.spec-subtitle {
  font-family: var(--font-text); font-size: 19px; font-weight: 600; color: var(--ink);
  margin: 54px 0 20px; padding-left: 14px; border-left: 4px solid var(--r2o-red);
  display: flex; align-items: baseline; gap: 12px; letter-spacing: -.2px;
}
.spec-subtitle .en {
  font-family: var(--font-en); font-size: 11px; font-weight: 500;
  letter-spacing: 1.1px; color: var(--ink-4); text-transform: uppercase;
}
.tier-1 { background: var(--r2o-red); color: #fff; border: 1px solid var(--r2o-red); }

/* 居中网格（深耕行业 7 项 / 专注职能 10 项）：用 flex + 居中代替 grid，
   末行不足整行时自动水平居中，避免单个卡片挂在左侧形成视觉缺口。 */
.grid-center { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.grid-center > .card { flex: 0 1 calc((100% - 40px) / 3); }

/* ---------- 行业覆盖（28 项 / 6 组）与职能覆盖（21 项）----------
   2026-10-20 全量整合：行业扩到 28 个并按 6 组分组（组标题 .cov-group），
   职能扩到 21 个。行业走 4 列 flex 居中（每组 4~6 张，末行自然居中收口），
   职能走 3 列 flex 居中（21 张 = 7 行整）。 */
.cov-groups { margin-top: 34px; }
.cov-group {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink); letter-spacing: .2px;
  margin: 0 0 18px; padding-left: 14px; position: relative;
}
.cov-group:first-child { margin-top: 0; }
.cov-group::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--r2o-red);
}
.cov-group .en { font-family: var(--font-en); font-size: 10px; letter-spacing: 1px; margin-left: 10px; }
.cov-row { margin-bottom: 34px; }
.cov-row:last-child { margin-bottom: 0; }
.grid-center-4 { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.grid-center-4 > .card { flex: 0 1 calc((100% - 54px) / 4); }
.ind-card, .fn-card { padding: 24px 20px; }
.ind-card h3, .fn-card h3 { font-size: 15.5px; margin-bottom: 6px; letter-spacing: 0; }
.ind-card h3 .en, .fn-card h3 .en { font-family: var(--font-en); font-size: 10px; letter-spacing: 1px; margin-top: 5px; }
.card-tags {
  font-size: 12.5px; color: var(--ink-4); line-height: 1.9; margin-top: 2px;
  text-wrap: pretty;
}

/* ---------- 代表案例（挑战 / 做法 / 结果）---------- */
.case-tag {
  display: block; font-family: var(--font-en); font-size: 10.5px;
  letter-spacing: 1px; color: var(--r2o-red); text-transform: uppercase;
  margin-bottom: 10px; font-weight: 500;
}
.case-card dl { margin: 0; }
.case-card dt {
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  color: var(--r2o-red); letter-spacing: .4px; margin-top: 14px;
}
.case-card dd {
  margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3);
  line-height: 1.85; text-wrap: pretty;
}
/* 典型寻访场景卡：与案例卡同一视觉语言，标题不带城市年薪（因为不是成交） */
.sc-card h3 { font-size: 15.5px; margin-bottom: 2px; letter-spacing: 0; }

/* ---------- 排版：消除末行孤字 ----------
   句子末行只剩一两个字，是长段落与短块两类不同的问题，分开处理：
   ① 长正文段落（会排到 6 行以上）用 pretty —— 浏览器换行时避开末行孤字；
   ② 短文案块（CTA / 章节导语 / 卡片与能力项描述，通常 2–5 行）用 balance ——
      直接匀分各行宽度，从根上消除短尾。
   balance 只在行数 ≤6 时生效，且规范要求不得增加行数，因此不会改变卡片高度、
   不破坏栅格对齐；超过 6 行的长段落自动回落，保持整段铺满。 */
p, li { text-wrap: pretty; }
.cta-band p, .section-lead, .hero-sub, .pagehead .lead,
.card p, .ai-item p { text-wrap: balance; }

/* ---------- Ready2Work 品牌（自研系统 · Roman SD 字体 + 定稿横标） ---------- */
@font-face {
  font-family: 'SerifNarrow';
  src: url('fonts/SerifNarrow.woff2') format('woff2'),
       url('fonts/SerifNarrow.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'RomanSD';
  src: url('fonts/RomanSD.woff2') format('woff2'),
       url('fonts/RomanSD.ttf') format('truetype');
  font-display: swap;
}

/* 邯郸内秀老宋简体（中文「重点」字体：标题 / 数字 / 强调，2026-10-07 新增）
   来源 namecard 物料；用 fontTools 按站内实际用字子集化到 218KB。
   ⚠ 子集只含当前页面出现过的字。若后续新增中文文案，需重新子集（见 memory 记录）。 */
@font-face {
  font-family: 'HanDanLaoSong';
  src: url('fonts/HanDanLaoSongJian.subset.woff2') format('woff2');
  font-display: swap;
}

/* OPPO Sans（中文「常规」字体：正文 / 描述 / UI，2026-10-08 新增）
   用 fontTools 按站内实际用字子集化到 114KB（原字重文件 10MB）。 */
@font-face {
  font-family: 'OPPOSansSubset';
  src: url('fonts/OPPOSansSubset.woff2') format('woff2');
  font-display: swap;
}
.sb-brand {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--font-brand-r2w);
  font-weight: 600; letter-spacing: .5px; line-height: 1;
}
/* Ready2Work 面板用定稿横标（透明 PNG，宽高比 ≈ 9.31:1）—— 仅 .sb-panel 内使用；
   nav 已改用文字（Roman SD），不再用图。 */
.sb-logo { display: block; height: 26px; width: auto; flex: none; }
.sb-brand.lg .sb-logo { height: 42px; }

/* ============================================================
   English Typography — Serif Narrow（2026-10-07 新增）
   全站英文统一换成 Serif Narrow（与 Ready2Offer 字标同源），
   并把窄体在长句里的拥挤感用 letter-spacing 抵消掉。
   只影响「英文」，中文/数字仍走更纱黑体。
   ============================================================ */
/* 英文小标签（章节名 / 卡片角标 / 眉标） */
.section-title .en,
.pagehead .breadcrumb,
.group-head .gh-en,
.hero-eyebrow { font-family: var(--font-en); letter-spacing: 3px; }

/* 英文正文段（中文后附的整段英文） */
.en-text {
  font-family: var(--font-en);
  letter-spacing: .015em;
  word-spacing: .04em;
}
/* hero 副文案里的英文行 */
.hero-sub .en { font-family: var(--font-en); letter-spacing: .015em; font-style: normal; }
/* 卡片英文小标 */
.card h3 .en { font-family: var(--font-en); letter-spacing: 2px; }
/* ticker / 规格表里的英文 */
.ticker-item .en,
.list-clean li .en,
.spec-col h4 .en { font-family: var(--font-en); letter-spacing: 1.6px; }

/* 正文里提到的品牌名，各用其对应字体（2026-10-07 新增）
   Ready2Offer → Serif Narrow；Ready2Work → Roman SD。
   这样无论出现在中文段落还是英文段落里，字标都保持品牌腔调。 */
.brand-r2o { font-family: var(--font-brand-r2o); font-weight: 700; letter-spacing: .01em; }
.brand-r2w { font-family: var(--font-brand-r2w); font-weight: 600; letter-spacing: .02em; color: var(--sb-1); }
/* 深底 / 红底 / 靛蓝底上，R2W 的靛蓝色要反白或提亮，避免看不清 */
.section.ink .brand-r2w,
.cta-band .brand-r2w,
.sb-panel .brand-r2w { color: #c7d2fe; }

/* Ready2Work 系统展示面板（配色沿用系统主色 靛蓝） */
.sb-panel {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 48%, #4f46e5 100%);
  border-radius: var(--radius); padding: 46px 42px; color: #fff;
  box-shadow: var(--sh-2); position: relative; overflow: hidden;
}
.sb-panel > * { position: relative; z-index: 1; }
/* 细网格底纹 */
.sb-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(90% 90% at 85% 15%, #000 20%, transparent 72%);
  mask-image: radial-gradient(90% 90% at 85% 15%, #000 20%, transparent 72%);
}
.sb-panel::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(165,180,252,.42), transparent 68%);
}
.sb-panel .sb-brand { position: relative; z-index: 1; margin-bottom: 22px; }
.sb-panel .sb-tag {
  font-family: var(--font-cn); font-size: 11.5px; font-weight: 500; letter-spacing: 1px;
  color: #c7d2fe; background: rgba(255,255,255,.12); border: 1px solid rgba(199,210,254,.45);
  padding: 5px 12px; border-radius: 100px; margin-left: 8px; white-space: nowrap;
}
.sb-panel h3 {
  font-family: var(--font-text); font-size: clamp(20px, 2.4vw, 27px); font-weight: 600;
  color: #fff; margin-bottom: 12px; letter-spacing: -.2px;
}
.sb-panel p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.9; max-width: 780px; }
.sb-mods { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.sb-mod {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; padding: 16px 18px;
}
.sb-mod .m-n { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 1.2px; color: #c7d2fe; display: block; margin-bottom: 7px; }
.sb-mod .m-t { font-size: 15px; font-weight: 600; color: #fff; display: block; margin-bottom: 6px; }
.sb-mod .m-d { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.75; }
@media (max-width: 860px) { .sb-mods { grid-template-columns: 1fr; } .sb-panel { padding: 30px 22px; } }

/* ---------- 列表 ---------- */
.list-clean { list-style: none; }
.list-clean li { font-size: 14.5px; color: var(--ink-2); padding: 7px 0 7px 22px; position: relative; line-height: 1.7; }
.list-clean li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 6px; height: 6px; background: var(--r2o-red); border-radius: 1px; }
.list-clean li .en { color: var(--ink-4); font-family: var(--font-display); font-size: 12px; }

/* ---------- 专长双栏 ---------- */
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.spec-col h4 {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  color: var(--r2o-red); border-bottom: 2px solid var(--r2o-red);
  padding-bottom: 10px; margin-bottom: 18px; display: flex; align-items: baseline; gap: 9px;
}
.spec-col h4 .en { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 1.4px; color: var(--ink-4); font-weight: 400; text-transform: uppercase; }

/* ---------- 创始合伙人：行业背景与优势 ---------- */
.fp-bg { margin-top: 46px; padding-top: 38px; border-top: 1px solid var(--line); }
.fp-bg-h {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--ink); margin-bottom: 28px; letter-spacing: -.2px;
}
.fp-bg-h .en {
  display: block; font-family: var(--font-en); font-size: 11px;
  letter-spacing: 1.2px; color: var(--r2o-red); text-transform: uppercase;
  font-weight: 500; margin-top: 6px;
}
.fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 46px; }
.fp-item { position: relative; padding-left: 44px; }
.fp-item .fp-n {
  position: absolute; left: 0; top: 3px; font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: var(--r2o-red);
}
.fp-item h4 {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); margin-bottom: 8px; line-height: 1.45;
}
.fp-item p { font-size: 14px; color: var(--ink-3); line-height: 1.8; }

/* ---------- 表格 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.rec-table th {
  background: var(--bg-soft); text-align: left; padding: 13px 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  border-bottom: 2px solid var(--r2o-red); color: var(--ink); white-space: nowrap;
}
.rec-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); transition: background .18s; }
.rec-table tbody tr:hover td { background: #fff7f6; }
.rec-table tr:nth-child(even) td { background: var(--bg-soft); }
.rec-table tbody tr:hover:nth-child(even) td { background: #fff7f6; }
.rec-table .sal { font-family: var(--font-display); color: var(--r2o-red); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-table .loc { color: var(--ink-4); font-family: var(--font-display); font-size: 12px; white-space: nowrap; }

/* ---------- 使命/愿景/价值观 ---------- */
.mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mvv-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 22px; text-align: center; background: #fff; position: relative; overflow: hidden; }
.mvv-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--r2o-red); }
.mvv-item h3 { font-family: var(--font-display); font-size: 15px; color: var(--r2o-red); font-weight: 600; margin-bottom: 12px; }
.mvv-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.75; }

/* ---------- 时间线 ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--r2o-red) 0%, var(--line) 100%); }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -30px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--r2o-red); }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tl-org { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.tl-role { font-size: 13.5px; color: var(--r2o-red); font-weight: 600; }
.tl-time { font-family: var(--font-display); font-size: 11.5px; color: var(--ink-4); margin-left: auto; }
.tl-desc { font-size: 14px; color: var(--ink-3); line-height: 1.8; }

/* ---------- 标签 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-text); font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 100px;
  background: var(--r2o-red-soft); color: var(--r2o-red-dark);
  border: 1px solid var(--r2o-red-line);
}

/* ---------- 职业咨询：规格标签 + 一句说明 ---------- */
.cc-meta {
  margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
}
.cc-meta .chips { flex: none; }
.cc-note { flex: 1 1 340px; font-size: 14.5px; color: var(--ink-3); line-height: 1.8; }

/* ---------- 深色 AI 面板 ---------- */
.ai-panel { background: linear-gradient(150deg, #161616 0%, #242424 100%); border-radius: var(--radius); padding: 58px 48px; color: #fff; position: relative; overflow: hidden; }
.ai-panel > * { position: relative; z-index: 1; }
.ai-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(85% 85% at 85% 15%, #000 18%, transparent 70%);
  mask-image: radial-gradient(85% 85% at 85% 15%, #000 18%, transparent 70%);
}
.ai-panel::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(217,50,40,.22) 0%, rgba(217,50,40,0) 70%); }
.ai-panel .section-title { color: #fff; }
.ai-panel .section-title .en { color: var(--r2o-red); }
.ai-panel .section-lead { color: rgba(255,255,255,.72); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; }
.ai-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 26px 22px; transition: .22s; }
.ai-item:hover { background: rgba(217,50,40,.13); border-color: rgba(217,50,40,.4); }
.ai-item .n { font-family: var(--font-display); font-size: 12px; color: var(--r2o-red); font-weight: 600; letter-spacing: 1.5px; margin-bottom: 12px; display: block; }
.ai-item h3 { font-family: var(--font-display); font-size: 16px; color: #fff; margin-bottom: 10px; font-weight: 600; }
.ai-item p { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.75; }

/* ---------- 流程 ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.flow-step { position: relative; padding: 0 12px; text-align: center; }
.flow-num {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 16px;
  background: #fff; border: 2px solid var(--r2o-red); color: var(--r2o-red);
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
}
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; top: 23px; left: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 1;
}
.flow-step h4 { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.flow-step p { font-size: 12.5px; color: var(--ink-4); line-height: 1.65; }

/* ---------- 引用/高亮块 ---------- */
.quote {
  border-left: 4px solid var(--r2o-red); background: var(--bg-soft);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.85;
}
.quote strong { color: var(--r2o-red); }

/* ---------- 英文对照段（同页双语：中文为主，英文作为补充层） ----------
   节奏：每个 section 最多一处英文段，卡片级别用 .card h3 .en 的小标。
   不要逐句配英文，两倍长度反而难读。 */
.en-text {
  display: block;
  font-family: var(--font-text);
  font-size: 13.5px; line-height: 1.9; color: var(--ink-4);
  max-width: 880px; margin-top: 12px; letter-spacing: .1px;
}
/* ⭐ 嵌在中文段内的英文（<span class="en-text"> 写法）改为 inline 续排：
   紧跟中文句号后同一段混排，不再 display:block 强制另起一整块、也不受 880px 限宽折成多行
   —— 这正是之前「中英分成两坨」造成的多余换行。独立成段的英文（<p class="en-text">，如 S1–S4 后面）保持 block。 */
span.en-text { display: inline; margin: 0; max-width: none; }
span.en-text::before { content: "\00A0"; }   /* 中文标点后留一个不换行空格，不与英文黏死 */
.spec-subtitle + .en-text { margin: -10px 0 26px; }
.cta-band .en-text { color: rgba(255, 255, 255, .78); max-width: 700px; }
.sb-panel .en-text { color: rgba(255, 255, 255, .66); }
.flow-step h4 .en {
  display: block; font-family: var(--font-en); font-size: 10px;
  letter-spacing: 1px; color: var(--r2o-red); text-transform: uppercase;
  font-weight: 500; margin-top: 5px;
}
.mvv-item .en {
  display: block; font-family: var(--font-text); font-size: 12.5px;
  color: var(--ink-4); line-height: 1.8; margin-top: 10px;
}

/* ---------- 案例数字条 ---------- */
/* 服务数据：3 列排布。项数不是 3 的整数倍时（例如删掉一条后剩 5 项），
   末行用 flex 居中收口，不会在右侧留一个空洞 —— 与 .grid-center 同一套做法。 */
.metrics { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.metrics .metric { flex: 0 1 calc((100% - 36px) / 3); }
.metric {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 20px; text-align: center;
}
.metric .v { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--r2o-red); display: block; line-height: 1.2; }
.metric .l { font-size: 12.5px; color: var(--ink-4); margin-top: 6px; display: block; }

/* ---------- CTA 区 ---------- */
.cta-band {
  background: var(--r2o-red); color: #fff; padding: 68px 0; position: relative; overflow: hidden;
}
.cta-band::after { content: ""; position: absolute; right: -100px; top: -100px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 70%); }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; line-height: 1.2; margin-bottom: 14px; position: relative; z-index: 2; }
.cta-band p { font-size: 15.5px; opacity: .93; max-width: 700px; line-height: 1.8; margin-bottom: 30px; position: relative; z-index: 2; }
.cta-band .btn-white { background: #fff; color: var(--r2o-red); font-family: var(--font-text); font-size: 14.5px; font-weight: 600; padding: 13px 28px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 2; transition: .2s; }
.cta-band .btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); color: var(--r2o-red-dark); }

/* ---------- 联系卡 ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-item { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: .2s; }
.contact-item:hover { border-color: var(--r2o-red-line); box-shadow: var(--sh-1); }
.contact-item .ico { width: 42px; height: 42px; border-radius: var(--radius); background: var(--r2o-red-soft); color: var(--r2o-red); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.contact-item .lab { font-size: 12px; color: var(--ink-4); font-family: var(--font-display); letter-spacing: .8px; text-transform: uppercase; }
.contact-item .val { font-size: 15px; color: var(--ink); font-weight: 500; word-break: break-all; }

/* ---------- 页脚 ---------- */
.footer { background: #141414; color: rgba(255,255,255,.62); padding: 56px 0 30px; font-size: 13.5px; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-brand img { width: 32px; height: 32px; object-fit: contain; }
.footer-brand .txt { font-family: var(--font-brand-r2o); font-size: 21px; font-weight: 700; color: #fff; letter-spacing: .7px; }
.footer h5 { font-family: var(--font-en); font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: #fff; margin-bottom: 14px; font-weight: 600; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 9px; }
.footer ul a { color: rgba(255,255,255,.62); }
.footer ul a:hover { color: var(--r2o-red); }
.footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.4); }
.footer-bottom .slogan { font-family: var(--font-en); letter-spacing: 2.4px; text-transform: uppercase; color: var(--r2o-red); }
.footer-bottom .footer-icp { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-bottom .footer-icp:hover { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.45); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-center > .card { flex-basis: calc((100% - 20px) / 2); }
  .grid-center-4 > .card { flex-basis: calc((100% - 18px) / 2); }
  .spec-cols { grid-template-columns: 1fr; gap: 34px; }
  .ai-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .flow-step:not(:last-child)::after { display: none; }
  .flow-track { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .metrics .metric { flex-basis: calc((100% - 36px) / 3); }
}

/* ---------- 导航折叠断点 ----------
   导航从 4 项变 6 项后，横向占用多了约 190px，原来的 720px 折叠点太晚 ——
   实测品牌区约 430px + 链接约 590px = 1020px，窗口窄于约 1080px 就会挤出边界。
   所以把「收进汉堡菜单」这一步单独提到 1080px，跟其他版式断点解耦。 */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 12px 16px 20px; gap: 2px;
    border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .22s;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 12px 14px; font-size: 15px; }
  .nav-links a.active::after { display: none; }
  .nav-cta { margin-left: 0; text-align: center; justify-content: center; }
  .group-head::after { display: none; }
}

@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .wrap { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .nav-brands { gap: 11px; }
  .nav-sep { height: 24px; }
  /* 移动端同步等比缩放：图标 34px，两侧文字同用 --brand-font-size 等比缩小，保持等高 */
  :root { --brand-ic: 34px; --brand-font-size: 18px; --brand-font-size-r2w: 14px; }
  .nav-logo .txt { font-size: var(--brand-font-size); }
  .nav-sb .sb-word { font-size: var(--brand-font-size-r2w); }
  .hero { padding: 72px 0 60px; }
  .hero-inner { padding: 0 20px; }
  .section { padding: 60px 0; }
  .pagehead { padding: 52px 0 40px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-center > .card { flex-basis: 100%; }
  .grid-center-4 > .card { flex-basis: 100%; }
  .mvv { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .metrics .metric { flex-basis: 100%; }
  .ai-panel { padding: 36px 22px; }
  .fp-grid { grid-template-columns: 1fr; gap: 24px; }
  .fp-item { padding-left: 40px; }
  .fp-bg { margin-top: 34px; padding-top: 30px; }
  .cc-meta { margin-top: 30px; gap: 14px 18px; }
  .flow { grid-template-columns: 1fr; }
  .section-title { font-size: 23px; padding-top: 22px; }
  .ticker-item { font-size: 12.5px; letter-spacing: 2px; }
  .ticker-item + .ticker-item::before { margin: 0 20px; }
  .footer-bottom { flex-direction: column; }
}

/* ---------- 智能寻访页：整页切换到 Ready2Work 系统配色 ---------- */
.sb-scope .pagehead {
  background: linear-gradient(168deg, #312e81 0%, #4338ca 52%, #4f46e5 100%);
  border-bottom: 0; color: #fff;
}
.sb-scope .pagehead::before {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 24%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 24%, transparent 70%);
}
.sb-scope .pagehead h1 { color: #fff; }
.sb-scope .pagehead .lead { color: rgba(255,255,255,.85); }
.sb-scope .breadcrumb, .sb-scope .breadcrumb a { color: rgba(255,255,255,.72); }
.sb-scope .breadcrumb a:hover { color: #fff; }
.sb-scope .section-title::before { background: var(--sb-2); }
.sb-scope .section-title .en { color: var(--sb-2); }
.sb-scope .card::before { background: var(--sb-2); }
.sb-scope .card:hover { border-color: var(--sb-line); }
.sb-scope .card h3 .en { color: var(--sb-2); }
.sb-scope .card-icon { background: var(--sb-soft); color: var(--sb-1); }
.sb-scope .tier-tag { color: var(--sb-1); border-color: var(--sb-line); }
.sb-scope .list-clean li::before { background: var(--sb-2); }
.sb-scope .quote { border-left-color: var(--sb-2); }
.sb-scope .quote strong { color: var(--sb-2); }
.sb-scope .cta-band { background: linear-gradient(135deg, #312e81 0%, #4f46e5 100%); }
.sb-scope .cta-band .btn-white { color: var(--sb-1); }
.sb-scope .cta-band .btn-white:hover { color: var(--sb-0); }
.sb-scope .spec-subtitle { border-left-color: var(--sb-2); }

/* ============================================================
   细节与动效层（2026-10-05 新增）
   ------------------------------------------------------------
   三条约定：
   ① 所有「初始隐藏态」都挂在 html.anim 下，这个类由 main.js 在确认用户
      没有开启「减弱动效」之后才加上。所以 JS 没加载、或用户要求减动效时，
      页面直接呈现最终状态，不会出现空白或半截动画。
   ② 只动 transform / opacity / background，不触发布局重排，长页滚动不掉帧。
   ③ 分带大号章节数字在 ≤1080px 隐藏，避免与正文叠压（见上面的折叠断点）。
   ④ 「折叠 / 展开」这类状态类挂在 html.js 下（main.js 一进去就加上），
      JS 没加载时内容完整展示，不会出现折叠了却点不开的死局。
   ============================================================ */

/* ---------- 阅读进度条：贴在吸顶导航下沿 ---------- */
.nav-progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  background: var(--r2o-red); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
}

/* ---------- 分带标题带：大号章节数字 ---------- */
.group-head { position: relative; overflow: hidden; --gh-bg: var(--r2o-red-soft); background: var(--gh-bg); }
.sb-scope .group-head { --gh-bg: var(--sb-soft); }
.group-head::after {
  content: attr(data-num);
  position: absolute; top: calc(50% - 18px); right: max(28px, calc((100% - var(--wrap)) / 2 + 28px));
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; line-height: .78;
  font-size: clamp(72px, 9.5vw, 124px); letter-spacing: -5px;
  color: rgba(217, 50, 40, .07); pointer-events: none; user-select: none;
}
.sb-scope .group-head::after { color: rgba(79, 70, 229, .1); }

/* 眉标前加一段短红线，和标题下的发丝线呼应 */
.group-head .gh-en { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.group-head .gh-en::before { content: ""; width: 26px; height: 2px; background: var(--r2o-red); flex: none; }
.sb-scope .group-head .gh-en::before { background: var(--sb-2); }
.group-head h2 { position: relative; z-index: 2; }
/* 加了 gh-foot 后，让大号章节数字不要压到标签行 */
.group-head .wrap { position: relative; z-index: 2; }

/* 分带入场：眉标线先展开，标题与导语依次上移淡入 */
html.anim .group-head .gh-en,
html.anim .group-head h2,
html.anim .group-head p { opacity: 0; }
html.anim .group-head .gh-en::before { transform: scaleX(0); transform-origin: left center; }
html.anim .group-head.in .gh-en::before { animation: barIn .7s var(--ease-out) both; }
html.anim .group-head.in .gh-en { animation: ghIn .6s var(--ease-out) .12s both; }
html.anim .group-head.in h2 { animation: ghIn .6s var(--ease-out) .2s both; }
html.anim .group-head.in p { animation: ghIn .6s var(--ease-out) .28s both; }
@keyframes ghIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 点导航跳到某一段时，目标分带背景脉冲一下，给出「到了」的确认 */
.group-head.flash { animation: ghFlash .9s var(--ease-out); }
@keyframes ghFlash {
  0% { background: var(--gh-bg); }
  30% { background: #F6D6D2; }
  100% { background: var(--gh-bg); }
}
.sb-scope .group-head.flash { animation-name: ghFlashSb; }
@keyframes ghFlashSb {
  0% { background: var(--gh-bg); }
  30% { background: #DDE3FF; }
  100% { background: var(--gh-bg); }
}

/* ---------- 章节标题：红条与发丝线依次展开 ---------- */
html.anim .section-title::before { transform: scaleX(0); transform-origin: left center; }
html.anim .section-title.in::before { animation: barIn .7s var(--ease-out) both; }
html.anim .section-title .en::after { transform: scaleX(0); transform-origin: left center; }
html.anim .section-title.in .en::after { animation: barIn .9s var(--ease-out) .18s both; }

/* ---------- 导航当前项：文字下方浮现一小段短横 ---------- */
.nav-links a { position: relative; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px;
  background: var(--r2o-red); border-radius: 2px;
  animation: navDot .3s var(--ease-out) both;
}
.nav-links a.nav-sb-link.active::after { background: var(--sb-2); }
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta.active { background: var(--r2o-red-dark); }
@keyframes navDot {
  from { transform: translateX(-50%) scaleX(0); opacity: 0; }
  to { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

/* ---------- 卡片微交互：图标在悬停时翻成实底 ---------- */
.card-icon { transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.card:hover .card-icon { background: var(--r2o-red); color: #fff; transform: translateY(-2px) scale(1.04); }
.sb-scope .card:hover .card-icon { background: var(--sb-2); color: #fff; }

/* ---------- 服务数据：数字滚动 + 悬停抬升 ---------- */
.metric { position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.metric::before {
  content: ""; position: absolute; top: -1px; left: 50%; height: 3px; width: 0;
  background: var(--r2o-red); transform: translateX(-50%);
  transition: width .38s var(--ease); border-radius: 2px;
}
.metric:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--r2o-red-line); }
.metric:hover::before { width: 100%; }
.metric .u { font-size: .6em; margin-left: 2px; }

/* ---------- 交付流程：连接线随滚动点亮，圆点依次填实 ---------- */
.flow-track {
  position: absolute; top: 23px; left: 10%; width: 80%; height: 2px;
  background: var(--r2o-red); border-radius: 2px; z-index: 2; pointer-events: none;
  transform: scaleX(var(--flow-p, 0)); transform-origin: left center;
}
.flow-num { transition: background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease), transform .32s var(--ease); }
.flow-num.on { background: var(--r2o-red); color: #fff; border-color: var(--r2o-red); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .flow-track { transform: scaleX(1); } }

/* ---------- 成交记录：逐行入场 ---------- */
html.anim .rec-table tbody tr { opacity: 0; }
html.anim .rec-table.in tbody tr {
  animation: rowIn .42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes rowIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 成交记录：只展示部分，底部渐隐收敛 ----------
   2026-10-05：不要「展开全部 30 条」按钮，也不要报具体条数。列表裁到固定高度，
   底部长渐变把末尾几行逐渐收到看不清，观感是「后面还有很多，慢慢淡出去」。
   裁剪与遮罩都挂在 html.js 下：JS 没加载时完整展示，不会出现「裁了却点不开」的死局。 */
.rec-collapse { position: relative; }
html.js .rec-collapse {
  /* 桌面端表头 50px + 每行 51px，560px 正好收在第 10 行下沿，不会横切一行。
     窄屏行高会变，切到哪算哪，下面的渐隐就是用来兜住这种情况的。 */
  --rec-clip: 560px;
  max-height: var(--rec-clip); overflow: hidden;
}
.rec-collapse::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .55) 34%, rgba(255, 255, 255, .95) 76%, #fff 100%);
  opacity: 0; pointer-events: none;
}
html.js .rec-collapse::after { opacity: 1; }

/* ---------- 使命愿景价值观 / 联系方式：悬停抬升 ---------- */
.mvv-item { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mvv-item:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.contact-item .ico { transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.contact-item:hover .ico { background: var(--r2o-red); color: #fff; transform: scale(1.04); }

/* ---------- 按钮箭头：悬停时向右轻推 ---------- */
.btn .arw, .btn-white .arw { transition: transform .22s var(--ease); }
.btn:hover .arw, .btn-white:hover .arw { transform: translateX(4px); }

/* ---------- 回到顶部 ---------- */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--r2o-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(217, 50, 40, .26);
  opacity: 0; pointer-events: none; transform: translateY(12px) scale(.92);
  transition: opacity .28s var(--ease), transform .28s var(--ease), background .2s;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--r2o-red-dark); }

/* ---------- 键盘可达性 ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--r2o-red); outline-offset: 3px; }

@media print {
  .nav, .nav-toggle, .nav-progress, .to-top, .cta-band, .footer, .ticker { display: none; }
  .hero, .pagehead { background: none; }
  body { font-size: 12pt; }
  /* 打印时成交记录要完整，不留裁剪与渐隐遮罩；行也不能停在逐行入场的透明态 */
  html.js .rec-collapse { max-height: none; overflow: visible; }
  .rec-collapse::after { display: none !important; }
  html.anim .rec-table tbody tr { opacity: 1 !important; }
}

/* ---------- 无障碍：尊重系统减动效设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ==================================================================
   2026-11-02 版本压缩 + 卡片悬停详情 + 成交记录合并
   用户口径：模块之间空白太多，页面太长，整体再收 20%；岗位与趋势不要单独成段，
   整合进行业卡与职能卡，鼠标悬停浮出详情；案例与成交记录合并成一份。
   全部是覆盖式追加，不改原有规则，随时可删掉本段回退。
   ================================================================== */

/* ---------- 1. 版面容压缩 ---------- */
.section { padding: clamp(54px, 5.6vw, 76px) 0; }
.section-title { padding-top: 16px; margin-bottom: 10px; }
.section-lead { margin-bottom: 30px; font-size: 15px; line-height: 1.75; }
.group-head { padding: 38px 0 26px; }
.group-head p { margin-top: 9px; }
.hero { padding: 94px 0 74px; }
.spec-subtitle { margin: 34px 0 16px; }
.cov-groups { margin-top: 22px; }
.cov-group { margin-bottom: 13px; }
.cov-row { margin-bottom: 20px; }
.card { padding: 24px 20px; }
.ind-card, .fn-card { padding: 19px 16px; }
.grid { gap: 16px; }
.grid-center { gap: 16px; }
.grid-center > .card { flex: 0 1 calc((100% - 32px) / 3); }
.grid-center-4 { gap: 14px; }
.grid-center-4 > .card { flex: 0 1 calc((100% - 42px) / 4); }
.card-tags { font-size: 12px; line-height: 1.8; }
.quote { margin-top: 26px; }

/* ---------- 2. 卡片悬停详情（行业卡 / 职能卡共用） ---------- */
.has-pop { position: relative; z-index: 1; cursor: default; }
.has-pop:hover, .has-pop:focus-within { z-index: 40; }
.has-pop:focus { outline: none; }
.has-pop:focus-visible { outline: 2px solid var(--r2o-red); outline-offset: 2px; }
.pop {
  position: absolute; left: 50%; top: calc(100% + 10px);
  width: 340px; max-width: 78vw;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 38px rgba(20, 20, 20, .13);
  padding: 13px 15px 14px; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-pop:hover .pop, .has-pop:focus-within .pop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.pop::before {
  content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 10px; height: 10px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.pop-h {
  font-family: var(--font-en); font-size: 10px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--r2o-red); font-weight: 600;
  margin-bottom: 4px;
}
.pop-h + .pop-b { margin-bottom: 11px; }
.pop-b { font-size: 12.5px; line-height: 1.72; color: var(--ink-2); margin: 0 0 11px; }
.pop-b:last-child { margin-bottom: 0; }
.has-pop::after {
  content: "+"; position: absolute; right: 12px; bottom: 9px;
  font-size: 13px; line-height: 1; color: var(--ink-4); opacity: .55;
  transition: color .18s, opacity .18s;
}
.has-pop:hover::after { color: var(--r2o-red); opacity: 1; }
@media (hover: none) {
  .pop { display: none; }
  .has-pop::after { display: none; }
}

/* ---------- 3. 成交记录（按职能分组，替代原来的案例卡与场景卡） ---------- */
.rec-grouped { font-size: 13px; }
.rec-grouped th { padding: 10px 12px; font-size: 12px; }
.rec-grouped td { padding: 9px 12px; }
.rec-grouped td.dc {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  background: #fff; border-right: 1px solid var(--line); white-space: nowrap;
  vertical-align: top; width: 150px;
}
.rec-grouped td.dp { font-weight: 600; color: var(--ink); white-space: nowrap; }
.rec-grouped td.dc2 { color: var(--ink-3); }
.rec-grouped tbody tr:nth-child(even) td { background: transparent; }
.rec-grouped tbody tr:hover td { background: #fff7f6; }
.rec-grouped tbody tr:hover td.dc { background: #fff7f6; }
@media (max-width: 760px) {
  .section { padding: 44px 0; }
  .hero { padding: 72px 0 58px; }
  .rec-grouped { font-size: 12.5px; min-width: 640px; }
  .rec-grouped td.dc { width: 110px; white-space: normal; }
}

/* ==================================================================
   2026-11-02 第三轮：左对齐 · 加宽 · 浮窗条目化 · 字标与 logo
   ================================================================== */

/* ---------- 1. 版心加宽，少换行 ---------- */
:root { --wrap: 1300px; }
.section-lead { max-width: 1080px; }
.hero .hero-sub { max-width: 1000px; }
.group-head p { max-width: 900px; }

/* ---------- 2. 网格左对齐（原来是居中，右侧留空不齐） ---------- */
.grid-center, .grid-center-4 { justify-content: flex-start; }
.grid-center > .card, .grid-center-4 > .card { flex-grow: 0; }

/* ---------- 3. 浮窗：条目化 ---------- */
.has-pop { cursor: pointer; }
.pop { width: 400px; max-width: 82vw; padding: 14px 16px 15px; }
.pop-list {
  list-style: none; margin: 0 0 12px; padding: 0;
  columns: 2; column-gap: 18px;
}
.pop-list li {
  position: relative; padding-left: 12px; font-size: 12px; line-height: 1.75;
  color: var(--ink-2); break-inside: avoid; margin-bottom: 2px;
}
.pop-list li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--r2o-red); opacity: .75;
}
.pop-list:last-child { margin-bottom: 0; }
.pop-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.pop-chips span {
  font-size: 11.5px; line-height: 1; padding: 5px 8px; border-radius: 100px;
  background: var(--r2o-red-soft); color: var(--r2o-red-dark); white-space: nowrap;
}
.pop-chips:last-child { margin-bottom: 0; }

/* ---------- 4. 职能卡里的岗位：要点式 ---------- */
.card-list {
  list-style: none; margin: 2px 0 0; padding: 0;
  columns: 2; column-gap: 14px;
}
.card-list li {
  position: relative; padding-left: 11px; font-size: 12px; line-height: 1.85;
  color: var(--ink-3); break-inside: avoid;
}
.card-list li::before {
  content: ""; position: absolute; left: 1px; top: 8px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--r2o-red); opacity: .6;
}
.card-more { font-size: 11.5px; color: var(--ink-4); margin-top: 8px; }

/* ---------- 5. Ready2Offer 字标：字间距放宽 ---------- */
.nav-logo .txt { letter-spacing: 1.9px; }
.brand-r2o { letter-spacing: .045em; }

/* ---------- 6. Ready2Work：透明 logo + 高盛金融主色 ---------- */
.nav-sb { gap: 8px; }
.nav-sb .sb-mark {
  width: 21px; height: 21px; object-fit: contain; display: block; flex: none;
  opacity: .92; transition: opacity .18s;
}
.nav-sb:hover .sb-mark { opacity: 1; }
.nav-sb .sb-word { color: #002B5C; }
.nav-sb:hover .sb-word { color: #002B5C; opacity: .8; }
.nav-links a.nav-sb-link { color: #002B5C; }
.nav-links a.nav-sb-link:hover,
.nav-links a.nav-sb-link.active { color: #002B5C; background: #E6EEF7; }
.sb-inline { color: #002B5C; }

@media (max-width: 760px) {
  .pop { width: 320px; }
  .pop-list, .card-list { columns: 1; }
}

/* ---------- 2026-11-02 第四轮：Ready2Work 全套换高盛金融主色 + logo 放大 ---------- */
:root {
  --sb-0: #001F4A;                     /* 深 */
  --sb-1: #002B5C;                     /* 主色（高盛金融 Navy） */
  --sb-2: #0E4C8A;                     /* 浅，用于渐变与 hover */
  --sb-soft: #E6EEF7;
  --sb-line: rgba(0, 43, 92, .18);
}
.nav-sb .sb-mark { width: 27px; height: 27px; }
.card-list, .card-more { display: none; }   /* 卡片正文回到行业卡那种逗号段落，不用要点 */