/* ============================================================
   跨境引擎 · 材质与景深层  DES-20261101
   ------------------------------------------------------------
   只做「看得见的质感」，不改任何文案、不改板块结构、不动 React 树。

   四件事：
   D1  材质：亮面白霜 / 暗面液态玻璃（渐变发丝边缘光，替代 1px 边框）
   D2  按钮：全部 pill 化，主按钮墨色铬面 + 扫光，次按钮玻璃
   D3  药丸网格：36 个相同白盒 → 编号淡染 chip + 6 段节奏（原来全页最丑）
   D4  景深：图片/卡片 3D 倾斜（指针跟随），高光跟着鼠标走

   约束：
   - 无 JS：所有效果降级为静态样式，内容完整可见
   - prefers-reduced-motion：关闭倾斜与扫光
   - 不新增任何图片请求（全部 CSS 渐变）
   - 幂等：可重复注入
   ============================================================ */

:root {
  --dx-ink: #0a1220;
  --dx-ink-2: #16233d;
  --dx-pill: 999px;
  --dx-card-r: 18px;
  --dx-ease-out: cubic-bezier(.22, 1, .36, 1);
  --dx-ease-std: cubic-bezier(.4, 0, .2, 1);
  --dx-hair: rgba(10, 18, 32, .085);
  --dx-hair-soft: rgba(10, 18, 32, .05);
  --dx-frost: rgba(255, 255, 255, .72);
  --dx-sh-1: 0 1px 2px rgba(10, 18, 32, .05), 0 1px 1px rgba(10, 18, 32, .03);
  --dx-sh-2: 0 2px 5px rgba(10, 18, 32, .05), 0 10px 26px -14px rgba(10, 18, 32, .20);
  --dx-sh-3: 0 3px 8px rgba(10, 18, 32, .06), 0 26px 54px -22px rgba(10, 18, 32, .30);
}

/* ============================================================
   D1  材质
   ============================================================ */

/* ---- 亮面白霜：白底卡片不再靠 1px 灰线撑形体，
        改用「顶部 1px 高光 + 三段阴影 + 极淡描边」---- */
.tcard,
.ccard,
.kf,
.pm-card,
.tw,
.acc-item,
.os-shot {
  border-color: var(--dx-hair-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--dx-sh-2);
}
.tcard:hover,
.ccard:hover,
.kf:hover,
.pm-card:hover,
.tw:hover {
  border-color: rgba(29, 78, 216, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--dx-sh-3);
}

/* 实时看板外框：它是首屏的第二视觉重心，给一层薄玻璃底 */
.board {
  border-color: rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 6px rgba(8, 16, 31, .10),
    0 36px 70px -30px rgba(8, 16, 31, .55);
}

/* ---- 暗面液态玻璃：渐变发丝边缘光（rim），不用 border ----
   遮罩把 content-box 抠掉，只剩 1.4px 的环，点击完全穿透。 */
.sec-dark .kf,
.stat,
.eyebrow,
.hero .capture-form {
  position: relative;
}
.sec-dark .kf::before,
.stat::before,
.eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .52) 0%,
    rgba(255, 255, 255, .18) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, .18) 80%,
    rgba(255, 255, 255, .52) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.sec-dark .kf,
.stat {
  border-color: transparent;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255, 255, 255, .10), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
}
.stat {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px -18px rgba(0, 0, 0, .8);
}

