/* ==========================================================================
   site.css —— 布局引擎（企业商务站）
   只消费 tokens.css 的变量，不写死颜色/尺寸。
   命名与 vb-resume 保持一致，组件可以互相搬。
   ========================================================================== */

/* ---------------------------------------------------------------- 1 重置 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); }

/* ---------------------------------------------------------- 2 基础元件 */
.page {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { position: relative; padding-block: var(--pad-y); }
.section + .section { border-top: 1px solid var(--c-line-soft); }
.section--tight { padding-block: clamp(56px, 6.5vh, 104px); }
.hero, .section, .page-head { scroll-margin-top: var(--nav-h); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-xl);
  flex-wrap: wrap;
}
.sec-title {
  font-family: var(--f-display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.sec-title .dim { color: var(--c-text-3); }
.sec-title--cn { text-transform: none; letter-spacing: var(--ls-tight); }
.sec-note {
  max-width: 36ch;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.68;
  padding-bottom: 0.5em;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--c-accent);
  flex: none;
}

/* 遮罩行：向上揭开的文字都要包一层；底部留内边距给下伸字母 */
.line-mask { display: block; overflow: hidden; padding-block: 0.02em 0.16em; margin-bottom: -0.13em; }
.line-mask > span { display: block; will-change: transform; }
.hero__title .line-mask { padding-block: 0.03em 0.2em; margin-bottom: -0.16em; }

/* 按钮 */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.btn span { position: relative; z-index: 2; }
.btn::after {                 /* 填充式 hover */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c-accent);
  border-radius: inherit;
  transform: translate3d(0, 101%, 0);
  transition: transform var(--t-base) var(--e-out);
}
.btn:hover { color: var(--c-accent-ink); border-color: var(--c-accent); }
.btn:hover::after { transform: translate3d(0, 0, 0); }
.btn--solid { background: var(--c-text); color: var(--c-text-invert); border-color: var(--c-text); }
.btn--solid::after { background: var(--c-accent); }
.btn--lg { padding: 18px 34px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.arrow { display: inline-block; transition: transform var(--t-base) var(--e-out); }
a:hover .arrow, .btn:hover .arrow { transform: translate3d(4px, -4px, 0); }

/* 标签 / 徽标 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.badge--hot { border-color: var(--c-hot); color: var(--c-hot); }
.badge--ok { border-color: var(--c-ok); color: var(--c-ok); }

/* 勾选清单：商务站里「我交付什么」必须一眼看清 */
.checklist { display: flex; flex-direction: column; gap: 11px; }
.checklist li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 3px; top: 0.52em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--c-ok);
  border-bottom: 1.5px solid var(--c-ok);
  transform: rotate(-45deg);
}
.checklist--muted li::before { border-color: var(--c-text-3); }
.checklist--muted li { color: var(--c-text-3); }

/* 媒体框 + 生成式封面（素材未到位时页面也要是完整的） */
.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-raise);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.media-frame > .media-inner {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  will-change: transform;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  background-image: var(--noise);
  opacity: .028;
  pointer-events: none;
}

