/* =============================================================
   V3 · 区块层：Hero / 指标带 / 痛点 / 时间轴 / 能力网格 / 场景 /
                私有部署对照 / 定价 / 转化条 / FAQ
   ============================================================= */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--mkt-space-20) var(--mkt-space-24);
  background: var(--color-bg-base);
}
.hero__aurora { position: absolute; inset: 0; pointer-events: none; }
.hero__aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(18px); }
.hero__aurora span:nth-child(1) { width: 620px; height: 620px; top: -260px; left: -140px; background: var(--mkt-aurora-brand); animation: drift 18s ease-in-out infinite alternate; }
.hero__aurora span:nth-child(2) { width: 560px; height: 560px; top: -160px; right: -120px; background: var(--mkt-aurora-ai); animation: drift 22s ease-in-out infinite alternate-reverse; }
.hero__aurora span:nth-child(3) { width: 460px; height: 460px; bottom: -240px; left: 42%; background: var(--mkt-aurora-teal); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.12); } }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: var(--mkt-space-16);
}
.hero__copy { position: relative; z-index: 1; }
.hero__title { margin-top: var(--space-6); }
.hero__title .t-gradient { display: inline; }
.hero__sub { margin-top: var(--space-6); max-width: 520px; }
.hero__actions { margin-top: var(--space-8); }
.hero__trust {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-default);
  display: flex; flex-wrap: wrap; gap: var(--space-6);
}
.hero__trust li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.hero__trust svg { width: 16px; height: 16px; color: var(--color-teal-primary); flex: none; }

.hero__visual { position: relative; }
.hero__visual-glow {
  position: absolute; inset: 8% -6% 4% 8%;
  background: var(--gradient-ai);
  filter: blur(60px);
  opacity: .20;
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- 指标带 ---------- */
.stat-band { padding-block: var(--space-10); background: var(--color-bg-surface); border-block: 1px solid var(--color-border-default); }
.stat-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat { text-align: center; padding-inline: var(--space-4); }
.stat + .stat { border-left: 1px solid var(--color-border-default); }
.stat__num { font-family: var(--font-family-num); font-size: var(--font-size-display); font-weight: var(--font-weight-bold); color: var(--color-brand-primary); line-height: 1.2; }
.stat__num .unit { font-size: var(--font-size-h2); margin-left: 2px; }
.stat__label { margin-top: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-tertiary); }

/* ---------- 痛点卡 ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.pain-card {
  display: flex; gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--mkt-ease-out), box-shadow var(--duration-base);
}
.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pain-card__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; background: var(--color-danger-bg); color: var(--color-danger); }
.pain-card__icon svg { width: 20px; height: 20px; }
.pain-card h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semi); }
.pain-card p { margin-top: var(--space-2); font-size: var(--font-size-body); color: var(--color-text-secondary); }
.pain-card__answer { margin-top: var(--space-3); font-size: var(--font-size-caption); color: var(--color-teal-primary); font-weight: var(--font-weight-semi); }

/* ---------- 四步时间轴 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 28px; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-ai-primary), var(--color-teal-primary));
  opacity: .25;
}
.step { position: relative; text-align: center; padding-inline: var(--space-2); }
.step__num {
  position: relative;
  width: 56px; height: 56px;
  margin-inline: auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-brand-subtle);
  color: var(--color-brand-primary);
  font-family: var(--font-family-num);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-card);
}
.step:nth-child(2) .step__num { color: var(--color-ai-primary); border-color: var(--color-ai-subtle); }
.step:nth-child(4) .step__num { color: var(--color-teal-primary); border-color: var(--color-success-bg); }
.step h3 { margin-top: var(--space-5); font-size: var(--font-size-h3); font-weight: var(--font-weight-semi); }
.step p { margin-top: var(--space-2); font-size: var(--font-size-body); color: var(--color-text-secondary); }

/* ---------- 能力网格 ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.feature-card { display: flex; flex-direction: column; }
.feature-card h3 { margin-top: var(--space-5); font-size: var(--font-size-h1); font-weight: var(--font-weight-semi); }
.feature-card p { margin-top: var(--space-3); font-size: var(--font-size-body); color: var(--color-text-secondary); flex: 1; }
.feature-card ul { margin-top: var(--space-5); display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.feature-card li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.feature-card li svg { width: 15px; height: 15px; color: var(--color-teal-primary); flex: none; margin-top: 3px; }

/* ---------- 场景切换 ---------- */
.scene-panel { display: none; }
.scene-panel.is-active { display: block; animation: fadeUp var(--duration-base) var(--mkt-ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.scene-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.scene-card__visual {
  min-height: 280px;
  border-radius: var(--radius-xl);
  background: var(--gradient-ai-soft);
  border: 1px solid var(--color-border-default);
  display: grid; place-items: center;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.scene-card__visual::after {
  content: "";
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: var(--mkt-aurora-ai); filter: blur(30px); bottom: -100px; right: -80px;
}
.scene-quote {
  position: relative; z-index: 1;
  background: var(--mkt-glass-bg);
  border: 1px solid var(--mkt-glass-border);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-overlay);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-primary);
  line-height: 1.8;
}
.scene-quote span { display: block; margin-top: var(--space-3); font-size: var(--font-size-mini); color: var(--color-text-tertiary); }
.scene-card__body h3 { font-size: var(--font-size-h1); font-weight: var(--font-weight-semi); }
.scene-card__body p { margin-top: var(--space-4); font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: 1.9; }
.scene-card__body ul { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.scene-card__body li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-size-body); color: var(--color-text-secondary); }
.scene-card__body li svg { width: 16px; height: 16px; color: var(--color-brand-primary); flex: none; margin-top: 3px; }

