/* ============================================================
   XX传媒 · 设计系统 v8
   依据 landing-page-design：B1 字体/字阶、B2 间距、B3 圆角、
   B4 边框、B5 Hero、B7 动效、B11 主张揭示。
   色值取自 2026 商业简介 PDF 实测：森林绿 / 芥末黄 / 天蓝 / 朱红 / 紫。
   ============================================================ */

/* ---------- 字体：Manrope 自托管，只覆盖拉丁与数字 ---------- */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* 色板 */
  --w: #FFFFFF;
  --w-2: #FAFAF7;
  --ink: #000000;
  --ink-70: rgba(0, 0, 0, .70);
  --ink-48: rgba(0, 0, 0, .48);
  --ink-30: rgba(0, 0, 0, .30);
  --g: #38A848;
  --g-deep: #2C7F38;
  --blue: #48A8F8;
  --red: #E83818;
  --purple: #8848B8;
  --yellow: #E8D850;
  --line: rgba(0, 0, 0, .12);
  --line-strong: rgba(0, 0, 0, .55);

  /* B2 间距 token */
  --s-0: 0;
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* B3 圆角 token */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* B6 动效 token：进出用 ease-out，屏内位移用 ease-io，全屏面板用 drawer 曲线 */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  /* 时长按交互频次定档：越常按越短，越少见到才允许长 */
  --t-press: 130ms;   /* 按钮按下 */
  --t-hover: 180ms;   /* 悬停 / 颜色 / 小范围状态 */
  --t-ui: 240ms;      /* 图标、下划线、导航让位 */
  --t-panel: 420ms;   /* 全屏抽屉 */
  --t-reveal: 520ms;  /* 滚动揭示 */

  --font: "Manrope", "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;

  --pad: 40px;
  --max: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--w);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

p { text-wrap: pretty; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
::selection { background: var(--g); color: var(--ink); }

/* ============================================================
   B1 文本样式：命名即用法，不再就地写 size + weight
   ============================================================ */

/* Heading 1 —— 首屏大标题 */
.heading-1, .mega {
  font-size: 60px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.03em;
}
/* Heading 2 —— 页面标题 */
.heading-2, .h1 {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.025em;
}
/* Heading 3 —— 主张 / 大段陈述 */
.heading-3 {
  font-size: 30px;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -.02em;
}
/* Heading 4 —— 区块标题 */
.heading-4, .h2 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
}
/* Heading 5 —— 卡片标题 */
.heading-5, .h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
}
/* Heading 6 */
.heading-6 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }

/* Title */
.title-1 { font-size: 20px; line-height: 28px; font-weight: 500; }
.title-2, .lead { font-size: 18px; line-height: 28px; font-weight: 500; }
.title-3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.title-4 { font-size: 14px; line-height: 20px; font-weight: 500; }
.title-5 { font-size: 12px; line-height: 16px; font-weight: 500; }

/* Body */
.body-1 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-2 { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-3, .body { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.body-5 { font-size: 14px; line-height: 20px; font-weight: 500; }
.body-6, .body-sm { font-size: 14px; line-height: 20px; font-weight: 400; }

/* Button */
.button-md { font-size: 16px; line-height: 24px; font-weight: 600; }
.button-sm { font-size: 14px; line-height: 20px; font-weight: 600; }

/* Caption */
.caption-1 { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption-2 { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-3 { font-size: 12px; line-height: 16px; font-weight: 600; }
.caption-4, .cap { font-size: 12px; line-height: 16px; font-weight: 500; }
.caption-5 { font-size: 12px; line-height: 16px; font-weight: 400; }

/* 段内正文统一收口：行长 + 断行策略（B1 禁止孤字） */
.body, .body-sm, .lead, .body-1, .body-2, .body-3,
.body-4, .body-5, .body-6 {
  text-wrap: pretty;
}
.heading-1, .heading-2, .heading-3, .heading-4,
.heading-5, .heading-6, .mega, .h1, .h2, .h3 {
  text-wrap: balance;
}

.body { color: var(--ink-70); max-width: 640px; }
.body-sm { color: var(--ink-70); }
.cap { letter-spacing: .08em; color: var(--ink-48); }
.lead { text-wrap: pretty; }

.en {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-48);
  text-transform: uppercase;
}

.head-pair { display: flex; flex-direction: column; gap: var(--s-75); }
.pair-cn { font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.pair-en {
  font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-48); margin-top: var(--s-100);
}

/* 竖排标题（源自简介「合作项目」页） */
.vertical {
  writing-mode: vertical-rl;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
}

/* ============================================================
   布局骨架
   ============================================================ */

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: var(--s-900) 0; }
.sec-tight { padding: var(--s-700) 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--w);
  padding: var(--s-100) var(--s-300);
  font-size: 14px; line-height: 20px; font-weight: 600;
  border-radius: var(--r-md);
}
.skip:focus { left: var(--s-200); top: var(--s-200); }

/* ---------- 彩色细条节奏 ---------- */

.strip { display: flex; height: 8px; }
.strip i { display: block; height: 100%; }
.strip .g { background: var(--g); }
.strip .gd { background: var(--g-deep); }
.strip .b { background: var(--blue); }
.strip .r { background: var(--red); }
.strip .p { background: var(--purple); }
.strip .y { background: var(--yellow); }
.strip .k { background: var(--ink); }

/* ============================================================
   按钮（B2：主按钮 8px / 12px）
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  font-size: 16px; line-height: 24px; font-weight: 600;
  letter-spacing: -.01em;
  border-radius: var(--r-full);
  -webkit-tap-highlight-color: transparent;
  /* 按下必须"立刻"有反应（90ms），松手才允许慢慢回弹（260ms 带一点过冲） */
  transition: background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease),
    transform 260ms cubic-bezier(.34, 1.4, .64, 1);
}
.btn:active {
  transform: scale(.97);
  transition-duration: var(--t-hover), var(--t-hover), 90ms;
  transition-timing-function: var(--ease), var(--ease), ease-out;
}
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.btn-primary { background: var(--ink); color: var(--w); }
.btn-ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn-on-green { background: var(--ink); color: var(--w); }

