/* ==========================================================================
   HCowCC 门户全局设计体系（site.css）
   --------------------------------------------------------------------------
   现代软件科技公司门户：深蓝科技 Hero + 浅色内容区 + 卡片化 + 克制动效。
   本文件只放「设计 token + 全局组件」，页面专属样式一律写入各页自己的
   CSS 文件（经 base.html 的 extra_css block 引入），不要追加到本文件。

   目录：
     1. 设计 token（CSS 变量）
     2. Reset 与基础排版
     3. 布局工具（.container / .section / .grid-* / .section-title）
     4. 按钮体系（.btn / .btn-* / .btn-lg）
     5. 顶部导航（.site-header / 滚动态 .scrolled / 移动端汉堡）
     6. Hero 区（深色渐变 + 标题 + CTA + 徽章标签）
     7. 卡片（.card）
     8. 对比表（.cmp-table / .table-scroll）
     9. 配置卡（.tier-card / 推荐角标）
    10. FAQ 折叠（.faq-item，配合 site.js）
    11. CTA 横幅（.cta-banner）
    12. 页脚（.site-footer 多列 + 备案行）
    13. 动效（.reveal 滚动入场 / hover 过渡）
    14. 响应式断点（≤768px / ≤480px）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计 token（CSS 变量）
   视觉基调：主色深蓝 #0a1e3c（Hero/深色区），品牌蓝 #1a5fb4（主按钮/链接），
   蓝青渐变 #00c6ff→#0072ff（强调点缀，与知令品牌协调）。
   -------------------------------------------------------------------------- */
:root {
  /* 色彩：品牌 */
  --c-primary: #1a5fb4;            /* 门户蓝：主按钮、链接、高亮 */
  --c-primary-strong: #0d4d9e;     /* 门户蓝加深：hover/按下 */
  --c-primary-soft: #e8f0fb;       /* 门户蓝浅底：徽章、高亮背景 */
  --c-accent: #00c6ff;             /* 蓝青：渐变起色、点缀 */
  --c-accent-deep: #0072ff;        /* 蓝青：渐变止色 */
  --c-accent-grad: linear-gradient(120deg, #00c6ff 0%, #0072ff 100%);

  /* 色彩：深色科技区（Hero / CTA 横幅 / 页脚） */
  --c-navy: #0a1e3c;               /* 主深蓝 */
  --c-navy-deep: #0a0f1e;          /* Hero 渐变起点（深蓝黑） */
  --c-navy-mid: #142a52;           /* Hero 渐变终点 */
  --c-navy-light: #1d3a66;         /* 深色区次级面板 */

  /* 色彩：中性 */
  --c-bg: #ffffff;                 /* 内容区背景 */
  --c-bg-alt: #f5f7fa;             /* 交替区块背景 */
  --c-text: #2f3542;               /* 正文 */
  --c-text-muted: #6b7280;         /* 弱化文本 */
  --c-text-faint: #9aa3af;         /* 更弱文本（占位/脚注） */
  --c-border: #e5e7eb;             /* 常规描边 */
  --c-border-strong: #d1d5db;      /* 强描边 */

  /* 语义色 */
  --c-success: #16a34a;
  --c-warning: #d97706;
  --c-danger: #dc2626;

  /* 文字色（深色背景上的反白） */
  --c-on-navy: #ffffff;
  --c-on-navy-muted: rgba(255, 255, 255, 0.72);
  --c-on-navy-faint: rgba(255, 255, 255, 0.5);

  /* 字体 */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  /* 字号层级 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-h3: 22px;
  --fs-h2: 28px;
  --fs-h1: 36px;
  --fs-hero: 44px;                 /* Hero 大标题，≤768px 收紧 */

  /* 行高 */
  --lh-tight: 1.3;
  --lh-base: 1.7;

  /* 间距体系（8px 基准） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;                    /* 板块垂直留白 */
  --sp-9: 96px;

  /* 布局 */
  --container: 1200px;             /* 内容容器最大宽度 */
  --header-h: 68px;                /* 导航高度 */

  /* 圆角 */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(10, 30, 60, 0.08);
  --shadow: 0 4px 16px rgba(10, 30, 60, 0.1);
  --shadow-lg: 0 12px 32px rgba(10, 30, 60, 0.16);   /* 卡片 hover 抬升 */
  --shadow-navy: 0 8px 24px rgba(0, 114, 255, 0.25); /* 深色区按钮光晕 */

  /* 过渡 */
  --t-fast: 0.16s ease;
  --t-base: 0.25s ease;
  --t-slow: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* z-index 层级 */
  --z-header: 100;
  --z-mobile-nav: 90;
  --z-tier-badge: 5;
}

/* --------------------------------------------------------------------------
   2. Reset 与基础排版
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 锚点定位时预留 sticky 导航高度 */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--c-primary-strong);
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-tight);
  color: inherit;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin-bottom: var(--sp-4);
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--c-primary);
  color: #fff;
}