/* --------------------------------------------------------------- 3 导航 */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
}
.nav.is-stuck {
  height: 64px;
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--c-line-soft);
}
.nav__inner {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: var(--ls-tight);
  flex: none;
}
.nav__logo i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 12px var(--c-accent);
  flex: none;
}
.nav__logo small {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  text-transform: uppercase;
  font-weight: 400;
  padding-left: 4px;
  border-left: 1px solid var(--c-line);
}
.nav__list { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 34px); }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  padding-block: 6px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--e-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--e-out);
}
.nav__link:hover { color: var(--c-text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
/* 当前页高亮：商务站必须让访客随时知道自己在哪一页 */
.nav__link[aria-current="page"] { color: var(--c-text); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--c-accent); }
.nav__right { display: flex; align-items: center; gap: var(--gap-sm); flex: none; }
.nav__cta { padding: 11px 20px; font-size: var(--fs-xs); }

/* 汉堡按钮 + 移动抽屉 */
.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav__toggle span {
  position: relative;
  width: 15px; height: 1px;
  background: var(--c-text);
  transition: background var(--t-fast) var(--e-out);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px; height: 1px;
  background: var(--c-text);
  transition: transform var(--t-base) var(--e-out);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after  { top: 5px; }
body.drawer-open .nav__toggle span { background: transparent; }
body.drawer-open .nav__toggle span::before { transform: translateY(5px) rotate(45deg); }
body.drawer-open .nav__toggle span::after  { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 20px) var(--pad-x) 40px;
  gap: 6px;
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  transition: transform var(--t-slow) var(--e-out), visibility 0s linear var(--t-slow);
}
body.drawer-open .drawer { transform: none; visibility: visible; transition-delay: 0s; }
.drawer a {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  padding-block: 14px;
  border-bottom: 1px solid var(--c-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-text-2);
}
.drawer a[aria-current="page"] { color: var(--c-accent); }
.drawer a::after { content: "→"; font-size: 0.6em; color: var(--c-text-3); }
.drawer__foot {
  margin-top: var(--gap-lg);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  text-transform: uppercase;
}
/* 抽屉脚里的品牌名是这一行里唯一的外链。全局 a{color:inherit} 会让它跟周围一样灰，
   所以只在 hover 时提亮 —— 既给出「可点」的反馈，又不在这条小字里硬塞一个显眼的链接色。 */
.drawer__foot a:hover { color: var(--c-text); }

/* 无 JS 时抽屉打不开，导航退化成顶部平铺的普通导航条：
   取消 fixed 定位（否则会盖住内容），链接换行展示，保证每一页都点得到。 */
html.no-js .nav {
  position: static;
  height: auto;
  min-height: 0;
  padding-block: 14px;
  background: var(--c-bg-raise);
  border-bottom-color: var(--c-line);
}
html.no-js .nav__inner { flex-wrap: wrap; row-gap: 10px; }
html.no-js .nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
html.no-js .nav__toggle { display: none; }
html.no-js .drawer { display: none; }
html.no-js .hero { padding-top: 40px; min-height: 0; }
html.no-js .page-head { padding-top: 40px; }

/* ------------------------------------------------------------ 4 首屏 Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(30px, 5vh, 68px);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--c-bg-sunken); }
.hero__fallback { position: absolute; inset: 0; overflow: hidden; }
.hero__fallback::before {
  content: "";
  position: absolute;
  top: -34%; left: -12%;
  width: 74vw; height: 74vw;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--c-accent) 40%, transparent) 0%, transparent 62%);
  filter: blur(60px);
  opacity: .46;
  animation: drift 26s var(--e-out) infinite alternate;
}
.hero__fallback::after {
  content: "";
  position: absolute;
  right: -20%; bottom: -38%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--c-accent-2) 32%, transparent) 0%, transparent 64%);
  filter: blur(72px);
  opacity: .34;
  animation: drift 34s var(--e-out) infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.14); }
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--c-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line-soft) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(110% 80% at 50% 30%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 30%, #000 0%, transparent 76%);
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-bg) 62%, transparent) 0%,
    color-mix(in srgb, var(--c-bg) 40%, transparent) 45%,
    var(--c-bg) 100%);
}
/* 三行撑满一屏：眉标贴顶 → 标题组下沉 → 页脚条压底。
   flex:1 让 inner 吃掉 hero 的全部可用高度，margin-top:auto 再把主标题组推到底。 */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hero__main { margin-top: auto; padding-top: var(--gap-xl); }
.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-2);
}
.hero__eyebrow i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-ok);
  box-shadow: 0 0 10px var(--c-ok);
  animation: pulse 2.4s var(--e-out) infinite;
  align-self: center;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.hero__title .ital {
  display: block;
  font-size: 0.34em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--c-accent);
  padding-top: 0.22em;
}
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-lg);
  align-items: end;
  padding-top: var(--gap-lg);
}
.hero__claim {
  max-width: 56ch;
  color: var(--c-text-2);
}
.hero__claim b { color: var(--c-text); font-weight: 500; }
.hero__actions { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
.hero__note {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  text-transform: uppercase;
}

/* 首屏页脚条：左边是「还往下有东西」的功能提示，右边是交付承诺。
   这条横线的真正作用是给首屏封底，别让底部内容飘在半空。 */
.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px var(--gap-md);
  margin-top: var(--gap-lg);
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--c-text-2);
  transition: color var(--t-fast) var(--e-out);
}
.hero__cue:hover { color: var(--c-text); }
/* 光扫短线：一条 1px 轨道上一段强调色来回扫，成本极低、不抢戏 */
.hero__cue i {
  position: relative;
  display: block;
  width: 46px; height: 1px;
  background: var(--c-line-strong);
  overflow: hidden;
  flex: none;
}
.hero__cue i::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 1px;
  background: var(--c-accent);
  animation: cueSweep 2.6s var(--e-out) infinite;
}
@keyframes cueSweep {
  0%        { transform: translateX(-18px); }
  55%, 100% { transform: translateX(48px); }
}
.hero__foot-note { margin: 0; }