/* 触屏上 hover 会粘住：只在真鼠标环境让按钮反色 */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--g); color: var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: var(--w); }
  .btn-on-green:hover { background: var(--w); color: var(--ink); }
}

/* ============================================================
   导航：悬浮胶囊（B7）
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: 90;
  padding: var(--s-200) 0 0;
  background: transparent;
  /* 位移由弹簧逐帧写入，这里不能再挂过渡，否则会和弹簧抢同一个值 */
  transform: translate3d(0, 0, 0);
}
.nav[data-hidden="true"] { transform: translateY(-120%); }

/* 材质：默认很薄，只在需要时（内容压到下面）才变厚 */
.nav-in {
  max-width: 1040px;
  height: 64px;
  margin: 0 auto;
  padding: 0 var(--s-300);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--r-full);
  /* 内侧上沿一道亮边 = 光打在材料表面，比描边更像玻璃 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.nav[data-scrolled="true"] .nav-in {
  background: rgba(255, 255, 255, .84);
  border-color: rgba(0, 0, 0, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 30px -18px rgba(0, 0, 0, .45),
    0 2px 8px -6px rgba(0, 0, 0, .22);
}

.brand { display: flex; align-items: center; gap: var(--s-100); }
.brand-mark {
  width: 24px; height: 24px; background: var(--g);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  flex: none;
}
.brand-name {
  display: block;
  font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.02em;
}
.brand-sub {
  display: block;
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .16em; color: var(--ink-48);
}

.nav-links { display: flex; align-items: center; gap: var(--s-400); }
.nav-links > a {
  font-size: 14px; line-height: 20px; font-weight: 500;
  position: relative; padding: var(--s-50) 0;
}
.nav-links > a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-hover) var(--ease);
}
.nav-links > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links > a:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 4px; border-radius: var(--r-sm);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links > a:hover::after { transform: scaleX(1); }
}

.nav-cta { margin-left: var(--s-75); }
.nav-cta a {
  display: inline-block;
  background: var(--g); color: var(--ink);
  padding: var(--s-75) var(--s-200);
  border-radius: var(--r-full);
  font-size: 14px; line-height: 20px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
    transform 260ms cubic-bezier(.34, 1.4, .64, 1);
}
.nav-cta a:active {
  transform: scale(.95);
  transition-duration: var(--t-hover), var(--t-hover), 90ms;
  transition-timing-function: var(--ease), var(--ease), ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta a:hover { background: var(--ink); color: var(--w); }
}

.burger {
  display: none; width: 40px; height: 40px; position: relative;
  border-radius: var(--r-full);
}
.burger i {
  position: absolute; left: 8px; width: 24px; height: 2px;
  background: var(--ink);
  transition: transform var(--t-ui) var(--ease), opacity var(--t-hover) var(--ease);
}
.burger i:nth-child(1) { top: 14px; }
.burger i:nth-child(2) { top: 20px; }
.burger i:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 移动菜单：整屏面板 + 毛玻璃（B7）
   位移由弹簧驱动（JS），这里只负责材质与可见性 */
.drawer {
  position: fixed; inset: 0; z-index: 85;
  background: transparent;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  padding: var(--s-900) var(--pad) var(--s-500);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate3d(0, -100%, 0);
  /* 可见性由 JS 在弹簧落定后切换，这里不能再加延迟，否则会晚 420ms 才消失 */
  visibility: hidden;
}
/* 白色只作为一层可淡出的覆膜，位移越远越薄 —— 面板是"退走"，不是"淡出" */
.drawer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--w);
  opacity: var(--veil, .97);
}
.drawer[data-visible="true"] { visibility: visible; }
.drawer a {
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em;
  padding: var(--s-200) 0;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
  opacity: 0; transform: translateY(-16px);
  /* 收起时清零延迟：面板一抬，链接先退，不让文字被面板一起拖走 */
  transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.drawer[data-open="true"] a {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + 60ms);
}
/* 拖动时不能有任何插值在追赶手指 */
.drawer[data-drag="true"] a { transition-delay: 0s; }