/* 无障碍：减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   3. 布局工具
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.section {
  padding: var(--sp-8) 0;
}

.section--alt {
  background: var(--c-bg-alt);
}

.section--tight {
  padding: var(--sp-7) 0;
}

/* 标题区：标题 + 描述，居中 */
.section-title {
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: var(--sp-3);
}

.section-desc {
  text-align: center;
  color: var(--c-text-muted);
  max-width: 680px;
  margin: 0 auto var(--sp-7);
}

/* 栅格：响应式塌缩为单列（≤768px） */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--sp-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* 文本工具 */
.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.lead {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
}

/* 分隔线 */
.divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-7) 0;
}

/* --------------------------------------------------------------------------
   4. 按钮体系
   .btn（基础） + .btn-primary（主）/ .btn-secondary（次）/ .btn-ghost（幽灵）
   + .btn-light（深色区反白）/ .btn-outline（描边）+ .btn-lg（大号）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 24px;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-base),
    border-color var(--t-base),
    color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-fast);
  user-select: none;
}

.btn:active {
  transform: translateY(1px);
}

/* 主按钮：品牌蓝 */
.btn-primary {
  background: var(--c-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--c-primary-strong);
  color: #fff;
  box-shadow: var(--shadow);
}

/* 次按钮：浅蓝底 */
.btn-secondary {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.btn-secondary:hover {
  background: #dbe8f9;
  color: var(--c-primary-strong);
}

/* 幽灵按钮：深色背景上的描边反白（Hero 场景） */
.btn-ghost {
  background: transparent;
  color: var(--c-on-navy);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

/* 深色区高亮按钮：蓝青渐变（Hero 主 CTA） */
.btn-accent {
  background: var(--c-accent-grad);
  color: #fff;
}

.btn-accent:hover {
  color: #fff;
  box-shadow: var(--shadow-navy);
  filter: brightness(1.06);
}

/* 浅色场景描边按钮（非深色背景的次级动作） */
.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.btn-outline:hover {
  background: var(--c-primary-soft);
  color: var(--c-primary-strong);
}

/* 大号按钮 */
.btn-lg {
  padding: 14px 36px;
  font-size: var(--fs-lg);
}

.btn-sm {
  padding: 6px 16px;
  font-size: var(--fs-sm);
}

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

/* --------------------------------------------------------------------------
   5. 顶部导航
   结构：header.site-header > .container.header-inner
         .brand（Logo）+ nav.main-nav（桌面菜单）+ button.nav-toggle（汉堡）
   行为（配合 site.js）：
   - 初始透明 + 反白文字（适配深色 Hero）；滚动后 .scrolled → 白底 + 深色文字 + 阴影
   - 页面无深色 Hero 时可给 header 加 .site-header--solid 强制实底样式
   - 移动端（≤768px）：菜单收起为下拉面板，body 加 .nav-open 展开
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: transparent;
  transition:
    background-color var(--t-base),
    box-shadow var(--t-base),
    height var(--t-base);
}

/* 滚动态 / 实底变体：白底深字 */
.site-header.scrolled,
.site-header--solid {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--c-border);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--header-h);
  color: #fff;
}

.site-header.scrolled .brand,
.site-header--solid .brand {
  color: var(--c-navy);
}