/* 首屏信任条：把「能不能信」这件事放在第一屏 */
.trust {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  background: color-mix(in srgb, var(--c-bg) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.trust .page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.trust__item {
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.trust__num {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trust__num sup { font-size: .5em; color: var(--c-accent); }
.trust__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* -------------------------------------------------------- 5 服务 / 套餐 */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  align-items: stretch;
}
.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: clamp(26px, 2.4vw, 38px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background-color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
/* hover 抬起改用阴影而非 translateY：位移会让同排里被指到的那张高出一截，
   PC 端「点一下/鼠标停住就错位」就是它。阴影不参与布局，同排永远齐平。 */
.pkg:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); box-shadow: var(--shadow-lift); }
/* 主推档位：靠一条顶部高亮边 + 徽标区分，不做放大——放大容易显得廉价 */
.pkg--hot { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); }
.pkg--hot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--c-accent), var(--c-accent-2));
}
.pkg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-sm); }
.pkg__name {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}
.pkg__for { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 6px; }
.pkg__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-display);
  letter-spacing: var(--ls-tight);
}
.pkg__price strong { font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 700; line-height: 1; }
.pkg__price span { font-size: var(--fs-sm); color: var(--c-text-3); }
.pkg__price del { font-size: var(--fs-sm); color: var(--c-text-3); font-weight: 400; }
.pkg__list { flex: 1; }
.pkg__cta { margin-top: auto; }
.pkg__foot {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  text-transform: uppercase;
  text-align: center;
}

