/* ==========================================================================
   太研智能 · 组件层 components.css
   职责：区块标题 → 卡片 → 按钮 → 徽章 → 指标 → 时间轴 → 案例 → 方案 → 表单 → 动效
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 区块标题组
   -------------------------------------------------------------------------- */

/* 技术标签：等宽字体 + 大字号间距，构成全站的"工程图纸"母题 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-cyan);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--grad-primary);
  box-shadow: var(--glow-sm);
}

.eyebrow--plain::before {
  display: none;
}

.section-head {
  display: grid;
  gap: var(--sp-4);
  max-width: min(64rem, 100%);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}

.section-head--center {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head--center .section-head__lead {
  margin-inline: auto;
}

.section-head__lead {
  max-width: 46rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* 大字标题下的发光分隔线 */
.rule {
  width: 68px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-primary);
  box-shadow: var(--glow-sm);
}

.section-head--center .rule {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. 卡片：玻璃拟态基底
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

/* 顶部渐变扫光线，悬停时点亮 */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-blue), var(--c-cyan), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

/* 内部柔光，避免纯平色块 */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 12% 0%, rgba(46, 125, 255, 0.14) 0%, transparent 58%);
  opacity: 0.9;
  pointer-events: none;
}

.card--flat {
  background: rgba(15, 30, 56, 0.42);
  box-shadow: none;
}

/* 悬停态：统一位移量与光效，避免出现多种不同幅度的"松散"动效 */
.card:hover,
.pain-col:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lg), var(--glow-md);
}

/* 时间轴不是卡片，没有背景与描边，套用卡片的大范围辉光会在空白处
   浮出一团难看的光晕，因此改为独立的淡入底板 + 小幅上移 */
.timeline__item:hover {
  transform: translateY(-4px);
}

.card:hover::before,
.pain-col:hover::before {
  opacity: 1;
}

.card--hover:focus-visible {
  border-color: var(--c-cyan);
}

/* 高亮卡：用于推荐项 / 重点案例 */
.card--accent {
  border-color: rgba(46, 125, 255, 0.55);
  background: linear-gradient(160deg, rgba(30, 74, 152, 0.5) 0%, rgba(12, 26, 50, 0.72) 62%);
  box-shadow: var(--shadow-lg), var(--glow-md);
}

.card--accent::before {
  opacity: 1;
}

/* 顶部渐变扫光线常亮（普通卡片仅在悬停时点亮） */
.card--hud::before {
  opacity: 1;
}

/* 卡片内的标题与正文 */
.card__title {
  font-size: var(--fs-h4);
  color: var(--text-1);
}

.card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

.card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
}

/* --------------------------------------------------------------------------
   3. 图标容器
   -------------------------------------------------------------------------- */
.icon-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(46, 125, 255, 0.24) 0%, rgba(34, 211, 238, 0.1) 100%);
  color: var(--c-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--glow-sm);
}

.icon-box svg {
  width: 24px;
  height: 24px;
}

.icon-box--lg {
  width: 60px;
  height: 60px;
  border-radius: var(--r-lg);
}

.icon-box--lg svg {
  width: 28px;
  height: 28px;
}

.icon-box--sm {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}

.icon-box--sm svg {
  width: 20px;
  height: 20px;
}

.icon-box--violet { color: var(--c-violet); }
.icon-box--blue { color: var(--c-blue-soft); }
.icon-box--green { color: var(--c-success); }

/* 图标 + 标题的横向排列头 */
.head-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* 主按钮：渐变底 + 悬停扫光 */
.btn--primary {
  background: var(--grad-primary);
  color: #04101F;
  box-shadow: 0 10px 28px -10px rgba(46, 125, 255, 0.75);
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-sheen);
  transform: translateX(-110%);
  transition: transform 0.65s var(--ease-out);
}

.btn--primary:hover::after {
  transform: translateX(110%);
}

.btn--primary:hover {
  box-shadow: 0 16px 38px -10px rgba(46, 125, 255, 0.85), var(--glow-cyan);
}