/* ============================================================
   Hero
   ============================================================ */

section[id] { scroll-margin-top: 96px; }

.hero { border-bottom: 2px solid var(--ink); }
.hero-grid {
  display: grid;
  grid-template-columns: 57fr 43fr;
  min-height: calc(100vh - 96px);
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-700) var(--s-600) var(--s-700) var(--s-500);
  padding-left: calc((100vw - var(--max)) / 2 + var(--pad));
}
.hero-right {
  background: var(--w);
  border-left: 2px solid var(--ink);
  display: flex; flex-direction: column;
  position: relative;
}

.hero-eyebrow {
  display: flex; align-items: center; gap: var(--s-100);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em;
  margin-bottom: var(--s-400);
}
.hero-eyebrow span { display: block; width: 40px; height: 2px; background: var(--ink); }

/* B5：标题与副标题同宽 680px；标题文字左深右浅渐变 */
.hero-title {
  max-width: 680px;
  margin-bottom: var(--s-300);
  background-image: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-title .l2 { display: block; }
.hero-title em { font-style: normal; position: relative; }
.hero-title em::after {
  content: "";
  position: absolute;
  left: .02em; right: .02em; bottom: .02em;
  height: .08em;
  background: var(--g);
}

.hero-sub {
  max-width: 680px;
  font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: var(--s-200);
  text-wrap: balance;
}

.hero-desc {
  max-width: 680px;
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--ink-70);
  margin-bottom: var(--s-500);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-100); margin-bottom: var(--s-600); }
.hero-actions .btn { padding: var(--s-100) var(--s-300); }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-500);
  border-top: 1px solid var(--line);
  padding-top: var(--s-300);
}
.hero-facts div b {
  display: block;
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.hero-facts div span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-48); }

/* 首屏入场：只在首次绘制跑一遍，用 CSS 动画走合成线程，不和正在加载的资源抢帧
   透明度先到位、位移后收尾：LCP 元素能早 200ms 被判为已渲染 */
