/* === 简化版 — 顶级 B2B 标杆研究后,只保留字体 hierarchy + 3D cube + 数字 mono === */

/* 字体优化 — Manrope variable (Linear/Vercel 同款) */
body {
  font-family: var(--font-cn);
  font-weight: 400;
  font-feature-settings: "ss01", "ss02", "cv11", "calt", "tnum";
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
.tx-mega, .tx-display, .tx-h1, .tx-h2, .tx-h3 {
  font-family: var(--font-cn);
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.022em;
}
code, pre, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 数字计数 — tabular nums 让数字滚动时宽度不变 */
.counter-up {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* === platform 第 4 页:3D 旋转"玻璃房"(5 基座 + 1 CORE 地基) — 2026-05-26 ===
 * 用户原话:"第四页的立方体要更像一个玻璃房"
 * 关键变化(vs 之前的 6 面砖块):
 *   1. 6 面真透明(rgba ~0.04),不再饱满紫色
 *   2. 每面 3×3 窗格线模拟玻璃窗框
 *   3. 屋顶 .top 加天窗放射光柱
 *   4. 地板 .bottom = 发光基座(CORE),不再普通面
 *   5. 立方体几何中心加一个发光球(透过玻璃可见 — 真"房间里有东西")
 *   6. 立方体下方加椭圆投影(让它"站"在地上)
 *   7. 4 面墙边缘加 1px 顶部白线模拟玻璃反射
 * 兜底:backface-visibility:hidden 保留(防 Win11 穿透) */
.cube-3d-wrap {
  perspective: 1100px;
  perspective-origin: 50% 45%;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  position: relative;
}
.cube-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: cube-spin 26s linear infinite;
  will-change: transform;
}
.cube-3d:hover { animation-play-state: paused; }
@keyframes cube-spin {
  from { transform: rotateY(0deg) rotateX(-16deg); }
  to   { transform: rotateY(360deg) rotateX(-16deg); }
}

/* === 中心发光核 — 玻璃房里的"装置" === */
.cube-3d::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 212, 255, 0.78) 0%,
    rgba(123, 91, 255, 0.42) 45%,
    rgba(123, 91, 255, 0.00) 100%);
  filter: blur(3px);
  transform: translateZ(0);
  animation: glass-house-core 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glass-house-core {
  0%, 100% { transform: translateZ(0) scale(1);    opacity: 0.80; }
  50%      { transform: translateZ(0) scale(1.15); opacity: 1.00; }
}

/* === 6 面真玻璃 — 3×3 窗格 + 极淡冷色 + 顶部反射高光 === */
.cube-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hm-cyan) 38%, transparent);
  /* 三层背景:窗格横线 + 窗格竖线 + 极淡基底 */
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 100% 33.33%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 33.33% 100%,
    linear-gradient(135deg, color-mix(in srgb, var(--hm-cyan) 5%, transparent), color-mix(in srgb, var(--hm-purple) 5%, transparent));
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  color: var(--text-strong, #fff);
  box-shadow:
    /* 玻璃顶部反射高光线 */
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    /* 玻璃边缘内发光 */
    inset 0 0 18px color-mix(in srgb, var(--hm-cyan) 10%, transparent),
    /* 外发光 — 整体玻璃感 */
    0 0 28px color-mix(in srgb, var(--hm-cyan) 14%, transparent);
}
.cube-face .face-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--hm-cyan, #00D4FF);
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 0 8px color-mix(in srgb, var(--hm-cyan) 50%, transparent);
}
.cube-face .face-title {
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: #fff;
}
.cube-face .face-title-core {
  font-size: 20px;
  background: linear-gradient(135deg, var(--hm-cyan), var(--hm-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cube-face .face-desc {
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.78;
}
.cube-face.front  { transform: translateZ(120px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(120px); }
.cube-face.right  { transform: rotateY(90deg)  translateZ(120px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(120px); }
.cube-face.top    { transform: rotateX(90deg)  translateZ(120px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(120px); }

/* === 屋顶 .top — 天窗(放射光柱 + 十字窗框) === */
.cube-face.top {
  background:
    /* 天窗放射光柱 */
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--hm-cyan) 22%, transparent) 0%,
      color-mix(in srgb, var(--hm-purple) 10%, transparent) 45%,
      transparent 75%),
    /* 十字窗框(单条横 + 单条竖,模拟天窗框架) */
    linear-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px) 0 50% / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px) 50% 0 / 100% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--hm-cyan) 7%, transparent), color-mix(in srgb, var(--hm-purple) 7%, transparent));
  border-color: color-mix(in srgb, var(--hm-cyan) 60%, transparent);
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--hm-cyan) 18%, transparent),
    0 0 32px color-mix(in srgb, var(--hm-cyan) 22%, transparent);
}

