/* ============================================================================
 * main.css — 布局与组件样式
 * ========================================================================== */

/* ---- 基础重置 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 对齐参考站：其 body 未设 line-height（默认 normal）；此前 1.5 使继承行高的文本
     （顶栏品牌名等）整体高几像素，与设计稿总是差几个像素 */
  line-height: normal;
}
p { margin: 0; }
img { display: block; max-width: 100%; }
a, button { color: inherit; font-family: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 键盘焦点（全站统一蓝环） */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* 屏幕阅读器专用 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转主内容（键盘可达） */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--on-blue);
  background: var(--blue);
  transform: translateY(-160%);
  transition: transform 180ms ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* 页面骨架：顶栏 + 视图 + 页脚 */
.site-shell { min-height: 100vh; display: flex; flex-direction: column; overflow: clip; }
.site-shell > main { flex: 1; }

/* ==========================================================================
 * 顶栏（全站共用）
 * ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 0 24px;
  color: var(--dark-text);
  background: var(--dark-bg);
  border-bottom: 1px solid var(--dark-line);
  transition: box-shadow var(--dur) ease-out;
}
.site-header.is-scrolled { box-shadow: var(--shadow-header); }

.brand {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--dark-text);
  text-decoration: none;
  font-weight: 900;
  font-size: var(--fs-brand);
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand img {
  width: 50px; height: 50px;
  object-fit: contain;
  transition: transform 500ms var(--ease-riot);
}
.brand:hover img, .brand:focus-visible img { transform: scale(1.06) rotate(-1.5deg); }

.business-nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(18px, 2.6vw, 42px);
}
.business-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-tab);
  color: var(--dark-text-2);
  font-size: var(--fs-nav);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  /* 消失即时：基础态无 transition，移出 hover / 取消 active 直接归位 */
}
.business-nav a::after {
  content: "";
  position: absolute;
  right: 0; left: 0;
  bottom: -13px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  /* 消失即时：基础态无 transition，取消 active 时下划线直接消失 */
}
.business-nav a:hover, .business-nav a:focus-visible {
  color: var(--dark-text); background: var(--dark-hover);
  transition: color var(--dur), background-color var(--dur);
}
.business-nav a.active {
  color: var(--dark-text); background: var(--dark-active);
  transition: color var(--dur), background-color var(--dur);
}
.business-nav a.active::after {
  transform: scaleX(1);
  transform-origin: left;
  /* 蓝色条条无动画：出现/消失都瞬时 */
}

.ai-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-ai);
  color: var(--on-blue);
  background: var(--blue);
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-ai);
  transition: background-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease-riot);
}
.ai-button svg { width: 17px; height: 17px; flex: none; }
.ai-button:hover, .ai-button:focus-visible {
  background: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-ai-hover);
}

/* ==========================================================================
 * 首页 · 推荐能力轮播
 * ========================================================================= */
.feature-hero {
  position: relative;
  color: var(--dark-text);
  background: var(--dark-stage);
  border-bottom: 1px solid var(--dark-line-strong);
}
.feature-stage { position: relative; height: clamp(330px, 28vw, 440px); overflow: hidden; }
.feature-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  /* 对齐设计师站（ux-center）：旧图 550ms 淡出（交叉淡入淡出）+ 新图 1000ms ease-riot 缩放落定 */
  transition: opacity 550ms ease-out, visibility 550ms, transform 1000ms var(--ease-riot);
}
.feature-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.feature-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(22px);
  transform: scale(1.08);
}
.feature-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
}
.feature-slide::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--dark-scrim); }
.feature-slide::after { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 -130px 100px -72px var(--dark-vignette); }
.feature-copy { position: absolute; inset: 0; z-index: 3; padding: 24px; text-align: center; }
.feature-copy-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100% - 48px));
}
.feature-copy-text .eyebrow { display: inline; color: inherit; margin-bottom: 0; }
.feature-copy-text h1 {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
}
.feature-copy-text p {
  margin: 18px 0 0;
  font-size: var(--fs-hero-p);
  font-weight: 700;
  color: var(--dark-text-2);
}
.feature-action {
  position: absolute;
  top: calc(50% + 112px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  color: var(--on-blue);
  background: var(--blue);
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease-riot);
}
.feature-action svg { width: 14px; height: 14px; flex: none; transition: transform 300ms var(--ease-riot); }
.feature-action:hover, .feature-action:focus-visible { background: var(--blue-deep); box-shadow: var(--shadow-pill-hover); }
.feature-action:hover { transform: translateX(-50%) translateY(-2px); }
.feature-action:hover svg { transform: translateX(5px); }