@keyframes rise {
  0% { opacity: 0; transform: translateY(12px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.hero-left > *,
.hero-right,
.page-head .wrap > * {
  /* backwards 而不是 both：延迟期保持起始态即可，收尾后把动画从效果栈上摘掉 */
  animation: rise var(--t-reveal) var(--ease) backwards;
}
.hero-left > :nth-child(1) { animation-delay: 0ms; }
.hero-left > :nth-child(2) { animation-delay: 60ms; }
.hero-left > :nth-child(3) { animation-delay: 110ms; }
.hero-left > :nth-child(4) { animation-delay: 160ms; }
.hero-left > :nth-child(5) { animation-delay: 210ms; }
.hero-left > :nth-child(6) { animation-delay: 260ms; }
.hero-right { animation-delay: 120ms; }
.page-head .wrap > :nth-child(1) { animation-delay: 0ms; }
.page-head .wrap > :nth-child(2) { animation-delay: 60ms; }
.page-head .wrap > :nth-child(3) { animation-delay: 110ms; }
.page-head .wrap > :nth-child(4) { animation-delay: 160ms; }

/* 右侧战报栏 */
.hr-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-200);
  padding: var(--s-400) var(--s-500) var(--s-300);
}
.hr-top .en { color: var(--ink); opacity: .62; line-height: 20px; }
.hr-note {
  padding: 0 var(--s-500);
  font-size: 12px; line-height: 20px; font-weight: 500;
  color: var(--ink-48);
  max-width: 360px;
  text-wrap: pretty;
}
.hr-tag {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em;
  background: var(--ink); color: var(--w);
  padding: var(--s-50) var(--s-100);
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* 战报四格 */
.hr-stats {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-100);
  padding: 0 var(--s-500) var(--s-300);
}
.hr-stat {
  padding: var(--s-300);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s-75);
}
.hr-stat b {
  display: block;
  font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hr-stat span { font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(0, 0, 0, .62); }

.hr-g { background: var(--g); }
.hr-y { background: var(--yellow); }
.hr-b { background: var(--blue); }
.hr-p { background: var(--purple); color: var(--w); }
.hr-p span { color: rgba(255, 255, 255, .78); }

/* 白底版：彩色只作标注，不铺面积。格线用容器背景 + 1px 缝，不用单边描边 */
.hr-stats.flat {
  flex: 1;
  gap: 1px;
  background: var(--line);
  padding: 0;
  margin: 0 var(--s-500) var(--s-300);
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hr-stats.flat .hr-stat {
  background: var(--w);
  color: var(--ink);
  padding: var(--s-300);
  border-radius: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-300);
}
.hr-stats.flat .hr-stat b { font-size: 36px; line-height: 40px; width: 148px; flex: none; }
.hr-stats.flat .hr-stat span { color: var(--ink-48); }
.hr-stats.flat .hr-stat::before {
  content: ""; display: block;
  width: 4px; height: 24px; margin: 0;
  flex: none;
  border-radius: var(--r-full);
}
.hr-stats.flat .hr-g::before { background: var(--g); }
.hr-stats.flat .hr-y::before { background: var(--yellow); }
.hr-stats.flat .hr-p::before { background: var(--purple); }
.hr-stats.flat .hr-b::before { background: var(--blue); }

.hr-strip { border-top: 2px solid var(--ink); }
.hr-foot {
  padding: var(--s-200) var(--s-500) var(--s-400);
  display: flex; align-items: center; gap: var(--s-75); flex-wrap: wrap;
}
.hr-foot .chip {
  font-size: 12px; line-height: 16px; font-weight: 600;
  border-radius: var(--r-full);
  padding: var(--s-25) var(--s-100);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.hr-stats.flat ~ .hr-foot .chip:nth-child(1) { background: var(--g); box-shadow: none; }
.hr-stats.flat ~ .hr-foot .chip:nth-child(2) { background: var(--yellow); box-shadow: none; }
.hr-stats.flat ~ .hr-foot .chip:nth-child(3) { background: var(--purple); color: var(--w); box-shadow: none; }
.hr-stats.flat ~ .hr-foot .chip:nth-child(4) { background: var(--blue); box-shadow: none; }

/* ============================================================
   主张揭示（B11）
   ============================================================ */

.claim { border-bottom: 2px solid var(--ink); }
.claim-in { padding-top: var(--s-900); padding-bottom: var(--s-900); }
.claim-text {
  font-size: 30px; line-height: 1.28; font-weight: 600; letter-spacing: -.02em;
  max-width: 680px;
  margin-top: var(--s-400);
  text-wrap: balance;
}
.claim-text .wd {
  color: rgba(0, 0, 0, .28);
  /* 逐字跟随滚动，尾巴必须短：600ms 会在快速滚动时拖出一条糊尾 */
  transition: color var(--t-ui) var(--ease);
}
.claim-text .wd.on { color: var(--ink); }

/* ============================================================
   业务四块
   ============================================================ */

.biz-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--ink);
  border: 2px solid var(--ink);
  margin-top: var(--s-600);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.biz {
  background: var(--yellow);
  padding: var(--s-400) var(--s-300);
  display: flex; flex-direction: column;
  transition: background-color var(--t-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .biz:hover { background: #EFE070; }
}
.biz-head {
  display: inline-block;
  background: var(--w);
  border-radius: var(--r-full);
  padding: var(--s-50) var(--s-200);
  font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: var(--s-300);
  align-self: flex-start;
}
.biz-num {
  font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-50);
}
.biz-num-lab {
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: rgba(0, 0, 0, .66);
  margin-bottom: var(--s-300);
}
.biz ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-75); }
.biz li {
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--ink-70);
  display: flex; align-items: flex-start; gap: var(--s-75);
}
.biz li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  margin-top: 7px; flex: none; background: var(--g-deep);
}
.biz:nth-child(2) li::before { background: var(--blue); }
.biz:nth-child(3) li::before { background: var(--red); }
.biz:nth-child(4) li::before { background: var(--purple); }

/* ============================================================
   深绿整屏段落
   ============================================================ */

.band {
  background: var(--g-deep);
  color: var(--w);
  border-bottom: 2px solid var(--ink);
}
.band .body, .band .lead { color: rgba(255, 255, 255, .82); }
.band .en, .band .cap { color: rgba(255, 255, 255, .62); }
.band-nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .28);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s-600);
}
.band-num { background: var(--g-deep); padding: var(--s-400) var(--s-300); }
.band-num b {
  display: block;
  font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.band-num span {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 500;
  color: rgba(255, 255, 255, .68);
  margin-top: var(--s-75);
}

/* ============================================================
   合作品牌圆章墙
   ============================================================ */

.logo-wall {
  background: var(--ink);
  border-radius: var(--r-2xl);
  padding: var(--s-500);
  margin-top: var(--s-500);
}
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-100);
}
.logo-item {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--w);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-25);
  text-align: center;
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.01em;
  padding: var(--s-75);
  transition: background-color var(--t-hover) var(--ease);
  color: var(--ink);
  text-wrap: balance;
}
/* 徽章墙不位移：二十多个圆点同时跳动是噪音，变色已经足够指认 */
@media (hover: hover) and (pointer: fine) {
  .logo-item:hover { background: var(--g); }
}
.logo-item small {
  display: block;
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .02em; opacity: .55;
}

/* ============================================================
   案例
   ============================================================ */