/* hero 里的椭圆徽标：也换成玻璃 */
.eyebrow {
  background: rgba(255, 255, 255, .08);
  border-color: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ============================================================
   D2  按钮：pill + 铬面
   ============================================================ */
.btn {
  border-radius: var(--dx-pill);
  font-weight: 600;
  letter-spacing: -.012em;
}
.btn-lg { padding: 0 30px; }
.btn-sm { padding: 0 18px; }

/* 主按钮：墨色实心。原来那一抹「默认 SaaS 蓝」是整页最廉价的一处。 */
.btn-primary {
  background: linear-gradient(180deg, #1b2b49 0%, #0c1526 56%, #070d18 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 1px 2px rgba(5, 26, 36, .20),
    0 8px 20px -10px rgba(5, 26, 36, .60);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #26395e 0%, #11203a 56%, #0a1220 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 2px 4px rgba(5, 26, 36, .22),
    0 18px 36px -14px rgba(5, 26, 36, .62);
}
.btn-primary:active {
  transform: translateY(0) scale(.985);
}

/* 次按钮：暗区玻璃 */
.btn-invert {
  background: #fff;
  color: var(--dx-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(255, 255, 255, .18),
    0 0 22px rgba(255, 255, 255, .26),
    0 0 46px rgba(255, 255, 255, .10);
}
.btn-invert:hover {
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(255, 255, 255, .28),
    0 0 30px rgba(255, 255, 255, .40),
    0 0 66px rgba(255, 255, 255, .16);
}
.btn-ghost {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .36);
}

/* ============================================================
   D3  hero 搜索框 → 液态玻璃药丸（提交按钮嵌在里面）
   ============================================================ */
.hero .capture-form {
  border-radius: var(--dx-pill);
  padding: 7px 7px 7px 24px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 5px rgba(0, 0, 0, .16),
    0 22px 44px -22px rgba(0, 0, 0, .75);
}
.hero .capture-form input {
  border-radius: var(--dx-pill);
  height: 48px;
}
.hero .capture-form .btn {
  border-radius: var(--dx-pill);
  padding: 0 22px;
  height: 48px;
}

/* ============================================================
   D4  36 个药丸网格（全页最丑的一处）
   ------------------------------------------------------------
   原样：36 个一模一样的白盒 + 1px 灰边，四列九行，零层级。
   改法：去掉每个盒子的白底与描边 → 编号淡染 chip，
        每 6 个一段（正好对应六条业务链），靠留白分段，不靠画线。
   ============================================================ */
.mod-grid {
  counter-reset: dxmod;
  gap: 6px 8px;
}
.mod {
  counter-increment: dxmod;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(29, 78, 216, .042);
  color: #2f3d54;
  font-weight: 500;
  letter-spacing: -.008em;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .2s var(--dx-ease-out),
    box-shadow .22s ease;
}
.mod::before {
  content: counter(dxmod, decimal-leading-zero);
  flex: none;
  font: 600 9px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .02em;
  color: rgba(29, 78, 216, .52);
  font-variant-numeric: tabular-nums;
}
.mod:hover {
  background: #fff;
  border-color: rgba(29, 78, 216, .26);
  color: var(--dx-ink);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(10, 18, 32, .06), 0 8px 18px -10px rgba(29, 78, 216, .55);
}
.mod:hover::before { color: var(--brand); }
.mod.hot {
  background: rgba(29, 78, 216, .10);
  border-color: transparent;
  color: #1e40af;
  font-weight: 650;
}
/* 六段节奏：每 6 个起头多留 12px，读起来是六组而不是三十六条 */
.mod:nth-child(6n + 1):not(:first-child) {
  margin-top: 12px;
}

/* ============================================================
   D5  景深：图片卡 3D 倾斜 + 跟随高光
   ------------------------------------------------------------
   父级给 perspective，子元素 transform-style 保留 3D，
   JS 只写 --dx-rx / --dx-ry / --dx-mx / --dx-my 四个变量。
   ============================================================ */
.ct-grid,
.trio,
.case-grid {
  perspective: 1400px;
}
.ct,
.tcard,
.ccard,
.case,
.os-shot {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .5s var(--dx-ease-out), box-shadow .4s var(--dx-ease-out);
}
/* JS 接管后由 --dx-rx/--dx-ry 驱动；没有 JS 时这些变量是 0，等于不动 */
.dx-tilt {
  transition: transform .12s linear, box-shadow .4s var(--dx-ease-out);
}
.dx-tilt:not(.dx-live) {
  transition: transform .6s var(--dx-ease-out), box-shadow .4s var(--dx-ease-out);
}
.dx-tilt:hover {
  box-shadow: 0 3px 8px rgba(10, 18, 32, .07), 0 34px 60px -26px rgba(10, 18, 32, .42);
}
/* 跟随高光：跟着指针走的一层柔光，让平面图有「表面」 */
.dx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(
    340px circle at var(--dx-mx, 50%) var(--dx-my, 50%),
    rgba(255, 255, 255, .30),
    transparent 62%);
  transition: opacity .3s ease;
}
.dx-tilt.dx-live::after { opacity: 1; }

/* 技术能力四图：说明文字从白色横条 → 图上悬浮玻璃胶囊 */
.ct {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1322;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 40px -22px rgba(8, 16, 31, .55);
}
.ct img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(0) scale(1.001);
  transition: transform .6s var(--dx-ease-out);
}
.ct:hover img { transform: translateZ(0) scale(1.035); }
/* 说明文字从白色横条 → 图上悬浮玻璃胶囊。
   必须带 #coretech：站内那条规则是 `#coretech .ct figcaption`（id 级），
   只用 .ct figcaption 会被它压掉 —— 会出现白底配白字。 */