/* ---------- 接入前后对照 ---------- */
.compare-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.compare-col { padding: var(--space-8); border-radius: var(--radius-xl); border: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
.compare-col--after { border-color: var(--color-brand-subtle); background: var(--mkt-mesh); }
.compare-col h3 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-h2); font-weight: var(--font-weight-semi); }
.compare-col ul { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.compare-col li { display: flex; gap: var(--space-3); font-size: var(--font-size-body); color: var(--color-text-secondary); }
.compare-col li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.compare-col--before li svg { color: var(--color-text-tertiary); }
.compare-col--after li svg { color: var(--color-success); }

/* ---------- 私有独立部署对照（两栏） ---------- */
.deploy-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.deploy-col {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--mkt-ease-out), box-shadow var(--duration-base), border-color var(--duration-base);
}
.deploy-col:hover { transform: translateY(-6px); box-shadow: var(--mkt-shadow-float); border-color: var(--color-brand-subtle); }
.deploy-col--accent { background: var(--mkt-glass-bg); border-color: var(--mkt-glass-border); backdrop-filter: blur(18px); }
.deploy-col__head { display: flex; align-items: center; gap: var(--space-4); }
.deploy-col__head h3 { font-size: var(--font-size-h1); font-weight: var(--font-weight-semi); }
.deploy-col__lead { margin-top: var(--space-5); font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: 1.85; }
.deploy-col__list { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.deploy-col__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-size-body); color: var(--color-text-secondary); }
.deploy-col__list li svg { width: 16px; height: 16px; color: var(--color-teal-primary); flex: none; margin-top: 3px; }
.deploy-col__foot { margin-top: auto; padding-top: var(--space-6); font-size: var(--font-size-caption); color: var(--color-text-tertiary); }
.deploy-col__badge { position: absolute; top: var(--space-6); right: var(--space-6); }

.deploy-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.deploy-cap { padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); }
.deploy-cap h4 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-body); font-weight: var(--font-weight-semi); }
.deploy-cap h4 svg { width: 16px; height: 16px; color: var(--color-brand-primary); }
.deploy-cap p { margin-top: var(--space-2); font-size: var(--font-size-mini); color: var(--color-text-tertiary); line-height: 1.7; }