.case-tabs { display: flex; gap: var(--s-75); flex-wrap: wrap; margin: var(--s-400) 0 var(--s-500); }
.case-tab {
  padding: var(--s-75) var(--s-300);
  border-radius: var(--r-full);
  font-size: 14px; line-height: 20px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease),
    transform var(--t-press) var(--ease);
}
.case-tab:active { transform: scale(.98); }
.case-tab[aria-pressed="true"] { background: var(--ink); color: var(--w); box-shadow: none; }
.case-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .case-tab:hover:not([aria-pressed="true"]) { background: var(--g); box-shadow: none; }
}

.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-300); }
.case {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-300);
  display: flex; flex-direction: column;
  background: var(--w);
  /* 悬停抬升走 translate（独立的 transform 属性），
     transform 留给筛选时的 FLIP，两者互不打架 */
  transition: translate var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .case:hover {
    translate: 0 -3px;
    border-color: var(--ink);
    background: var(--w-2);
    box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .5);
  }
}
.case-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-100);
  margin-bottom: var(--s-200);
}
.case-cat {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--r-full);
  padding: var(--s-25) var(--s-100);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.case-plat {
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink-48); text-align: right;
}
.case h3 {
  font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em;
  margin-bottom: var(--s-75);
  text-wrap: balance;
}
.case p {
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--ink-70);
  margin-bottom: var(--s-300);
  flex: 1;
  text-wrap: pretty;
}
.case-nums {
  display: flex; gap: var(--s-300);
  border-top: 1px solid var(--line);
  padding-top: var(--s-200);
}
.case-nums div b {
  display: block;
  font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.case-nums div span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-48); }
.case.cat-餐饮 .case-nums div b { color: var(--red); }
.case.cat-商业 .case-nums div b { color: var(--blue); }
.case.cat-文旅 .case-nums div b { color: var(--g-deep); }

.case-note {
  margin-top: var(--s-400);
  font-size: 12px; line-height: 20px; font-weight: 400;
  color: var(--ink-48);
  max-width: 680px;
  text-wrap: pretty;
}

/* ============================================================
   平台资质
   ============================================================ */

.plat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s-600);
}
.plat {
  background: var(--w);
  padding: var(--s-400) var(--s-300);
  display: flex; gap: var(--s-300); align-items: flex-start;
}
.plat-mark {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 24px; font-weight: 600;
  flex: none;
  background: var(--w-2);
}
.plat:nth-child(1) .plat-mark { background: var(--ink); color: var(--w); }
.plat:nth-child(2) .plat-mark { background: var(--red); color: var(--w); }
.plat:nth-child(3) .plat-mark { background: var(--g); }
.plat:nth-child(4) .plat-mark { background: var(--blue); }
.plat:nth-child(5) .plat-mark { background: var(--purple); color: var(--w); }
.plat h3 {
  font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em;
  margin-bottom: var(--s-75);
}
.plat p { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-70); text-wrap: pretty; }
.plat .badge {
  display: inline-block;
  margin-top: var(--s-100);
  font-size: 12px; line-height: 16px; font-weight: 600;
  background: var(--yellow);
  border-radius: var(--r-full);
  padding: var(--s-25) var(--s-100);
}

/* ============================================================
   流程（整卡描边，不用单边线）
   ============================================================ */

.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s-600);
}
.step { background: var(--w); padding: var(--s-300); }
.step-n {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em;
  color: var(--ink-48);
  margin-bottom: var(--s-200);
}
.step h3 {
  font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em;
  margin-bottom: var(--s-75);
}
.step p { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-70); text-wrap: pretty; }

/* ============================================================
   FAQ
   ============================================================ */

.faq { margin-top: var(--s-500); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-300);
  padding: var(--s-300) 0;
  cursor: pointer; list-style: none;
  font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 24px; line-height: 24px; font-weight: 400;
  flex: none;
  transition: transform var(--t-ui) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans {
  padding-bottom: var(--s-300);
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--ink-70);
  max-width: 680px;
  text-wrap: pretty;
}

/* ============================================================
   收口 CTA
   ============================================================ */