/* 套餐对比表（服务页用，信息密度更高） */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cmp th, .cmp td {
  padding: 15px 16px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.cmp thead th {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: 400;
  border-bottom-color: var(--c-line-strong);
}
.cmp tbody th { font-weight: 400; color: var(--c-text-2); width: 30%; }
.cmp td { color: var(--c-text); }
.cmp .yes { color: var(--c-ok); }
.cmp .no  { color: var(--c-text-3); }
.cmp__wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.cmp__wrap::-webkit-scrollbar { height: 7px; }

/* ------------------------------------------------------------ 6 服务流程 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.step {
  background: var(--c-bg);
  padding: clamp(22px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color var(--t-base) var(--e-out);
}
.step:hover { background: var(--c-bg-raise); }
.step__no {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
}
.step__title { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-tight); }
.step__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.66; }
.step__time { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--ls-wide); color: var(--c-text-3); text-transform: uppercase; margin-top: auto; }

/* ------------------------------------------------------------ 7 案例卡片 */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); }
.case { position: relative; display: flex; flex-direction: column; }
.case__media { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.case__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c-bg) 58%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-base) var(--e-out);
}
.case__link:hover .case__overlay, .case__link:focus-visible .case__overlay { opacity: 1; }
.case__overlay span {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  transform: translateY(8px);
  transition: transform var(--t-slow) var(--e-out);
}
.case__link:hover .case__overlay span { transform: none; }
.case__meta { padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.case__name { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-tight); }
.case__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.66; }
.case__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.case__tags li {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* 生成式封面 */
.art {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at var(--art-x, 24%) var(--art-y, 20%),
      var(--art-c1, var(--c-accent)) 0%, transparent 58%),
    radial-gradient(100% 80% at 80% 86%,
      var(--art-c2, var(--c-accent-2)) 0%, transparent 62%),
    linear-gradient(150deg, var(--c-bg-raise), var(--c-bg) 78%);
}
.art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(158deg, rgba(8,8,10,.34) 0%, rgba(8,8,10,.70) 100%);
}
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 90% at 50% 45%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 45%, #000 20%, transparent 100%);
}
.art--rings::after {
  background-image: repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.10) 0 1px, transparent 1px 32px);
  background-size: auto;
}
.art--bars::after {
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,.09) 0 1px, transparent 1px 13px);
  background-size: auto;
  opacity: .55;
}
.art--dots::after {
  background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* 封面上的简历骨架示意：比纯色块更能说明「这是个网页简历」 */
.art__doc {
  position: absolute;
  left: 8%; top: 12%;
  width: 44%; height: 76%;
  z-index: 2;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
  overflow: hidden;
}
.art__doc i {
  display: block;
  height: 5px;
  margin: 9px 12px;
  border-radius: 3px;
  background: rgba(255,255,255,.22);
}
.art__doc i:nth-child(1) { width: 52%; height: 9px; background: var(--c-accent); opacity: .8; margin-top: 16px; }
.art__doc i:nth-child(2) { width: 76%; }
.art__doc i:nth-child(3) { width: 88%; opacity: .6; }
.art__doc i:nth-child(4) { width: 64%; opacity: .6; }
.art__doc i:nth-child(5) { width: 80%; opacity: .45; }
.art__doc i:nth-child(6) { width: 46%; opacity: .45; }
.art__doc i:nth-child(7) { width: 72%; opacity: .3; }
.art__doc i:nth-child(8) { width: 58%; opacity: .3; }

/* ------------------------------------------------------------ 8 客户评价 */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: clamp(24px, 2.2vw, 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.quote__text { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.75; flex: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; padding-top: var(--gap-sm); border-top: 1px solid var(--c-line-soft); }
.quote__av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-accent), var(--c-accent-2));
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--c-accent-ink);
}
.quote__name { font-size: var(--fs-sm); }
.quote__role { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--ls-wide); color: var(--c-text-3); text-transform: uppercase; }

/* --------------------------------------------------------------- 9 FAQ */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 22px 4px;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  transition: color var(--t-fast) var(--e-out), padding-inline var(--t-base) var(--e-out);
}
.faq__item summary:hover { color: var(--c-accent); padding-inline: 12px 4px; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--e-out);
  opacity: .6;
}
.faq__item[open] summary { color: var(--c-accent); }
.faq__item[open] summary::after { transform: rotate(225deg) translate(-4px, -4px); }
.faq__body {
  padding: 0 4px 26px;
  max-width: 74ch;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.faq__body p + p { margin-top: 12px; }
.faq__body code {
  font-family: var(--f-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  color: var(--c-text);
}

/* ------------------------------------------------------- 10 内页页头 */
.page-head {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vh, 110px));
  padding-bottom: clamp(44px, 5vh, 76px);
  overflow: hidden;
}
.page-head__glow {
  position: absolute;
  top: -60%; left: 50%;
  width: 90vw; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--c-accent) 26%, transparent) 0%, transparent 64%);
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.page-head__inner { position: relative; z-index: 2; }
.page-head h1 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.4vw, 5rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-top: var(--gap-md);
  text-transform: uppercase;
}
.page-head h1 .cn { text-transform: none; letter-spacing: var(--ls-tight); display: block; font-size: 0.46em; color: var(--c-text-2); font-weight: 400; padding-top: 0.3em; }
.page-head__lead {
  max-width: 60ch;
  color: var(--c-text-2);
  margin-top: var(--gap-md);
}
.page-head__lead b { color: var(--c-text); font-weight: 500; }

