/* ==========================================================================
   product-zhiling.css —— 知令智能工作台产品页专属样式
   --------------------------------------------------------------------------
   只放本页专属组件（经 product_zhiling.html 的 extra_css block 引入），
   全局设计体系（导航/页脚/hero/卡片/栅格/徽章/FAQ/CTA/响应式）见 site.css。

   目录：
     1. Hero：知令字标图 + 全场景标语排版
     2. 核心能力网格：能力卡图标品牌化 + 平板断点两列
     3. 多端协同：平台标签（.platform-chip）
     4. 多模型适配横幅（.model-banner / .model-chip--*）
     5. CTA 备注行（.cta-banner-note）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero：知令字标图 + 全场景标语
   -------------------------------------------------------------------------- */
.zhiling-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

/* 知令字标图（#5273FF）：深色 Hero 上叠加品牌光晕 */
.zhiling-wordmark {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(82, 115, 255, 0.5));
}

/* 标语随 hero-title 字号缩放（44px → ≈30px），字距拉开 */
.zhiling-hero-slogan {
  font-size: 0.68em;
  letter-spacing: 2px;
}

/* 小屏收紧字标 */
@media (max-width: 480px) {
  .zhiling-wordmark {
    width: 200px;
  }
}

/* --------------------------------------------------------------------------
   2. 核心能力网格：能力卡图标品牌化 + 平板断点两列
   -------------------------------------------------------------------------- */
/* 能力卡图标：蓝青渐变浅底，与知令品牌呼应 */
.zhiling-cap-grid .card-icon {
  background: linear-gradient(135deg, rgba(0, 198, 255, 0.16) 0%, rgba(0, 114, 255, 0.16) 100%);
}

/* 平板（≤1024px）：8 卡两列排布，避免 4 列挤压（≤768px 由 site.css 收为单列） */
@media (max-width: 1024px) {
  .zhiling-cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   3. 多端协同：平台标签（.platform-chip）
   -------------------------------------------------------------------------- */
.platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: var(--radius-pill);
}

.platform-chip--alt {
  color: var(--c-accent-deep);
  background: rgba(0, 198, 255, 0.12);
}

/* --------------------------------------------------------------------------
   4. 多模型适配横幅（.model-banner）
   深色科技横幅，位于浅色内容区之间，与 Hero / CTA 深色区呼应。
   -------------------------------------------------------------------------- */
.model-banner {
  position: relative;
  padding: var(--sp-8) 0;
  background:
    radial-gradient(ellipse 55% 60% at 80% 0%, rgba(0, 114, 255, 0.3), transparent 60%),
    radial-gradient(ellipse 45% 50% at 8% 100%, rgba(0, 198, 255, 0.16), transparent 60%),
    linear-gradient(150deg, var(--c-navy-deep) 0%, var(--c-navy-mid) 60%, var(--c-navy) 100%);
  color: var(--c-on-navy);
  text-align: center;
  overflow: hidden;
}

.model-banner-inner {
  position: relative;
  z-index: 1;
}

/* 眉题：小号字距拉开 */
.model-banner-kicker {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

.model-banner-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-5);
}

/* 模型徽章行 */
.model-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* 模型徽章：品牌色渐变胶囊 + hover 抬升 */
.model-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.model-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
}

.model-chip--deepseek { background: linear-gradient(135deg, #4d6bfe 0%, #2f44c9 100%); }
.model-chip--glm      { background: linear-gradient(135deg, #7c5cff 0%, #5b3fd4 100%); }
.model-chip--kimi     { background: linear-gradient(135deg, #334155 0%, #0f172a 100%); }
.model-chip--mimo     { background: linear-gradient(135deg, #ff8a3d 0%, #e05a00 100%); }
.model-chip--gpt      { background: linear-gradient(135deg, #10a37f 0%, #0b7a5e 100%); }
.model-chip--claude   { background: linear-gradient(135deg, #e07a52 0%, #b85a3c 100%); }

/* 适配说明 */
.model-banner-desc {
  max-width: 760px;
  margin: 0 auto;
  color: var(--c-on-navy-muted);
}

/* 移动端徽章收紧 */
@media (max-width: 480px) {
  .model-chip {
    padding: 6px 16px;
    font-size: var(--fs-sm);
  }

  .model-banner {
    padding: var(--sp-7) 0;
  }
}

/* --------------------------------------------------------------------------
   5. CTA 备注行（.cta-banner-note）
   -------------------------------------------------------------------------- */
.cta-banner-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-on-navy-faint);
}

.cta-banner-note a {
  color: var(--c-accent);
}

.cta-banner-note a:hover {
  color: #fff;
}