.final {
  background: var(--yellow);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.final-in { padding-top: var(--s-900); padding-bottom: var(--s-900); }
.final h2 {
  font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em;
  max-width: 680px;
  margin-bottom: var(--s-300);
  text-wrap: balance;
}
.final p {
  font-size: 18px; line-height: 28px; font-weight: 400;
  margin-bottom: var(--s-500);
  max-width: 680px;
  text-wrap: pretty;
}
.final-actions { display: flex; flex-wrap: wrap; gap: var(--s-200); align-items: center; }
.final-actions .btn { padding: var(--s-100) var(--s-300); }
.final-actions .note { font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(0, 0, 0, .64); }

/* ============================================================
   页脚
   ============================================================ */

.foot { background: var(--ink); color: var(--w); padding: var(--s-700) 0 var(--s-400); }
.foot-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-600);
  margin-bottom: var(--s-700);
}
.foot .brand-name { color: var(--w); }
.foot .brand-sub { color: rgba(255, 255, 255, .45); }
.foot p {
  font-size: 14px; line-height: 24px; font-weight: 400;
  color: rgba(255, 255, 255, .58);
  margin-top: var(--s-200);
  max-width: 360px;
  text-wrap: pretty;
}
.foot h4 {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em;
  color: rgba(255, 255, 255, .45);
  margin-bottom: var(--s-200);
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-100); }
.foot ul a {
  font-size: 14px; line-height: 20px; font-weight: 500;
  color: rgba(255, 255, 255, .8);
  transition: color var(--t-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .foot ul a:hover { color: var(--g); }
}
.foot-bot {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: var(--s-300);
  display: flex; justify-content: space-between; gap: var(--s-300); flex-wrap: wrap;
  font-size: 12px; line-height: 20px; font-weight: 400;
  color: rgba(255, 255, 255, .45);
}
.foot-bot a { color: rgba(255, 255, 255, .45); transition: color var(--t-hover) var(--ease); }
/* 备案号不能断行：管局核查看的是完整一行 */
.foot-bot .icp { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .foot-bot a:hover { color: var(--w); }
}

/* ============================================================
   表单
   ============================================================ */

.form-card {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--s-500);
  background: var(--w);
}
.fg { margin-bottom: var(--s-300); }
.fg label {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 600;
  margin-bottom: var(--s-75);
}
.fg label span { color: var(--red); }
.fg input, .fg select, .fg textarea {
  width: 100%;
  padding: var(--s-100) var(--s-200);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--w);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; line-height: 24px; font-weight: 400;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--ink-48); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(56, 168, 72, .35);
}
.fg textarea { min-height: 120px; resize: vertical; }
.fg .err {
  display: none;
  font-size: 12px; line-height: 16px; font-weight: 600;
  color: var(--red);
  margin-top: var(--s-75);
}
.fg.invalid input, .fg.invalid textarea { border-color: var(--red); }
.fg.invalid .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-200); }
.form-submit {
  width: 100%;
  padding: var(--s-100) var(--s-300);
  border-radius: var(--r-full);
  background: var(--ink); color: var(--w);
  font-size: 16px; line-height: 24px; font-weight: 600;
  transition: background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease),
    transform 260ms cubic-bezier(.34, 1.4, .64, 1);
  -webkit-tap-highlight-color: transparent;
}
.form-submit:active {
  transform: scale(.97);
  transition-duration: var(--t-hover), var(--t-hover), 90ms;
  transition-timing-function: var(--ease), var(--ease), ease-out;
}
.form-submit:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.form-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .form-submit:hover:not(:disabled) { background: var(--g); color: var(--ink); }
}
.form-note {
  font-size: 12px; line-height: 20px; font-weight: 400;
  color: var(--ink-48);
  margin-top: var(--s-200);
  text-align: center;
  text-wrap: pretty;
}

/* ============================================================
   联系信息
   ============================================================ */

.ci-list {
  display: flex; flex-direction: column;
  margin-top: var(--s-500);
  border-top: 1px solid var(--line);
}
.ci {
  display: grid; grid-template-columns: 96px 1fr;
  gap: var(--s-300);
  padding: var(--s-300) 0;
  border-bottom: 1px solid var(--line);
}
.ci dt {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  color: var(--ink-48);
  padding-top: var(--s-25);
}
.ci dd {
  font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -.01em;
  text-wrap: pretty;
}
.ci dd small {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--ink-70);
  margin-top: var(--s-25);
}

/* ============================================================
   揭示动画（B7）
   ============================================================ */

/* 短块统一平衡断行，消除末行只剩一两个字 */
.case-note, .svc-points li, .plat p, .step p, .awards div,
.ci dd small, .hr-note, .svg p, .form-note, .foot p {
  text-wrap: balance;
}

.rv {
  opacity: 0; transform: translateY(24px);
  /* --i 由 JS 按同一批进入的顺序写入：同时入场时错开 45ms，避免整块一起弹 */
  transition: opacity var(--t-reveal) var(--ease) calc(var(--i, 0) * 45ms),
    transform var(--t-reveal) var(--ease) calc(var(--i, 0) * 45ms);
}
.rv.in { opacity: 1; transform: none; }

/* ============================================================
   提示条
   ============================================================ */

.toast-wrap {
  position: fixed; left: 50%; bottom: var(--s-400);
  transform: translateX(-50%); z-index: 300;
  display: flex; flex-direction: column; gap: var(--s-75);
}
.toast {
  background: var(--ink); color: var(--w);
  padding: var(--s-100) var(--s-300);
  border-radius: var(--r-full);
  font-size: 14px; line-height: 20px; font-weight: 500;
  opacity: 0; transform: translateY(12px);
  /* 入退场由弹簧逐帧写入，这里不能再挂过渡，否则会多拖一层 */
  will-change: opacity, transform;
}
.toast.on { opacity: 1; transform: none; }

/* ============================================================
   字阶上阶：只在断点上换档，中间不插任意值
   ============================================================ */


/* ============================================================
   内页组件：页头 / 服务条目 / 对比表 / 时间轴 / 奖项
   全部沿用同一套 token，不新增裸值
   ============================================================ */