.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  text-transform: uppercase;
}
.crumb a:hover { color: var(--c-text); }
.crumb span { opacity: .5; }

/* --------------------------------------------------- 11 关于页 / 承诺 */
.about-grid { display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; gap: clamp(30px, 4.5vw, 80px); align-items: start; }
.about-portrait { position: relative; }
.about-portrait .media-frame { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.about-portrait__badge {
  position: absolute;
  left: -12px; bottom: 24px;
  padding: 11px 17px;
  background: var(--c-bg-raise);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.about-portrait__badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-ok);
  box-shadow: 0 0 10px var(--c-ok);
  animation: pulse 2.4s var(--e-out) infinite;
}
.about-body { display: flex; flex-direction: column; gap: var(--gap-lg); }
.about-lead {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
}
.about-lead b { color: var(--c-accent); font-weight: 600; }
.about-text { max-width: var(--w-text); color: var(--c-text-2); display: flex; flex-direction: column; gap: 15px; }

.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.promise__item { background: var(--c-bg); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.promise__t { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-tight); }
.promise__d { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.68; }

.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.cap {
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
/* 同 .pkg：抬起交给阴影，不用位移，避免同排错位 */
.cap:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); box-shadow: var(--shadow-lift); }
.cap__no { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--c-text-3); }
.cap__t { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-tight); }
.cap__d { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.66; flex: 1; }

/* 联系方式清单 */
.contacts { border-top: 1px solid var(--c-line); }
.contacts li { border-bottom: 1px solid var(--c-line); }
.contacts a, .contacts__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 18px 4px;
  transition: padding-inline var(--t-base) var(--e-out), color var(--t-fast) var(--e-out);
}
/* 微信号那一行是 <button>（点了复制），要把浏览器默认样式按掉，
   只保留上面那套和 <a> 相同的行几何。 */
.contacts__btn {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.contacts a:hover, .contacts__btn:hover { padding-inline: 14px 10px; color: var(--c-accent); }
.contacts__k {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
  flex: none;
  width: 92px;
}
.contacts__v { flex: 1; text-align: right; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 微信号：点一下选中整段文字。这条是给「无 JS」兜底的 ——
   site.js 不在时复制按钮不会响应，但点一下仍然会全选，可直接 Ctrl+C。 */
.contacts__btn .contacts__v { user-select: all; }
.contacts__hint {
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  white-space: nowrap;
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.contacts__btn:hover .contacts__hint,
.contacts__btn.is-copied .contacts__hint { color: var(--c-accent); border-color: var(--c-accent); }

/* ---------------------------------------------------------- 12 CTA 通栏 */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-sunken);
  border-top: 1px solid var(--c-line-soft);
  padding-block: clamp(64px, 9vh, 130px);
}
.cta-band__glow {
  position: absolute;
  left: 50%; bottom: -60%;
  width: 110vw; height: 90vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--c-accent) 30%, transparent) 0%, transparent 62%);
  filter: blur(80px);
  opacity: .42;
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  max-width: 760px;
}
.cta-band h2 {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
}
.cta-band p { color: var(--c-text-2); max-width: 52ch; }
.cta-band__actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; margin-top: var(--gap-sm); }