/* 次按钮：玻璃描边 */
.btn--ghost {
  border-color: var(--glass-border-hi);
  background: rgba(122, 168, 240, 0.07);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--ghost:hover {
  border-color: var(--c-cyan);
  background: rgba(34, 211, 238, 0.1);
  box-shadow: var(--glow-cyan);
}

/* 文字按钮 */
.btn--text {
  min-height: 44px;
  padding-inline: 0.35rem;
  border-radius: var(--r-xs);
  color: var(--c-cyan);
}

.btn--text:hover {
  transform: none;
  color: #7BEBFF;
}

.btn--text svg {
  transition: transform var(--dur) var(--ease-out);
}

.btn--text:hover svg {
  transform: translateX(3px);
}

.btn--lg {
  min-height: 54px;
  padding: 0.9rem 1.85rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   5. 徽章 / 标签
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  background: rgba(122, 168, 240, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
  white-space: nowrap;
}

.badge svg {
  width: 13px;
  height: 13px;
}

.badge--cyan {
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.12);
  color: #8FEDFF;
}

.badge--blue {
  border-color: rgba(46, 125, 255, 0.42);
  background: rgba(46, 125, 255, 0.14);
  color: #A9C9FF;
}

.badge--violet {
  border-color: rgba(124, 92, 255, 0.42);
  background: rgba(124, 92, 255, 0.14);
  color: #C6B7FF;
}

.badge--green {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.12);
  color: #8DE7B0;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 技术标签墙（算法 / 场景 / 能力关键词） */
.tag-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.tag {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, rgba(46, 125, 255, 0.14), rgba(15, 30, 56, 0.5));
  font-size: var(--fs-xs);
  color: var(--text-1);
  transition: border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.tag:hover {
  transform: translateY(-2px);
  border-color: var(--c-cyan);
  box-shadow: var(--glow-sm);
}

/* 标签被用作链接时（技术能力地图）属于可点击元素，
   默认 34px 高度低于触控热区下限，手机上需要补足 */
a.tag {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  a.tag {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   6. 指标数字
   -------------------------------------------------------------------------- */

/* 大数字 + 单位 + 说明 */
.stat {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 3.2vw, 2.65rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__unit {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
}

.stat__label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.stat__note {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* 信任数字条：横向玻璃长条 */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.trust-bar__item {
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--line-1);
}

.trust-bar__item:last-child {
  border-right: 0;
}

/* 窄屏：单列堆叠，分隔线由竖转横 */
@media (max-width: 768px) {
  .trust-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .trust-bar__item {
    border-right: 0;
    border-bottom: 1px solid var(--line-1);
  }

  .trust-bar__item:last-child {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   7. 时间轴（技术演进三阶段）
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

/* 横向发光主轴 */
.timeline::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-blue), var(--c-cyan), var(--c-violet), transparent);
  opacity: 0.55;
}

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding-top: 0;
}

.timeline__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--glass-border-hi);
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--c-cyan);
  box-shadow: var(--glow-sm), inset 0 0 0 6px rgba(6, 11, 24, 0.9);
}

.timeline__node svg {
  width: 22px;
  height: 22px;
}

.timeline__stage {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-3);
  text-transform: uppercase;
}

.timeline__title {
  font-size: var(--fs-h4);
  color: var(--text-1);
}

/* 窄屏：转为纵向单列，隐藏横向主轴。
   写在组件层是为了避免被后加载的基础规则覆盖。 */
@media (max-width: 768px) {
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .timeline::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. 服务 / 优势网格卡
   -------------------------------------------------------------------------- */
.feature-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.feature-card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-3);
}

.feature-card__title {
  font-size: var(--fs-h4);
  color: var(--text-1);
}

.feature-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* 要点清单（勾选 / 箭头项目符号） */
.check-list {
  display: grid;
  gap: 0.7rem;
}

.check-list li {
  position: relative;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.check-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--c-cyan);
}

/* --------------------------------------------------------------------------
   9. 痛点 → 价值 对照卡
   -------------------------------------------------------------------------- */
/* 三列共用一份行轨道（subgrid），
   "核心痛点""技术价值"两条带的行高由三列中内容最高者决定，
   因此三列标题、痛点带、价值带在水平方向严格对齐。 */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: 0;
}

.pain-col {
  /* 跨父级 5 个行轨道，并继承其尺寸 */
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pain-col__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(1.35rem, 2.2vw, 1.75rem) clamp(1.1rem, 2vw, 1.6rem) var(--sp-4);
}