.feature-tabs {
  position: relative;
  z-index: 5;
  max-width: var(--w-tabs);
  min-height: 88px;
  margin: 0 auto;
  padding: 0 34px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}
.feature-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  padding: 0 12px;
  background: transparent;
  color: var(--dark-text-3);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  white-space: nowrap;
  /* 消失即时：基础态无 transition，切走 / 移出 hover 直接归位 */
}
.feature-tabs button > span { font-size: var(--fs-small); color: rgb(255 255 255 / 74%); }
.feature-tabs button::after {
  content: "";
  position: absolute;
  right: 14px; left: 14px;
  bottom: 14px;
  height: 4px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right center;
  /* 简单切换：无 transition（对齐 leihuo-ux-center-site 参考稿），选中态瞬时出现，不拖尾 */
}
.feature-tabs button:hover, .feature-tabs button:focus-visible {
  color: var(--dark-text); background: rgb(255 255 255 / 4%);
  transition: color var(--dur), background-color var(--dur);
}
.feature-tabs button.is-active {
  color: var(--dark-text); background: rgb(255 255 255 / 4%);
  transition: color var(--dur), background-color var(--dur);
}
.feature-tabs button.is-active::after { transform: scaleX(1); transform-origin: left center; }

/* ==========================================================================
 * 首页 · 眉批 / 团队介绍
 * ========================================================================= */
.eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--blue);
}

.center-intro {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: clamp(43px, 4.5vw, 72px) 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(380px, .84fr);
  gap: clamp(54px, 7vw, 112px);
  align-items: center;
  scroll-margin-top: 96px;
}
.center-media {
  position: relative;
  overflow: hidden;
  background: #161616;
  box-shadow: var(--sticker-shadow);
}
.center-media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--media-ring); pointer-events: none; }
.center-media img {
  width: 100%;
  aspect-ratio: 1400 / 787;
  object-fit: cover;
  transition: transform 1100ms var(--ease-riot);
}
.center-media:hover img { transform: scale(1.025); }
.center-copy h1 {
  margin: 0;
  font-size: var(--fs-intro-h1);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.055em;
}
.center-copy p:last-of-type { margin: 26px 0 30px; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.85; font-weight: 600; }
.center-copy a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding: 0 18px;
  color: #fff;
  background: #111;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  transition: background-color var(--dur), transform var(--dur) var(--ease-riot);
}
.center-copy a svg { width: 14px; height: 14px; flex: none; transition: transform 300ms var(--ease-riot); }
.center-copy a:hover, .center-copy a:focus-visible { background: var(--blue); transform: translateY(-2px); }
.center-copy a:hover svg { transform: translateX(5px); }

/* ==========================================================================
 * 首页 · 业务能力介绍（5 张斜切卡）
 * ========================================================================= */
.businesses-section {
  padding: clamp(37px, 4vw, 63px) max(44px, calc((100vw - 1320px) / 2 + 56px)) clamp(46px, 4.5vw, 73px);
  background: var(--paper);
  scroll-margin-top: 84px;
}
.businesses-heading {
  text-align: center;
  margin-bottom: 34px;
}
.businesses-heading h2 {
  margin: 0;
  font-size: clamp(42px, 4.6vw, 72px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.06em;
}
.business-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.business-card:nth-child(even) { margin-top: 34px; }
.business-card {
  position: relative;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.business-card-media {
  position: relative;
  height: clamp(280px, 27vw, 430px);
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background: var(--paper);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.business-card-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: inherit;
  background: rgb(0 0 0 / 24%);
  pointer-events: none;
  /* 消失即时：基础态无 transition，移出 hover 时暗罩直接归位 */
}
.business-card-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 居中 transform 缩放：边缘始终被 clip-path 等距裁掉，不用 top/left/width/height 位移
     → 不扫边、不出框、不拖尾；消失即时：移出 hover 直接归位 */
  transform: scale(1.02);
}
.business-card:hover .business-card-media img,
.business-card:focus-visible .business-card-media img {
  transform: scale(1.07);
  transition: transform 320ms ease-out;
}
.business-card:hover .business-card-media::after,
.business-card:focus-visible .business-card-media::after {
  background: rgb(0 0 0 / 12%);
  transition: background-color var(--dur) ease-out;
}
.business-card-index {
  position: absolute;
  z-index: 2;
  right: 13%;
  bottom: 14px;
  color: rgb(255 255 255 / 80%);
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: .16em;
}
.business-card-copy { padding: 22px 16px 0 13%; }
.business-card-copy > svg { width: 18px; height: 18px; margin-bottom: 18px; color: var(--ink-muted); }
.business-card-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-muted);
  font-size: var(--fs-mini);
  font-weight: 900;
  letter-spacing: .16em;
}
.business-card-copy h3 {
  margin: 0;
  font-size: var(--fs-biz-h3);
  line-height: 1.18;
  font-weight: 900;
  white-space: nowrap;
}
.business-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--blue);
  font-size: var(--fs-small);
  font-weight: 900;
}
.business-card-link svg { width: 14px; height: 14px; flex: none; }
.business-card:hover .business-card-link svg,
.business-card:focus-visible .business-card-link svg {
  transform: translateX(5px);
  transition: transform var(--dur) ease-out;
}