#coretech .ct figcaption,
.ct figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 12px 5px 11px;
  border-radius: var(--dx-pill);
  background: rgba(8, 16, 31, .48);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* 里面那个 <b> 被站内规则设成了深色 15.5px（#coretech .ct figcaption b），
   深字压深胶囊上等于隐形，字号也撑破了胶囊，必须一起压回来。 */
#coretech .ct figcaption b,
.ct figcaption b {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  letter-spacing: .01em;
}

/* ============================================================
   D6  响应式
   ============================================================ */
@media (max-width: 900px) {
  .mod-grid { grid-template-columns: repeat(3, 1fr); }
  .mod:nth-child(6n + 1):not(:first-child) { margin-top: 0; }
}
@media (max-width: 640px) {
  .mod-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .hero .capture-form { padding: 6px 6px 6px 18px; }
  .hero .capture-form input { height: 44px; }
  .hero .capture-form .btn { height: 44px; padding: 0 16px; }
}

/* ============================================================
   D7  动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dx-tilt,
  .dx-tilt::after,
  .ct img,
  .btn,
  .btn-primary,
  .mod {
    transition: none !important;
  }
  .dx-tilt { transform: none !important; }
  .dx-tilt::after { opacity: 0 !important; }
}

/* 触屏：不给倾斜（读不到指针位置，只剩抖动） */
@media (hover: none) {
  .dx-tilt::after { display: none; }
  .dx-tilt { transform: none !important; }
}

/* ============================================================
   D8  顶部状态条重做
   ------------------------------------------------------------
   原样：38px 高、12.5px 字，左右两侧硬挤一行，窄屏会折行并被高度裁掉。
   改成：44px 高、13px 字，强制单行 + 溢出裁切兜底（任何情况都不会露出半截字），
        竖线分隔符换成留白，联系邮箱做成玻璃芯片。
   ============================================================ */
.statusbar {
  overflow: hidden;
  font-size: 13px;
  letter-spacing: -.003em;
  background: linear-gradient(180deg, #0a1220 0%, #060c16 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.statusbar .wrap-wide { height: 44px; gap: 18px; }
.statusbar .sb-left,
.statusbar .sb-right { white-space: nowrap; min-width: 0; }
.statusbar .sb-left > *,
.statusbar .sb-right > * { white-space: nowrap; flex: none; }
.statusbar .sb-left span:last-child { overflow: hidden; text-overflow: ellipsis; }
.statusbar .sb-sep { display: none; }
.statusbar .sb-right { gap: 14px; }
.statusbar .sb-right a { text-decoration: none; }
.statusbar .sb-right a:first-of-type {
  padding: 3px 10px;
  border-radius: var(--dx-pill);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color .2s ease;
}
.statusbar .sb-right a:first-of-type:hover { background: rgba(255, 255, 255, .14); }
.statusbar .dot {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .16), 0 0 10px rgba(52, 211, 153, .45);
}
/* nav 跟着加高，和状态条同一节奏 */
.nav .wrap-wide { height: 68px; }

/* ============================================================
   D9  更多液态玻璃与 3D 旋转
   ============================================================ */

/* 实时看板：表头做玻璃、行 hover 走品牌色细边 */
.board-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .60));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}
table.lb tbody tr { transition: background-color .18s ease, box-shadow .18s ease; }
table.lb tbody tr:hover {
  background: rgba(29, 78, 216, .045);
  box-shadow: inset 3px 0 0 0 var(--brand);
}

/* 案例图卡：图片在 hover 时轻微旋转，比单纯放大更有实体感 */
.tcard-img img,
.ccard-img img { will-change: transform; }
.tcard:hover .tcard-img img,
.ccard:hover .ccard-img img { transform: scale(1.055) rotate(.7deg); }

/* 暗区五项（kf）与两向卡片：加玻璃边缘光 + 3D 倾斜 */
.sec-dark .kf:hover,
.stat:hover {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 18px 38px -20px rgba(0, 0, 0, .9);
}

/* 高亮卡（hot）给一层内发光，而不是换底色 */
.mod.hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px -4px rgba(29, 78, 216, .5); }

/* 手风琴条目：展开时左侧品牌细线已经存在，这里补一层玻璃底 */
.acc-item { background: rgba(255, 255, 255, .62); }
.acc-item.open { background: #fff; }

/* 3D 倾斜的作用范围扩大：暗区五项、两向卡、对比表、统计卡也一起倾斜 */
.sec-dark .kf-grid,
.twoway,
.stat-grid,
.cmp { perspective: 1400px; }