.page-head {
  padding: var(--s-900) 0 var(--s-800);
  border-bottom: 2px solid var(--ink);
}
.page-head h1 { max-width: 680px; margin-top: var(--s-200); }
.page-head .lead { max-width: 680px; margin-top: var(--s-300); color: var(--ink-70); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: var(--s-100); margin-top: var(--s-500); }
.page-head-actions .btn { padding: var(--s-100) var(--s-300); }

/* 服务条目：序号 / 说明 / 交付清单 */
.svc-list { margin-top: var(--s-600); border-top: 1px solid var(--line); }
.svc-row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: var(--s-500);
  padding: var(--s-500) 0;
  border-bottom: 1px solid var(--line);
}
.svc-row h3 {
  font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.015em;
  margin-bottom: var(--s-75);
  text-wrap: balance;
}
.svc-row .en { margin-top: var(--s-75); }
.svc-row p {
  font-size: 16px; line-height: 28px; font-weight: 400;
  color: var(--ink-70);
  max-width: 560px;
  text-wrap: pretty;
}
.svc-points { list-style: none; display: flex; flex-direction: column; gap: var(--s-75); }
.svc-points li {
  position: relative;
  padding-left: var(--s-200);
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--ink-70);
}
.svc-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--g);
}

/* 对比表 */
.cmp {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s-600);
}
.cmp-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
}
.cmp-row > * {
  background: var(--w);
  padding: var(--s-200) var(--s-300);
  font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--ink-70);
}
.cmp-head > * {
  background: var(--ink); color: var(--w);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em;
}
.cmp-row b { font-weight: 600; color: var(--ink); }
.cmp .new { color: var(--ink); font-weight: 600; background: rgba(56, 168, 72, .12); }

/* 深色带里的对比表 */
.band .cmp { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .24); }
.band .cmp-row { background: rgba(255, 255, 255, .24); }
.band .cmp-row > * { background: var(--g-deep); color: rgba(255, 255, 255, .86); }
.band .cmp-head > * { background: rgba(255, 255, 255, .16); color: var(--w); }
.band .cmp-row b { color: var(--w); }
.band .cmp .new { color: var(--w); background: rgba(255, 255, 255, .16); }

/* 两栏：正文 + 旁注 */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-800);
  align-items: start;
}
@media (min-width: 1081px) {
  .split.split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.split p + p { margin-top: var(--s-300); }
.split .body { max-width: 620px; font-size: 16px; line-height: 28px; }

/* 信念卡 */
.belief {
  background: var(--ink); color: var(--w);
  border-radius: var(--r-2xl);
  padding: var(--s-500);
}
.belief h3 {
  font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.015em;
  margin-bottom: var(--s-300);
  text-wrap: balance;
}
.belief p { font-size: 16px; line-height: 28px; font-weight: 400; color: rgba(255, 255, 255, .78); text-wrap: pretty; }

/* 时间轴 */
.tl { margin-top: var(--s-600); border-top: 1px solid var(--line); }
.tl-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-400);
  padding: var(--s-300) 0;
  border-bottom: 1px solid var(--line);
}
.tl-row dt {
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
}
.tl-row dd { font-size: 16px; line-height: 28px; font-weight: 400; text-wrap: pretty; }
.tl-row dd b { font-weight: 600; }

/* 奖项 / 资质清单 */
.awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--s-600);
}
.awards div {
  background: var(--w);
  padding: var(--s-300);
  display: flex; gap: var(--s-200); align-items: flex-start;
  font-size: 14px; line-height: 20px; font-weight: 400;
}
.awards span {
  font-size: 12px; line-height: 16px; font-weight: 600;
  color: var(--ink-48);
  font-variant-numeric: tabular-nums;
  padding-top: var(--s-25);
  flex: none;
}

.cta-band { background: var(--yellow); border-top: 2px solid var(--ink); padding: var(--s-800) 0; }
.cta-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--s-600); align-items: center;
}
.cta-band h2 { max-width: 680px; margin-bottom: var(--s-200); }
.cta-band p { max-width: 680px; font-size: 18px; line-height: 28px; font-weight: 400; }

@media (min-width: 640px) {
  .heading-1, .mega { font-size: 72px; letter-spacing: -.032em; }
  .heading-2, .h1 { font-size: 48px; letter-spacing: -.028em; }
  .heading-3 { font-size: 36px; line-height: 1.2; }
  .heading-4, .h2 { font-size: 36px; line-height: 1.15; }
  .final h2 { font-size: 48px; }
  .claim-text { font-size: 36px; }
  .hr-stat b, .hr-stats.flat .hr-stat b { font-size: 48px; line-height: 48px; }
  .hr-stats.flat .hr-stat b { width: 160px; }
  .band-num b { font-size: 60px; line-height: 60px; }
}