.pain-col__title {
  font-size: var(--fs-h3);
  color: var(--text-1);
}

.pain-card__band {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--line-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pain-card__band--pain {
  background: rgba(239, 68, 68, 0.09);
  color: #FFA9A9;
}

.pain-card__band--value {
  background: linear-gradient(90deg, rgba(46, 125, 255, 0.22), rgba(34, 211, 238, 0.12));
  color: #9FE9FF;
}

.pain-card__band svg {
  width: 15px;
  height: 15px;
}

.pain-card__body {
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.pain-card__body h4 {
  margin-bottom: 0.6rem;
  font-size: var(--fs-h4);
}

.pain-card__body p {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

.pain-card__body--pain {
  background: rgba(10, 20, 40, 0.55);
}

.pain-card__body--value {
  background: rgba(16, 36, 68, 0.6);
}

/* 平板：两列；第三块独占下一行 */
@media (max-width: 1024px) {
  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 手机：单列堆叠，取消 subgrid 让每块独立成卡 */
@media (max-width: 768px) {
  .pain-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: clamp(1rem, 3vw, 1.5rem);
  }

  .pain-col {
    grid-row: auto;
    grid-template-rows: none;
  }
}

/* 不支持 subgrid 的环境（Chrome 117 以下的 Android WebView 等）：
   .pain-col 上的 grid-template-rows: subgrid 会被整条丢弃，
   但 grid-row: span 5 仍然生效，导致列内色带被拉伸、列间严重错位。
   这里退回"每块独立成卡"，保证三端信息完整、层级清晰。 */
@supports not (grid-template-rows: subgrid) {
  .pain-grid {
    grid-template-rows: none;
    row-gap: clamp(1rem, 2vw, 1.75rem);
  }

  .pain-col {
    grid-row: auto;
    grid-template-rows: none;
  }
}

/* --------------------------------------------------------------------------
   10. 交付方案卡（四档）
   -------------------------------------------------------------------------- */
.plan-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-4);
  align-content: start;
}

.plan-card__tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.plan-card__name {
  font-size: var(--fs-h4);
  color: var(--text-1);
}

.plan-card__slogan {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--c-cyan);
}

.plan-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* 同排四档卡片描述长短不一，把周期块推到底部，
   使其与卡内"适用："行保持同一基线，避免横向错位 */
.plan-card__price {
  margin-top: auto;
}

/* 周期信息块：纵向堆叠，避免窄卡片下数字被说明文字挤压换行 */
.plan-card__price {
  display: grid;
  gap: 0.3rem;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}

.plan-card__price strong {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.plan-card__price span {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-3);
}

.plan-card__flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.35rem 0.9rem;
  border-bottom-left-radius: var(--r-md);
  background: var(--grad-primary);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #04101F;
}

/* --------------------------------------------------------------------------
   11. 案例卡
   -------------------------------------------------------------------------- */
.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-content: start;
}

.case-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.case-card__domain {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.case-card__domain svg {
  width: 15px;
  height: 15px;
}

.case-card__title {
  font-size: var(--fs-h4);
  color: var(--text-1);
}

.case-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* 同排案例卡的标题与描述长短不一，把指标条推到底部，
   保证指标条与"展开"按钮在同一基线上 */
.case-card__metrics {
  margin-top: auto;
}

/* 案例指标条 */
.case-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) clamp(1.25rem, 3vw, 2.25rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
}

.case-card__metric {
  display: grid;
  gap: 0.15rem;
}

.case-card__metric b {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.case-card__metric span {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* 案例展开详情（默认折叠） */
.case-card__detail {
  display: grid;
  grid-row-gap: var(--sp-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out),
    opacity var(--dur) var(--ease-out),
    margin-top var(--dur) var(--ease-out);
}

.case-card.is-open .case-card__detail {
  /* 取较大值以容纳窄屏单列下的全部要点，避免内容被裁切 */
  max-height: 1800px;
  opacity: 1;
  margin-top: var(--sp-4);
}

.case-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-cyan);
  transition: color var(--dur-fast) var(--ease-out);
}

.case-card__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.case-card.is-open .case-card__toggle svg {
  transform: rotate(180deg);
}