/* === 地板 .bottom = 发光地基(CORE) — 玻璃房的根 === */
.cube-face.bottom,
.cube-face.cube-face-core {
  background:
    /* 地基中心发光 — 像一块发光底座 */
    radial-gradient(circle at center,
      color-mix(in srgb, var(--hm-cyan) 32%, transparent) 0%,
      color-mix(in srgb, var(--hm-purple) 20%, transparent) 45%,
      rgba(8, 10, 26, 0.55) 85%),
    /* 一条横向"基座条纹" */
    linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px) 0 50% / 100% 100% no-repeat;
  border-color: color-mix(in srgb, var(--hm-cyan) 70%, transparent);
  box-shadow:
    inset 0 0 36px color-mix(in srgb, var(--hm-cyan) 28%, transparent),
    0 0 52px color-mix(in srgb, var(--hm-purple) 32%, transparent);
}

/* === 立方体下方椭圆投影 — 让玻璃房"站"在地上 === */
.cube-3d-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 220px;
  height: 26px;
  margin-left: -110px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    color-mix(in srgb, var(--hm-cyan) 32%, transparent) 0%,
    transparent 70%);
  filter: blur(8px);
  z-index: -2;
  pointer-events: none;
}

/* === 后景柔光晕(玻璃房整体氛围光,旋转 14s) === */
.cube-3d-wrap::before {
  content: '';
  position: absolute;
  inset: -44px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--hm-cyan, #00D4FF),
    var(--hm-blue, #4A8CFF),
    var(--hm-purple, #7B5BFF),
    var(--hm-pink, #FF5BB7),
    var(--hm-cyan, #00D4FF));
  filter: blur(42px);
  opacity: 0.30;
  z-index: -1;
  animation: cube-glow 14s linear infinite;
}
@keyframes cube-glow {
  to { transform: rotate(360deg); }
}

.platform-cube-side {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (max-width: 900px) {
  .cube-3d-wrap { width: 190px; height: 190px; }
  .cube-3d-wrap::after { width: 170px; margin-left: -85px; }
  .cube-face.front  { transform: translateZ(95px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(95px); }
  .cube-face.right  { transform: rotateY(90deg)  translateZ(95px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(95px); }
  .cube-face.top    { transform: rotateX(90deg)  translateZ(95px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(95px); }
  .cube-face .face-title { font-size: 13px; }
  .cube-face .face-desc { font-size: 10px; }
}

/* === platform 页:左 5 卡片纵列 + 右圆盘 5 节点(flex 让 disc 固定 380px) === */
.platform-split {
  display: flex;
  gap: 36px;
  align-items: stretch;
  margin-top: 8px;
  width: 100%;
}
.platform-cards-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.platform-card-row {
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 0;
  border-left: 3px solid transparent;
  transition: border-color 0.3s, transform 0.3s;
}
.platform-card-row.accent-cyan   { border-left-color: var(--hm-cyan); }
.platform-card-row.accent-blue   { border-left-color: var(--hm-blue); }
.platform-card-row.accent-purple { border-left-color: var(--hm-purple); }
.platform-card-row.accent-pink   { border-left-color: var(--hm-pink); }
.platform-card-row.accent-orange { border-left-color: var(--hm-orange); }
.card-row-marker {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  min-width: 26px;
  padding-top: 1px;
}
.card-row-body { flex: 1; min-width: 0; }
.card-row-body .platform-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.card-row-body .platform-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-strong);
}
.card-row-body .platform-card-desc {
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.platform-disc-side {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 520px;
  flex-shrink: 0;
}
.platform-disc-side .arch-disc {
  width: 440px !important;
  height: 440px !important;
  max-width: none !important;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: visible;
}
/* 流动光点加强 — cyan glow + 大一点,确保从 CORE 沿连线流向各节点的动画清晰可见 */
.platform-disc-side .arch-disc .flow-dot {
  fill: var(--hm-cyan, #00D4FF);
  r: 5;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.95)) drop-shadow(0 0 16px rgba(0, 212, 255, 0.6));
  opacity: 0.95;
}
/* 节点贴 disc 内边缘,不外推,确保不被 deck overflow:hidden 切到 */
.arch-disc-5 .node {
  z-index: 10 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  white-space: nowrap !important;
  background: rgba(8, 10, 26, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 999px !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.arch-disc-5 .node[data-pos="n1"] { top: 4%;     left: 50%;   right: auto; bottom: auto; transform: translateX(-50%); }
.arch-disc-5 .node[data-pos="n2"] { top: 28%;    right: 2%;   left: auto;  bottom: auto; transform: none; }
.arch-disc-5 .node[data-pos="n3"] { bottom: 12%; right: 4%;   left: auto;  top: auto;    transform: none; }
.arch-disc-5 .node[data-pos="n4"] { bottom: 12%; left: 4%;    right: auto; top: auto;    transform: none; }
.arch-disc-5 .node[data-pos="n5"] { top: 28%;    left: 2%;    right: auto; bottom: auto; transform: none; }

@media (max-width: 900px) {
  .platform-split { grid-template-columns: 1fr; gap: 16px; }
  .platform-disc-side .arch-disc { max-width: 280px !important; }
  .card-row-marker { font-size: 12px; min-width: 22px; }
  .card-row-body .platform-card-title { font-size: 13px; }
  .card-row-body .platform-card-desc { font-size: 11px; }
}

/* ============================================================
 * === World-class ambient motion (顶级 SaaS 标志性) ===
 * 参考: Linear (流光描边) / Vercel (慢漂背景) / Stripe (卡片浮起) / Apple (数字 pulse)
 * 全部 always-on,reduced-motion 用户除非显式加 .anim-off-on-reduce
 * ============================================================ */

/* 1) 平台卡片 hover 上浮 + 内部光晕扩散 */
.platform-card-row {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.45s ease;
  position: relative;
}
.platform-card-row:hover {
  transform: translateX(4px) translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 212, 255, 0.12), 0 0 0 1px rgba(0, 212, 255, 0.20) inset;
}
.platform-card-row.accent-cyan:hover   { box-shadow: 0 12px 32px color-mix(in srgb, var(--hm-cyan)   18%, transparent), 0 0 0 1px color-mix(in srgb, var(--hm-cyan)   30%, transparent) inset; }
.platform-card-row.accent-blue:hover   { box-shadow: 0 12px 32px color-mix(in srgb, var(--hm-blue)   18%, transparent), 0 0 0 1px color-mix(in srgb, var(--hm-blue)   30%, transparent) inset; }
.platform-card-row.accent-purple:hover { box-shadow: 0 12px 32px color-mix(in srgb, var(--hm-purple) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--hm-purple) 30%, transparent) inset; }
.platform-card-row.accent-pink:hover   { box-shadow: 0 12px 32px color-mix(in srgb, var(--hm-pink)   18%, transparent), 0 0 0 1px color-mix(in srgb, var(--hm-pink)   30%, transparent) inset; }
.platform-card-row.accent-orange:hover { box-shadow: 0 12px 32px color-mix(in srgb, var(--hm-orange) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--hm-orange) 30%, transparent) inset; }

/* 2) 通用 glass card hover lift — 给所有半透明卡片用 */
[class*="card"]:not(.card-row-body):not(.platform-card-row),
.glass-card, .feat-card, .stack-card, .scene-card, .pillar-card {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.glass-card:hover, .feat-card:hover, .stack-card:hover,
.scene-card:hover, .pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--hm-cyan) 18%, transparent) inset;
}

/* === Ambient motion 精简 (2026-05-26 用户决策): 7→3 ===
 * 删: kpi-pulse / film grain / shimmer-wide / cube-breath (装饰过密, 损可读)
 * 保留: shimmer (base.css 已有) + cube-spin (本文件) + live-blink (下面)
 * 顶级 SaaS (Linear/Stripe/Anthropic) 的共识: motion 为内容服务, 不堆装饰. */

/* 状态点持续呼吸(LIVE 红点感) — 唯一保留的 always-on ambient */
.live-dot, .status-dot, .pulse-dot {
  animation: live-blink 2s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { box-shadow: 0 0 0 0 currentColor, 0 0 12px currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent, 0 0 18px currentColor; opacity: 0.75; }
}