.brand img {
  height: 150px;
  width: auto;
}

.brand-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 桌面菜单 */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.main-nav a {
  display: inline-block;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-on-navy-muted);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.site-header.scrolled .main-nav a,
.site-header--solid .main-nav a {
  color: var(--c-text);
}

.main-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.site-header.scrolled .main-nav a:hover,
.site-header--solid .main-nav a:hover {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

/* 当前页高亮 */
.main-nav a.active {
  color: #fff;
  font-weight: 600;
}

.main-nav a.active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--c-accent-grad);
}

.site-header.scrolled .main-nav a.active,
.site-header--solid .main-nav a.active {
  color: var(--c-primary);
}

/* 汉堡按钮：桌面隐藏 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: #fff;
}

.site-header.scrolled .nav-toggle,
.site-header--solid .nav-toggle {
  color: var(--c-navy);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.site-header.scrolled .nav-toggle:hover,
.site-header--solid .nav-toggle:hover {
  background: var(--c-bg-alt);
}

.nav-toggle .bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base), opacity var(--t-base);
}

/* 展开态：三线变 X */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Hero 区
   深色科技渐变背景 + 大标题 + 副文案 + CTA 组 + 能力标签徽章。
   页面级结构（后续子会话直接套用）：
     <section class="hero">
       <div class="container hero-inner">
         <h1 class="hero-title">…</h1>
         <p class="hero-sub">…</p>
         <div class="hero-cta">
           <a class="btn btn-accent btn-lg">…</a>
           <a class="btn btn-ghost btn-lg">…</a>
         </div>
         <div class="hero-tags"><span class="badge">…</span></div>
       </div>
     </section>
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h)); /* 让导航初始透明态压在 Hero 上 */
  padding: calc(var(--header-h) + var(--sp-9)) 0 var(--sp-9);
  background:
    radial-gradient(ellipse 60% 50% at 78% -10%, rgba(0, 114, 255, 0.35), transparent 60%),
    radial-gradient(ellipse 45% 40% at 12% 110%, rgba(0, 198, 255, 0.18), transparent 60%),
    linear-gradient(150deg, var(--c-navy-deep) 0%, var(--c-navy-mid) 55%, var(--c-navy) 100%);
  color: var(--c-on-navy);
  text-align: center;
  overflow: hidden;
}

/* 页面无深色 Hero 时不适用负 margin 压顶（浅色页面自行覆盖 hero 背景） */
.hero--solid-nav {
  margin-top: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-5);
}

.hero-title .grad-text {
  background: var(--c-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: var(--fs-xl);
  color: var(--c-on-navy-muted);
  max-width: 680px;
  margin: 0 auto var(--sp-6);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* 徽章：Hero 能力标签（半透明胶囊） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-on-navy-muted);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* 标签：浅色场景通用小标签 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: var(--radius-pill);
}

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

.tag--muted {
  color: var(--c-text-muted);
  background: var(--c-bg-alt);
}

/* --------------------------------------------------------------------------
   7. 卡片
   .card：图标 + 标题 + 描述，hover 抬升。
   结构：
     <article class="card">
       <div class="card-icon">🖥️</div>
       <h3 class="card-title">…</h3>
       <p class="card-desc">…</p>
     </article>
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--t-base),
    box-shadow var(--t-base),
    border-color var(--t-base);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(26, 95, 180, 0.35);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 26px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  background: var(--c-primary-soft);
}

/* 卡片作为整卡链接（产品入口卡） */
.card-link {
  color: inherit;
}

.card-link:hover {
  color: inherit;
}

.card-link .card-title::after {
  content: " →";
  color: var(--c-primary);
  opacity: 0;
  margin-left: 4px;
  transition: opacity var(--t-fast);
}

.card-link:hover .card-title::after {
  opacity: 1;
}

.card-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}

.card-desc {
  color: var(--c-text-muted);
  font-size: var(--fs-base);
  margin-bottom: 0;
}