/* ------------------------------------------------------------ 13 表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
.form { display: flex; flex-direction: column; gap: var(--gap-md); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
}
.field > label .req { color: var(--c-accent); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-surface-2);
}
.field textarea { resize: vertical; min-height: 116px; line-height: 1.7; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--c-bg-raise); color: var(--c-text); }
.field select { background-image: none; }
.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  right: 18px; bottom: 20px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--c-text-3);
  border-bottom: 1.5px solid var(--c-text-3);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__hint { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.6; }
.field__err { font-size: var(--fs-xs); color: var(--c-hot); display: none; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--c-hot); }
.field.is-bad .field__err { display: block; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.form__foot { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }
.form__note { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.6; flex: 1; min-width: 200px; }
.form-status {
  padding: 16px 18px;
  border: 1px solid var(--c-ok);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-ok) 8%, transparent);
  font-size: var(--fs-sm);
  color: var(--c-text);
  display: none;
}
.form-status.is-on { display: block; }
.form-status.is-bad { border-color: var(--c-hot); background: color-mix(in srgb, var(--c-hot) 8%, transparent); }

/* ------------------------------------------------------------ 14 页脚 */
.site-foot {
  border-top: 1px solid var(--c-line);
  padding-top: clamp(44px, 5vh, 72px);
  background: var(--c-bg-sunken);
}
.site-foot__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: clamp(36px, 4vh, 60px);
}
.site-foot__brand { display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.site-foot__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.7; }
.site-foot__col h3 {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: 400;
  margin-bottom: 16px;
}
.site-foot__col li { margin-bottom: 10px; }
.site-foot__col a { font-size: var(--fs-sm); color: var(--c-text-2); transition: color var(--t-fast) var(--e-out); }
.site-foot__col a:hover { color: var(--c-accent); }
.site-foot__bar {
  border-top: 1px solid var(--c-line-soft);
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
}
.site-foot__bar a:hover { color: var(--c-text); }
.to-top { display: inline-flex; align-items: center; gap: 8px; }
.to-top .arrow { transform: rotate(-45deg); }
.to-top:hover .arrow { transform: rotate(-45deg) translate3d(4px, -4px, 0); }

/* ---------------------------------------------------------- 15 响应式 */
@media (max-width: 1180px) {
  .caps { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cases, .quotes, .services { grid-template-columns: repeat(2, 1fr); }
  .site-foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .nav__list { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .hero__body { grid-template-columns: 1fr; align-items: start; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 380px; }
  .promise { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .trust .page { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { max-width: none; }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  .services, .cases, .quotes, .steps, .caps { grid-template-columns: 1fr; }
  .site-foot__top { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: var(--gap-lg); }
  .nav__logo small { display: none; }
  .trust__item { padding: 18px 0; }
  .cmp thead th, .cmp tbody th { white-space: nowrap; }
}

/* 手机上的 4 列对比表：不强行压进 390px（那会把每格挤成两三个字一行），
   改成给表格一个下限宽度、让容器横向滚动。页面顶部有提示，不会让人以为是坏掉。
   ------------------------------------------------------------------
   但「能横滑」只是及格线：滑到右边之后首列（交付项）跟着一起滑走了，
   屏幕上只剩三档数字，不知道自己在比哪一项 —— 横滑表格最常见就是死在这里。
   所以窄屏把首列 position:sticky 钉在左边；顺带收紧内边距、
   下限宽度 680 → 600，少滑将近一屏。 */
@media (max-width: 760px) {
  .cmp { min-width: 600px; }
  .cmp tbody th { width: 26%; }
  .cmp th, .cmp td { padding: 12px 13px; }
  .cmp__wrap { overscroll-behavior-x: contain; }

  /* 首列钉住。背景必须是不透明的 --c-bg，否则右边滑过来的字会透上来。
     border-collapse: collapse 之下 sticky 单元格的 border 经常画不出来，
     所以右侧那条分隔线用 box-shadow 画，不用 border-right。 */
  .cmp thead th:first-child,
  .cmp tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--c-bg);
    box-shadow: 1px 0 0 var(--c-line);
  }
}

/* ------------------------------------------------------------ 16 工具类 */
/* 只做「间距 / 排列 / 色彩」三件事，不引入新设计语言。 */
.stack { display: flex; flex-direction: column; }
.stack--xs { gap: var(--gap-xs); }
.stack--sm { gap: var(--gap-sm); }
.stack--md { gap: var(--gap-md); }
.stack--lg { gap: var(--gap-lg); }
.stack--xl { gap: var(--gap-xl); }

.sec-head__lead { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* 内页小标题（比 sec-title 小一号，用于表单区/联系区这类次级栏目标题） */
.sub-title {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1.24;
}

/* 单列承诺块（联系方式旁的信息条） */
.promise--single { grid-template-columns: 1fr; }

.text-2 { color: var(--c-text-2); }
.text-3 { color: var(--c-text-3); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }
.mt-xl { margin-top: var(--gap-xl); }

/* 长文段落之间的自然间距（关于页/条款用） */
.prose p + p { margin-top: 15px; }
.about-text a, .prose a {
  color: var(--c-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 38%, transparent);
  transition: border-color var(--t-fast) var(--e-out);
}
.about-text a:hover, .prose a:hover { border-bottom-color: var(--c-accent); }

/* 骨架说明条：告诉你「这段是占位、怎么改」 */
.tip {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-warn);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-2);
}
.tip b { color: var(--c-text); font-weight: 500; }

/* 加购项：价格表下方的补充服务 */
.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.addon { background: var(--c-bg); padding: clamp(20px, 2vw, 28px); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-md); }
.addon__t { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-tight); }
.addon__d { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.66; margin-top: 8px; }
.addon__p { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-warn); white-space: nowrap; flex: none; }