/* ==========================================================================
 * 首页 · 已服务项目（黑色区块，logo 墙平铺）
 * ========================================================================= */
.home-projects-section {
  padding: clamp(36px, 3.5vw, 56px) max(44px, calc((100vw - 1320px) / 2 + 56px)) clamp(31px, 3vw, 46px);
  color: var(--dark-text);
  background: var(--dark-bg);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.home-projects-section h2 {
  margin: 0 0 clamp(38px, 4vw, 58px);
  text-align: center;
  font-size: clamp(42px, 4.6vw, 72px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.06em;
}
.projects-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 42px);
}
.projects-view { flex: 1 1 0%; min-width: 0; }
.projects-list {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: center;
  gap: clamp(18px, 2.4vw, 42px);
  max-width: 1240px;
  margin: 0 auto;
}
.projects-list:not(.is-active) { display: none; }   /* 翻页器只显示当前页（JS 分页铺 ul） */
.projects-list li {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  border-radius: 18%;
  outline: none;
  transition: transform 240ms var(--ease-riot);
}
.projects-list img {
  width: 100%;
  max-width: 92px;
  aspect-ratio: 1;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 18%;
  box-shadow: 0 12px 30px rgb(0 0 0 / 34%);
}
.projects-list li:hover { transform: translateY(-5px); }
.projects-list li:focus-visible { box-shadow: 0 0 0 3px var(--blue); }
/* hover 显示项目名 tooltip（对齐 leihuo-ux-center-site 设计稿交互；出现有动画、消失即时） */
.projects-list .home-project-name {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 14px);
  left: 50%;
  width: max-content;
  max-width: 180px;
  padding: 8px 12px;
  color: #101010;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 38%);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
}
.projects-list .home-project-name::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.projects-list li:hover .home-project-name,
.projects-list li:focus-visible .home-project-name {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 160ms ease, transform 160ms ease-out;
}
.projects-nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 10%);
  color: #fff;
  cursor: pointer;
  transition: border-color var(--dur), background-color var(--dur), color var(--dur), transform var(--dur) var(--ease-riot);
}
.projects-nav svg { width: 20px; height: 20px; }
.projects-nav:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--on-blue);
  transform: translateY(-1px);
}
.projects-nav:disabled { opacity: .4; cursor: default; }
.projects-pager.is-single .projects-nav { display: none; }   /* 单页时箭头隐藏 */

/* ==========================================================================
 * 详情页 · hero（标题 + 品牌水印）
 * ========================================================================= */
.data-hero {
  position: relative;
  height: clamp(126px, 9vw, 148px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-data-hero);
  border-bottom: 1px solid var(--dark-line-hero);
}
.data-hero-background {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  z-index: 0;
  width: min(1040px, 78vw);
  opacity: .15;
  filter: grayscale(1) brightness(3.2);
  pointer-events: none;
}
.data-hero-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--dark-text);
}
.data-hero-title-cn { font-size: var(--fs-page-hero-cn); line-height: .9; font-weight: 900; letter-spacing: -.06em; }
.data-hero-title-en { margin-top: 8px; font-size: var(--fs-page-hero-en); line-height: 1; font-weight: 800; letter-spacing: .32em; color: var(--dark-text-2); }