/* 分类筛选栏 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.filter-btn {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  background: rgba(122, 168, 240, 0.06);
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: all var(--dur-fast) var(--ease-out);
}

.filter-btn:hover {
  border-color: var(--glass-border-hi);
  color: var(--text-1);
  transform: translateY(-2px);
}

.filter-btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad-primary);
  color: #04101F;
  font-weight: 600;
  box-shadow: var(--glow-sm);
}

/* 筛选后隐藏 */
.case-item[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   12. 流程步骤（2D→3D 流水线、四步法等）
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
  gap: var(--sp-3);
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: rgba(15, 30, 56, 0.42);
  transition: transform var(--dur) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.flow__step:hover {
  transform: translateX(6px);
  border-color: var(--glass-border-hi);
  background: rgba(20, 42, 76, 0.6);
}

.flow__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-cyan);
  padding-top: 3px;
}

.flow__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.flow__text b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--fs-body);
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   13. 底部咨询横幅
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.35rem, 4vw, 3.5rem);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(46, 125, 255, 0.4) 0%, transparent 62%),
    linear-gradient(150deg, rgba(20, 48, 92, 0.75), rgba(8, 18, 38, 0.85));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg), var(--glow-md);
  overflow: hidden;
}

/* 横幅内的扫描网格纹理 */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(122, 190, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122, 190, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}

.cta-banner > * {
  position: relative;
  z-index: 1;
}

.cta-banner__title {
  font-size: var(--fs-h2);
  max-width: 24em;
}

.cta-banner__text {
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   15. 联系方式卡
   -------------------------------------------------------------------------- */
.contact-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.contact-card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.contact-card__value {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  color: var(--text-1);
  word-break: break-word;
}

.contact-card__value a:hover {
  color: var(--c-cyan);
}

.contact-card__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-3);
}

/* 一键复制按钮 */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: rgba(122, 168, 240, 0.07);
  font-size: var(--fs-xs);
  color: var(--text-2);
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.copy-btn svg {
  width: 15px;
  height: 15px;
}

.copy-btn:hover {
  border-color: var(--c-cyan);
  color: var(--text-1);
}

.copy-btn.is-done {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.12);
  color: #8DE7B0;
}

/* --------------------------------------------------------------------------
   16. 引用 / 定位语横幅
   -------------------------------------------------------------------------- */
.callout {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.35rem, 3vw, 2.25rem) clamp(1.35rem, 3vw, 2.5rem);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--c-cyan);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(100deg, rgba(46, 125, 255, 0.16) 0%, rgba(12, 26, 50, 0.5) 65%);
}

.callout__text {
  max-width: 46rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-1);
}

.callout__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   17. 页头（内页 Hero）
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(2.75rem, 7vw, 5.5rem));
  /* 叠加全面屏顶部安全区，与 .site-header 的 padding-top 保持一致 */
  padding-top: calc(var(--nav-h) + clamp(2.75rem, 7vw, 5.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* 粒子画布是绝对定位元素，需让内容容器建立层级避免被盖住 */
.page-hero > .u-container {
  position: relative;
  z-index: 1;
}

.page-hero__inner {
  display: grid;
  gap: var(--sp-5);
  max-width: 76ch;
}

.page-hero__title {
  font-size: var(--fs-h1);
}

.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

/* 面包屑 */
.crumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.crumb svg {
  width: 13px;
  height: 13px;
}

.crumb a {
  /* 面包屑文字仅 12px，触控热区过小：
     用等量负外边距抵消内边距，视觉排版完全不变，热区高度提升到约 40px */
  padding-block: 0.7rem;
  margin-block: -0.7rem;
}

.crumb a:hover {
  color: var(--c-cyan);
}

/* --------------------------------------------------------------------------
   18. 首页 Hero 专属
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 不支持 svh 的环境回退到 vh，否则整条声明失效会让首屏高度塌陷 */
  min-height: min(100vh, 900px);
  min-height: min(100svh, 900px);
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4.5rem));
  /* 叠加全面屏顶部安全区，与 .site-header 的 padding-top 保持一致 */
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 900px;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero__title em {
  font-style: normal;
  background: var(--grad-tri);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-2);
}

.hero__company {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hero__company::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--line-2);
}

/* 向下滚动提示 */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.scroll-hint__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--c-cyan), transparent);
  animation: hint-slide 2.1s var(--ease-in-out) infinite;
}