/* 卡片底部操作区 */
.card-footer {
  margin-top: auto;
  padding-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   8. 对比表（.cmp-table）
   外层必须包 .table-scroll（横向滚动容器，≤768px 生效）。
   结构：
     <div class="table-scroll">
       <table class="cmp-table">…</table>
     </div>
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}

.cmp-table {
  width: 100%;
  min-width: 640px;               /* 保证小屏下内容不被压碎，容器横向滚动 */
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.cmp-table th,
.cmp-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.cmp-table thead th {
  background: var(--c-navy);
  color: var(--c-on-navy);
  font-weight: 600;
  white-space: nowrap;
}

.cmp-table tbody tr:last-child td {
  border-bottom: none;
}

.cmp-table tbody tr:nth-child(even) {
  background: var(--c-bg-alt);
}

.cmp-table tbody tr:hover {
  background: var(--c-primary-soft);
}

/* 行头（首列）加粗 */
.cmp-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-navy);
}

/* 高亮列（如「推荐档」） */
.cmp-table .col-highlight {
  background: rgba(0, 198, 255, 0.07);
}

.cmp-table thead .col-highlight {
  background: var(--c-primary);
}

/* --------------------------------------------------------------------------
   9. 配置卡（.tier-card）
   两档配置对比用；.tier-card--featured 为推荐档（高亮描边 + 「推荐」角标）。
   结构：
     <article class="tier-card tier-card--featured">
       <h3 class="tier-name">…</h3>
       <p class="tier-desc">…</p>
       <ul class="tier-features"><li>…</li></ul>
       <div class="tier-footer"><a class="btn …">…</a></div>
     </article>
   -------------------------------------------------------------------------- */
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* 推荐档 */
.tier-card--featured {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(26, 95, 180, 0.08), var(--shadow);
}

.tier-card--featured:hover {
  border-color: var(--c-primary-strong);
}

/* 「推荐」角标 */
.tier-flag {
  position: absolute;
  top: -13px;
  right: var(--sp-5);
  z-index: var(--z-tier-badge);
  padding: 4px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: var(--c-accent-grad);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-navy);
}

.tier-name {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}

.tier-desc {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.tier-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.tier-features li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-base);
  color: var(--c-text);
}

.tier-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--c-primary);
}

.tier-card--featured .tier-features li::before {
  background: var(--c-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tier-footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-border);
}

.tier-footer .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   10. FAQ 折叠（配合 site.js）
   结构：
     <div class="faq">
       <div class="faq-item">
         <button class="faq-question" aria-expanded="false">…</button>
         <div class="faq-answer"><p>…</p></div>
       </div>
     </div>
   JS 在展开时给 .faq-item 加 .open 并维护 aria-expanded。
   -------------------------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-item {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.faq-item.open {
  border-color: rgba(26, 95, 180, 0.4);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: left;
  color: var(--c-text);
  transition: color var(--t-fast);
}

.faq-question:hover {
  color: var(--c-primary);
}

/* 加号图标：展开态旋转 45° 变 × */
.faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t-base), background-color var(--t-base), color var(--t-base);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--c-primary);
  color: #fff;
}

.faq-answer {
  display: none;
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-text-muted);
  font-size: var(--fs-base);
}

.faq-item.open .faq-answer {
  display: block;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. CTA 横幅（.cta-banner）
   深色渐变横幅，收尾引导咨询/跳转。
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  padding: var(--sp-8) 0;
  background:
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(0, 114, 255, 0.35), transparent 55%),
    linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-mid) 100%);
  color: var(--c-on-navy);
  text-align: center;
  overflow: hidden;
}

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

.cta-banner-desc {
  color: var(--c-on-navy-muted);
  max-width: 620px;
  margin: 0 auto var(--sp-5);
}

.cta-banner .btn-ghost {
  color: var(--c-on-navy);
}

/* --------------------------------------------------------------------------
   12. 页脚（.site-footer）
   多列布局：公司信息 + 产品链接 + 联系方式；底部备案行 + 版权行。
   深色底（与 Hero 呼应）。
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-navy-deep);
  color: var(--c-on-navy-muted);
  font-size: var(--fs-sm);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-7);
  padding: var(--sp-8) 0 var(--sp-7);
}

.footer-brand-logo {
  height: 44px;
  width: auto;
  margin-bottom: var(--sp-4);
  filter: brightness(0) invert(1); /* 深色底上反转 Logo 颜色 */
  opacity: 0.95;
}