.data-page-body { padding: 6px 56px 16px; background: var(--paper); }
.data-intro-copy {
  margin: 0 0 18px;
  text-align: center;
  font-size: var(--fs-intro-copy);
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: .015em;
}
.data-section-title {
  width: fit-content;
  margin: 0 auto 14px;
  text-align: center;
  font-size: var(--fs-section-title);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.035em;
}
.data-services-section { scroll-margin-top: 104px; }

/* 我们能帮你做 · 服务卡 */
.data-services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.data-service-card {
  position: relative;
  flex: 0 1 clamp(240px, 24vw, 280px);
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  /* 消失即时：基础态无 transition，移出 hover 直接归位 */
}
.data-service-card:hover, .data-service-card:focus-within {
  border-color: var(--line-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur), transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.data-service-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}
.data-service-card:hover::after, .data-service-card:focus-within::after {
  transform: scaleX(1);
  /* 蓝色条条无动画：hover 出现/移出都瞬时 */
}
.data-service-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--service-media-bg, var(--media-placeholder));
}
.data-service-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--image-position, 50% 50%);
  transform: scale(1.005);
  /* 消失即时：基础态无 transition，移出 hover 直接归位 */
  will-change: transform;
}
.data-service-card:hover .data-service-media img, .data-service-card:focus-within .data-service-media img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
  transition: transform 320ms ease-out, filter 320ms ease-out;
}
/* 无配图服务的文字卡：媒体区 = 品牌蓝淡染 + 首字 monogram（不伪造图片） */
.data-service-media--fallback {
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 56px;
  font-weight: 900;
  user-select: none;
}
.data-service-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px 14px;
}
.data-service-content h3 {
  margin: 0 0 7px;
  font-size: var(--fs-service-h3);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.data-service-content p { margin: 0 0 8px; color: #626262; font-size: var(--fs-tiny); line-height: 1.35; }
.data-demand-button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 29px;
  padding: 0 10px 0 14px;
  border-radius: var(--radius-pill);
  color: var(--on-blue);
  background: var(--blue);
  font-size: var(--fs-tiny);
  font-weight: 900;
  text-decoration: none;
}
.data-demand-button svg { width: 11px; height: 11px; flex: none; }
.data-demand-button:hover, .data-demand-button:focus-visible {
  background: var(--blue-deep);
  transform: translateY(-1px);
  transition: background-color var(--dur), transform var(--dur) ease-out;
}
.data-demand-button:hover svg, .data-demand-button:focus-visible svg {
  transform: translateX(4px);
  transition: transform var(--dur) ease-out;
}

/* 业务介绍 · 首字下沉（颜色/纹理由 platforms.json 按分类注入 --dropcap-*） */
.data-who-we-are { max-width: var(--w-who); margin: 0 auto; padding: clamp(37px, 4vw, 58px) 0; }
.data-who-we-are-copy > p { margin: 24px auto 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.85; font-weight: 600; }
.data-who-we-are-copy > p + p { margin-top: 0; }
.data-who-we-are-copy > p::after { content: ""; display: table; clear: both; }
/* 无 who 文案时直出 detail HTML（内部受信内容，不转义） */
.data-who-body {
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.85;
  font-weight: 600;
}
.data-who-body p { margin: 0 0 1em; }
.data-who-body p:last-child { margin-bottom: 0; }

.data-who-we-are-initial {
  float: left;
  width: 78px; height: 78px;
  display: grid;
  place-items: center;
  margin: 5px 20px 7px 0;
  overflow: hidden;
  border: 1px solid var(--dropcap-line, var(--blue-deep));
  background-color: var(--dropcap-bg, var(--blue));
  background-image: var(--dropcap-pattern, none);
  background-position: 50% 50%;
  background-size: cover;
  color: #fff;
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 2px 0 var(--dropcap-shadow, var(--data-dropcap-shadow));
}

/* ==========================================================================
 * 页脚
 * ========================================================================= */
.site-footer {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 54px;
  color: var(--dark-text-2);
  background: var(--dark-bg);
  font-size: 13px;
}
.site-footer p { margin: 0; text-align: right; }

/* ==========================================================================
 * 滚动渐显（data-reveal → is-visible，JS 控制）
 * ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px); /* 10px < 服务卡网格 gap(14px) → 入场位移不叠出框架（不超框） */
  /* 简单渐显：去掉 720ms --ease-riot 长缓动，改快速 ease-out（切页/滚动入场不再拖泥带水） */
  transition: opacity var(--dur-reveal) ease-out, transform var(--dur-reveal) ease-out;
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
 * 响应式（1160 / 860 / 620 / 420）
 * ========================================================================= */
@media (max-width: 1160px) {
  .site-header { grid-template-columns: auto 1fr auto; gap: 16px; }
  .brand span { display: none; }
  .business-nav { gap: clamp(14px, 2.1vw, 28px); }
  .business-cards { grid-template-columns: repeat(3, 1fr); gap: 32px 0; }
  .business-card:nth-child(even) { margin-top: 26px; }
  .business-card-media { height: 360px; }
  .data-service-content { padding-inline: 14px; }
  .data-service-content h3 { font-size: 19px; }
  .data-service-content p { font-size: 10px; }
}

@media (max-width: 860px) {
  .site-header { min-height: 74px; padding-inline: 16px; }
  .brand img { width: 45px; height: 45px; }
  .business-nav {
    height: 74px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .business-nav::-webkit-scrollbar { display: none; }
  .business-nav a::after { bottom: -9px; }
  .ai-button { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .ai-button span { display: none; }

  .feature-stage { height: 340px; }
  .feature-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(170px, 1fr));
    padding-inline: 12px;
    scrollbar-width: none;
  }
  .feature-tabs::-webkit-scrollbar { display: none; }

  .center-intro { grid-template-columns: 1fr; padding-inline: 34px; }
  .center-media { max-width: 720px; }

  .projects-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }

  .data-hero { height: 124px; }
  .data-hero-background { width: 760px; }
  .data-page-body { padding-inline: 28px; }
}