/* ---------- 定价 ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.price-card {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--mkt-ease-out), box-shadow var(--duration-base);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.price-card--featured { border: 2px solid var(--color-brand-primary); box-shadow: var(--mkt-glow-brand); position: relative; }
.price-card__flag {
  position: absolute; top: calc(var(--space-3) * -1); left: 50%; transform: translateX(-50%);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--gradient-ai);
  color: var(--color-text-inverse);
  font-size: var(--font-size-mini); font-weight: var(--font-weight-semi);
  white-space: nowrap;
}
.price-card__name { font-size: var(--font-size-h2); font-weight: var(--font-weight-semi); }
.price-card__desc { margin-top: var(--space-2); min-height: 2.8em; font-size: var(--font-size-mini); color: var(--color-text-tertiary); }
.price-card__price { margin-top: var(--space-5); display: flex; align-items: baseline; gap: var(--space-1); font-family: var(--font-family-num); }
.price-card__price .cur { font-size: var(--font-size-h2); font-weight: var(--font-weight-semi); }
.price-card__price .val { font-size: var(--font-size-display); font-weight: var(--font-weight-bold); letter-spacing: -.02em; }
.price-card__price .per { font-family: var(--font-family-sans); font-size: var(--font-size-caption); color: var(--color-text-tertiary); }
.price-card__quota { margin-top: var(--space-3); font-size: var(--font-size-caption); color: var(--color-brand-primary); font-weight: var(--font-weight-semi); }
.price-card__list { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); display: grid; gap: var(--space-3); flex: 1; }
.price-card__list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-size-body); color: var(--color-text-secondary); }
.price-card__list li svg { width: 15px; height: 15px; color: var(--color-teal-primary); flex: none; margin-top: 3px; }
.price-card .btn { margin-top: var(--space-6); }

.duo-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.duo-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); background: var(--color-bg-surface); }
.duo-card h3 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-h3); font-weight: var(--font-weight-semi); }
.duo-card p { margin-top: var(--space-3); font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: 1.85; }

.recharge-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.recharge-item { padding: var(--space-5) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-bg-surface); text-align: center; }
.recharge-item__pay { font-family: var(--font-family-num); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); }
.recharge-item__get { margin-top: var(--space-1); font-size: var(--font-size-caption); color: var(--color-brand-primary); font-weight: var(--font-weight-semi); }
.recharge-item__unit { margin-top: var(--space-1); font-size: var(--font-size-mini); color: var(--color-text-tertiary); }

/* ---------- FAQ ---------- */
.faq-layout { max-width: var(--mkt-container-narrow); margin-inline: auto; }

/* ---------- 转化条 ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--mkt-space-20);
  border-radius: var(--radius-xl);
  background: var(--gradient-ai);
  color: var(--color-text-inverse);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: var(--mkt-aurora-teal);
  top: -220px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--mkt-title-size); font-weight: var(--font-weight-bold); line-height: 1.3; }
.cta-band p { margin-top: var(--space-4); font-size: var(--font-size-body-lg); opacity: .9; }
.cta-band .btn-group { justify-content: center; margin-top: var(--space-8); }
.cta-band .btn--primary { background: var(--color-bg-surface); color: var(--color-brand-primary); box-shadow: var(--shadow-overlay); }
.cta-band .btn--outline-light { color: var(--color-text-inverse); }
.cta-band__note { margin-top: var(--space-6); font-size: var(--font-size-mini); opacity: .78; }

/* ---------- 页面头（内页） ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--mkt-space-16) var(--space-12);
  background: var(--mkt-mesh);
  border-bottom: 1px solid var(--color-border-default);
  text-align: center;
}
.page-hero::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: var(--mkt-aurora-ai); top: -300px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { margin-top: var(--space-5); }
.page-hero p { margin-top: var(--space-5); max-width: 680px; margin-inline: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recharge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deploy-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .hero__copy { max-width: 680px; }
  .hero__visual { max-width: 560px; width: 100%; margin-inline: auto; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-10); }
  .steps::before { display: none; }
  .scene-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hero { padding-block: var(--mkt-space-16) var(--mkt-space-20); }
  .stat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .stat:nth-child(3) { border-left: 0; }
  .stat__num { font-size: var(--font-size-h1); }
  .pain-grid, .feature-grid, .compare-split, .deploy-compare, .duo-note { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .recharge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deploy-capabilities { grid-template-columns: minmax(0, 1fr); }
  .cta-band { padding-block: var(--mkt-space-16); }
  .scene-card__visual { min-height: 200px; }
}