@media (min-width: 1024px) {
  .heading-1, .mega { font-size: 96px; letter-spacing: -.036em; }
  .heading-2, .h1 { font-size: 60px; letter-spacing: -.032em; }
  .heading-3 { font-size: 48px; line-height: 1.1; }
  .final h2 { font-size: 60px; }
  .claim-text { font-size: 48px; line-height: 1.12; }
  .hr-stat b, .hr-stats.flat .hr-stat b { font-size: 60px; line-height: 60px; }
  .hr-stats.flat .hr-stat b { width: 204px; }
}

@media (min-width: 1280px) {
  /* 字越大，字距越要收紧：一档字距走全站是错的 */
  .heading-1, .mega { font-size: 128px; letter-spacing: -.042em; }
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1080px) {
  :root { --pad: 32px; }
  .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .nav-in { height: 56px; padding: 0 var(--s-200); }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-left { padding: var(--s-600) var(--pad); }
  .hero-right { border-left: 0; border-top: 2px solid var(--ink); }
  .hr-stats, .hr-stats.flat { margin: var(--s-200) var(--pad) var(--s-300); }
  .hr-top, .hr-note, .hr-foot { padding-left: var(--pad); padding-right: var(--pad); }
  .band-nums { grid-template-columns: 1fr; }
  .plat-grid { grid-template-columns: 1fr; }
  .sec { padding: var(--s-700) 0; }
  .claim-in { padding-top: var(--s-700); padding-bottom: var(--s-700); }
  .final-in { padding-top: var(--s-700); padding-bottom: var(--s-700); }
  .form-card { padding: var(--s-300); }
  .logo-wall { padding: var(--s-300); border-radius: var(--r-xl); }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-75); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-500); }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .heading-1, .mega { font-size: 60px; }
  .heading-2, .h1 { font-size: 30px; }
  .heading-4, .h2 { font-size: 24px; }
  .claim-text { font-size: 24px; line-height: 1.3; }
  .biz-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-facts { gap: var(--s-300); }
  .hero-facts div b { font-size: 24px; line-height: 32px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .final-actions { flex-direction: column; align-items: flex-start; }
  .final-actions .btn { width: 100%; }
  .ci { grid-template-columns: 1fr; gap: var(--s-25); }
  .logo-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .hr-stats.flat { margin-left: var(--pad); margin-right: var(--pad); }
  .hr-stats.flat .hr-stat { padding: var(--s-200); gap: var(--s-200); }
  .hr-stats.flat .hr-stat b { width: 104px; }
  .hr-stats.flat .hr-stat span { text-wrap: pretty; }
  .hr-stat b, .hr-stats.flat .hr-stat b { font-size: 30px; line-height: 36px; }
  .hr-stat span, .hr-stats.flat .hr-stat span { font-size: 12px; line-height: 16px; }
  .step h3, .plat h3, .case h3 { font-size: 18px; line-height: 28px; }
  .belief h3 { font-size: 20px; line-height: 28px; }
}


@media (max-width: 1080px) {
  .svc-row { grid-template-columns: 220px minmax(0, 1fr); }
  .svc-row .svc-points { grid-column: 2; }
  .split { grid-template-columns: 1fr; gap: var(--s-500); }
  .cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .page-head { padding: var(--s-700) 0 var(--s-600); }
  .svc-row { grid-template-columns: 1fr; gap: var(--s-200); padding: var(--s-400) 0; }
  .svc-row .svc-points { grid-column: 1; }
  .cmp-row { grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-row > * { padding: var(--s-100); font-size: 12px; line-height: 16px; }
  .awards { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: var(--s-75); }
}

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

  /* 减动不是关动：砍掉位移与缩放，保留颜色/透明度的即时反馈 */
  .hero-left > *, .hero-right, .page-head .wrap > * { animation: none; }

  .btn, .form-submit, .nav, .burger i, .nav-links > a::after, .nav-cta a,
  .drawer, .drawer[data-open="true"],
  .drawer a, .drawer[data-open="true"] a,
  .case, .logo-item, .biz, .case-tab, .toast, .rv {
    transition-property: opacity, background-color, color, border-color, box-shadow;
    transition-duration: var(--t-hover);
    transition-delay: 0s;
  }

  .rv, .drawer a, .hero-left > *, .hero-right, .page-head .wrap > * {
    opacity: 1; transform: none;
  }
  .claim-text .wd { color: var(--ink); }
  /* 减动不等于没反馈：悬停抬升改成直接到位，不再做位移动画 */
  .case { translate: none; }
}

/* 降低透明度：把玻璃换成实心白，模糊一并关掉 —— 毛玻璃在弱视/光敏下是干扰 */
@media (prefers-reduced-transparency: reduce) {
  .nav-in {
    background: var(--w);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line);
  }
  .drawer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .drawer::before { opacity: 1; }
}

/* 提高对比度：不靠模糊，靠边界和实底 */
@media (prefers-contrast: more) {
  .nav-in {
    background: var(--w);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 2px solid var(--ink);
  }
  .nav-links > a { font-weight: 600; }
  .drawer::before { opacity: 1; }
  .case { border-color: var(--ink); }
}