/* 行业模板网格（作品页用来展示「不做也能看」的覆盖面） */
.tags-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.tags-grid li {
  background: var(--c-bg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background-color var(--t-base) var(--e-out);
}
.tags-grid li:hover { background: var(--c-bg-raise); }
.tags-grid b { font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: var(--ls-tight); }
.tags-grid span { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-3); }

/* 案例大卡（作品页用，比首页的卡片更能承载信息） */
.case--wide { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(22px, 2.6vw, 44px); align-items: center; }
.case--wide + .case--wide { margin-top: var(--gap-xl); padding-top: var(--gap-xl); border-top: 1px solid var(--c-line-soft); }
.case--wide .case__media { aspect-ratio: 16 / 11; }
/* 交错左右：order 必须加在栅格子项（.case__link）上，加在它内部的
   .case__media 上不会改变栅格顺序 —— 这里踩过一次，别改回去。 */
.case--wide:nth-child(even) .case__link { order: -1; }
.case__body { display: flex; flex-direction: column; gap: var(--gap-md); }
.case__facts { display: flex; flex-wrap: wrap; gap: var(--gap-md); padding-top: var(--gap-sm); border-top: 1px solid var(--c-line-soft); }
.case__fact { display: flex; flex-direction: column; gap: 3px; }
.case__fact b { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: var(--ls-tight); }
.case__fact span { font-family: var(--f-mono); font-size: 10px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-3); }

@media (max-width: 980px) {
  .case--wide { grid-template-columns: 1fr; }
  .case--wide:nth-child(even) .case__link { order: 0; }
  .addons { grid-template-columns: 1fr; }
  .tags-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tags-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- 17 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__fallback::before, .hero__fallback::after,
  .hero__eyebrow i, .about-portrait__badge i, .hero__cue i::after { animation: none; }
  /* 光扫停掉后那一段强调色会停在轨道左侧外面，看起来像轨道断了 —— 直接归位 */
  .hero__cue i::after { transform: none; }
  /* .pkg / .cap 的 hover 抬起已改用 --shadow-lift，没有位移可停，无需再压制 */
}

/* ------------------------------------------------- 18 样本网格（双列变体） */
/* 行业样本从 3 个扩到 7 个之后，如果继续沿用 .cases 的三列栅格，
   新增的 4 个会排成「3 + 1」，最后一张孤零零地留在左边。
   这里给一个明确的双列变体，2×2 排布，窄屏退回单列。 */
.cases--duo {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 3.4vw, 54px) clamp(20px, 2.4vw, 40px);
}
.cases--duo .case__media { aspect-ratio: 16 / 11; }
.cases--duo .case__meta { gap: 10px; }
.cases--duo .case__desc { max-width: 46ch; }
.cases--duo .case__facts { gap: var(--gap-lg); }

@media (max-width: 760px) {
  .cases--duo { grid-template-columns: 1fr; }
}