@media (max-width: 620px) {
  .site-header { min-height: 120px; grid-template-rows: 64px 56px; grid-template-columns: 1fr auto; gap: 0; }
  .brand { grid-column: 1; }
  .business-nav { grid-column: 1 / -1; grid-row: 2; height: 56px; width: 100%; }
  .business-nav a::after { bottom: -7px; }
  .ai-button { grid-column: 2; grid-row: 1; align-self: center; }

  .feature-stage { height: 280px; }
  .feature-copy-text { width: calc(100% - 28px); }
  .feature-copy-text h1 { font-size: 50px; }
  .feature-copy-text p { font-size: 14px; line-height: 1.5; }
  .feature-action { top: calc(50% + 92px); min-height: 40px; padding-inline: 17px; }
  .feature-tabs { min-height: 72px; grid-template-columns: repeat(6, minmax(150px, 1fr)); }
  .feature-tabs button::after { bottom: 8px; }

  .center-intro { gap: 46px; padding: 36px 20px 42px; }
  .center-media { box-shadow: 10px 10px 0 #d9d8d3; }
  .center-copy h1 { font-size: 42px; }
  .businesses-section { padding: 36px 20px 46px; }
  .business-cards { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .business-card:nth-child(even) { margin-top: 24px; }
  .business-card-media { height: 250px; }
  .business-card-copy { padding: 17px 8px 0 13%; }
  .business-card h3 { font-size: 16px; }

  .home-projects-section { padding: 36px 20px 29px; }
  .home-projects-section h2 { margin-bottom: 36px; font-size: 42px; }
  .projects-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .projects-list img { max-width: 76px; }

  .site-footer { min-height: 96px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 18px 20px; }
  .site-footer p { text-align: left; }

  .data-hero { height: 112px; }
  .data-hero-background { width: 590px; opacity: .12; }
  .data-hero-title-cn { font-size: 40px; }
  .data-hero-title-en { font-size: 10px; letter-spacing: .28em; }
  .data-page-body { padding: 8px 16px 17px; }
  .data-intro-copy br { display: none; }
  .data-service-card { flex-basis: 100%; }
  .data-service-content { padding: 6px 12px; }
  .data-service-content h3 { font-size: 17px; }
  .data-service-content p { font-size: 9px; }
  .data-who-we-are { padding: 32px 0 35px; }
  .data-who-we-are-copy > p { margin-top: 20px; font-size: 15px; }
  .data-who-we-are-copy > p + p { margin-top: 0; }
  .data-who-we-are-initial { width: 64px; height: 64px; margin: 4px 14px 5px 0; font-size: 42px; }
}

@media (max-width: 420px) {
  .business-cards { grid-template-columns: 1fr; gap: 42px; }
  .business-card:nth-child(even) { margin-top: 0; }
  .business-card-media { height: 340px; }
  .business-card-copy h3 { font-size: 20px; }
}

/* ==========================================================================
 * 动效降级（respect prefers-reduced-motion）
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}