@keyframes hint-slide {
  0% { transform: scaleY(0.25); transform-origin: top; opacity: 0.2; }
  45% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

@media (max-width: 768px) {
  .scroll-hint {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-bottom: clamp(2.5rem, 9vw, 3.5rem);
  }
}

/* --------------------------------------------------------------------------
   19. 滚动进入动效
   -------------------------------------------------------------------------- */
/* 仅在 JS 可用时隐藏（html.js 由 main.js 注入），无 JS 环境内容始终可见。
   关键：隐藏态写在 :not(.is-in) 上，可见态不写任何规则。
   这样 transform 归零时不会再有一条高优先级规则压住卡片自身的 :hover 位移，
   否则 .js .reveal.is-in（3 个类）会永久胜过 .card:hover（2 个），悬停位移失效。 */
.js .reveal {
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}

.js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}

/* 错峰延迟（由 main.js 依据 data-delay 写入 --d） */
.js .reveal[style*="--d"] {
  transition-delay: var(--d);
}

/* 纯 CSS 兜底：偏好减少动效时，内容必须直接可见，
   不能依赖 JS 的 matchMedia 判断（避免"JS 已加载但媒体查询未生效"时内容被隐藏） */
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}

/* 打印时同样保证全部内容可见 */
@media print {
  .js .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   20. 通用小工具
   -------------------------------------------------------------------------- */
.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-9 { margin-top: var(--sp-9); }

.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

/* 案例筛选容器：让卡片等高铺满单元格 */
.case-item {
  display: flex;
}

.case-item > .case-card {
  flex: 1 1 auto;
  width: 100%;
}

/* 两栏图文 */
.media-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.15rem, 2.5vw, 1.9rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(24, 52, 96, 0.55), rgba(8, 18, 38, 0.7));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.media-frame svg {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   21. 统一交互规范
   全站共用一套悬停语言：卡片位移 → 描边点亮 → 图标/节点同步发光。
   只动 transform / shadow / color，避免触发重排。
   -------------------------------------------------------------------------- */

/* 时间轴整项补上位移过渡 */
.timeline__item {
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out);
}

/* 悬停时淡入的柔和底板：有明确的容器边界，但不会出现浮空光晕 */
.timeline__item::before {
  content: "";
  position: absolute;
  inset: -12px -12px -16px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(46, 125, 255, 0.1) 0%, rgba(12, 26, 50, 0.28) 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.timeline__item:hover::before {
  opacity: 1;
  border-color: var(--line-1);
}

/* 图标容器与时间轴节点补上过渡 */
.icon-box,
.timeline__node {
  transition: transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

/* 悬停时卡内图标（或时间轴节点）与卡片同步响应 */
.card:hover .icon-box,
.pain-col:hover .icon-box,
.timeline__item:hover .timeline__node {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--c-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--glow-cyan);
}

/* 时间轴：悬停时阶段号与标题一起点亮，形成"推进感" */
.timeline__stage,
.timeline__title {
  transition: color var(--dur) var(--ease-out);
}

.timeline__item:hover .timeline__stage,
.timeline__item:hover .timeline__title {
  color: var(--c-cyan);
}

/* 痛点对照：两条色带加深，标题转为高亮青 */
.pain-col__title {
  transition: color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.pain-col:hover .pain-card__band--pain {
  background: rgba(239, 68, 68, 0.16);
}

.pain-col:hover .pain-card__band--value {
  background: linear-gradient(90deg, rgba(46, 125, 255, 0.36), rgba(34, 211, 238, 0.22));
}

.pain-col:hover .pain-col__title {
  color: var(--c-cyan);
}

/* 触控设备没有真正的悬停态，点按后 :hover 会残留，
   让卡片 / 步骤 / 标签一直停在"被提起"的位移上。
   这里统一取消位移类反馈，颜色与描边高亮保留作为点按后的状态提示。 */
@media (hover: none) {
  .card:hover,
  .pain-col:hover,
  .timeline__item:hover,
  .flow__step:hover,
  .tag:hover,
  .filter-btn:hover,
  .btn:hover {
    transform: none;
  }
}

/* 打印 / 极简环境下的可读性兜底 */
@media print {
  .bg-layer,
  .site-header,
  .nav-drawer,
  .nav-overlay,
  .to-top {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }
}