.footer-slogan {
  color: var(--c-on-navy-faint);
  max-width: 320px;
}

.footer-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-on-navy);
  margin-bottom: var(--sp-4);
}

/* 同列内第二个分组标题（如「产品与服务」下的「公司」） */
.footer-title--gap {
  margin-top: var(--sp-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-links a {
  color: var(--c-on-navy-muted);
}

.footer-links a:hover {
  color: var(--c-accent);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-contact li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  line-height: var(--lh-tight);
}

.footer-contact a {
  color: var(--c-on-navy-muted);
  word-break: break-all;
}

.footer-contact a:hover {
  color: var(--c-accent);
}

/* 备案行 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--sp-5) 0;
}

.footer-beian {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-on-navy-faint);
}

.footer-beian a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-on-navy-faint);
}

.footer-beian a:hover {
  color: var(--c-accent);
}

.footer-beian img {
  height: 16px;
  width: auto;
}

.footer-beian .beian-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-on-navy-faint);
}

/* 版权行 */
.footer-copyright {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-on-navy-faint);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   13. 动效
   .reveal：滚动入场（淡入上移）。初始不可见，JS IntersectionObserver
   进入视口后加 .visible；无 JS 支持时由 site.js 兜底直接显示。
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 可选：交错延迟（配合 .reveal-delay-1/2/3 使用） */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* 深色背景区域上的 reveal 兜底（无 JS 时依然可见的备用方案由 JS 保证） */

/* --------------------------------------------------------------------------
   14. 响应式断点
   ≤768px：导航折叠、栅格单列、Hero 标题收紧、页脚单列、表格滚动（容器已带）
   ≤480px：进一步收紧
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-h: 60px;
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-hero: 30px;
  }

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

  /* 栅格塌缩为单列 */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* 导航：显示汉堡，菜单变为下拉面板 */
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-mobile-nav);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--c-border);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--t-base), opacity var(--t-base), visibility var(--t-base);
  }

  .nav-open .main-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 移动端菜单项：深色文字（面板为白底） */
  .main-nav a,
  .site-header.scrolled .main-nav a,
  .site-header--solid .main-nav a {
    color: var(--c-text);
    padding: 14px 12px;
    border-bottom: 1px solid var(--c-bg-alt);
    border-radius: 0;
  }

  .main-nav a:hover {
    color: var(--c-primary);
    background: var(--c-primary-soft);
  }

  .main-nav a.active {
    color: var(--c-primary);
  }

  .main-nav a.active::after {
    display: none;
  }

  /* 展开时导航压为白底（保证面板与导航底色一致） */
  .nav-open .site-header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-border);
  }

  /* 移动端导航更矮，Logo 相应缩小 */
  .brand img {
    height: 34px;
  }

  .nav-open .brand {
    color: var(--c-navy);
  }

  .nav-open .nav-toggle {
    color: var(--c-navy);
  }

  /* Hero 收紧 */
  .hero {
    padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8);
  }

  .hero-sub {
    font-size: var(--fs-lg);
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta .btn {
    width: 100%;
  }

  /* 页脚单列 */
  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: var(--sp-7) 0 var(--sp-6);
  }

  /* CTA 横幅 */
  .cta-banner-title {
    font-size: var(--fs-h2);
  }

  /* 配置卡推荐角标随卡片内缩 */
  .tier-flag {
    right: var(--sp-4);
  }
}

@media (max-width: 480px) {
  :root {
    --fs-hero: 26px;
    --fs-h1: 26px;
    --fs-h2: 22px;
  }

  .container {
    padding: 0 var(--sp-4);
  }

  .section {
    padding: var(--sp-6) 0;
  }

  .card {
    padding: var(--sp-5);
  }

  .tier-card {
    padding: var(--sp-5);
  }

  .footer-beian {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
}