/* ==========================================================================
   组件层 Components：按钮 / 图标 / 卡片 / 特性 / 提示 / 步骤
   规则：组件样式与具体页面解耦，可被任意页面复用。
   依赖：tokens.css, base.css
   ========================================================================== */

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  /* transform 只用于按下反馈，位移量极小，避免影响指针判定 */
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* 悬停：变色 + 轻微阴影，给出「可点」的即时反馈 */
.btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-btn-hover);
}

/* 按下：变深并下沉 1px，点击有明确的物理反馈 */
.btn:active:not(:disabled) {
  background: var(--color-primary-active);
  box-shadow: none;
  transform: translateY(1px);
}

/* 禁用 / 提交中：降低对比度并移除交互反馈 */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-soft);
  color: var(--color-text);
  border-color: var(--color-text-3);
  box-shadow: none;
}

.btn-ghost:active:not(:disabled) {
  background: var(--color-bg-soft);
  transform: translateY(1px);
}

.btn-ghost:disabled {
  background: transparent;
  border-color: var(--color-disabled-border);
}

.btn-block {
  width: 100%;
}

/*
 * 描边按钮：默认「白底 + 主色文字 + 描边」，悬停才填充主色。
 * 用于首屏 CTA 等多个并列入口——避免出现「一蓝一白」的主次混淆，
 * 让用户在悬停时才知道自己指向哪一个。
 * 注意：需写在 .btn / .btn-ghost 之后，靠后声明覆盖它们的默认配色。
 */
.btn-outline {
  background: var(--color-bg-card);
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-btn-hover);
}

.btn-outline:active:not(:disabled) {
  background: var(--color-primary-active);
  color: var(--color-on-primary);
  border-color: var(--color-primary-active);
  box-shadow: none;
  transform: translateY(1px);
}

.btn-outline:disabled,
.btn-outline[aria-disabled="true"] {
  background: var(--color-bg-card);
  color: var(--color-disabled-text);
  border-color: var(--color-disabled-border);
}

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

/* ---------- 图标容器 ---------- */
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.icon-badge svg {
  width: 22px;
  height: 22px;
}

/* ---------- 特性卡片（产品页核心能力） ---------- */
.feature-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.feature .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.feature .ico svg {
  width: 18px;
  height: 18px;
}

.feature h4 {
  margin-top: 14px;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.feature p {
  margin-top: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}

/* ---------- 原理说明块 ---------- */
.principle {
  margin-top: var(--space-6);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.principle h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.principle p {
  margin-top: 10px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
}

.principle ul {
  margin-top: 14px;
  padding-left: 20px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
}

.principle li {
  margin-top: 6px;
}

/* ---------- 提示框 ---------- */
.alert-warn {
  margin-top: 28px;
  padding: var(--space-4) 20px;
  background: var(--color-warn-soft);
  border-left: 3px solid var(--color-warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.alert-warn strong {
  color: var(--color-warn);
}

/* ---------- 步骤条 ---------- */
.steps {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.step {
  text-align: center;
  /* 左右留白收窄，让说明文字获得更多行宽，减少各列折行位置参差 */
  padding: var(--space-3) var(--space-2);
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.step h4 {
  margin-top: var(--space-3);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.step p {
  margin-top: 6px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
}

/* ---------- 场景卡片 ---------- */
.scenario-grid {
  margin-top: var(--space-6);
  display: grid;
  /* 固定 3 列，对应宣传彩页的 2×3 网格，6 项正好铺成两行，横竖都对齐。
     安全加密盘 6 项用满；单向光闸 3 项正好一行。
     若某页项数不是 3 的倍数，末行左侧留空即可（卡片仍等宽，不会变形）。 */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.scene-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: left;
}

/* 卡片头部：左侧序号 + 右侧图标，两端对齐 */
.scene-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* 序号徽标，沿用宣传彩页的 01/02… 编号 */
.scene-num {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.scene-card .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

.scene-card .ico svg {
  width: 18px;
  height: 18px;
}

/* 一级标题：场景/行业归属（研发 / 设计院 / 外包工作室…） */
.scene-card h4 {
  margin-top: 14px;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

/* 二级标题：该场景下的具体用途（知识产权交付、卷宗与底稿保密…）
   用 h5 语义标签，base.css 未重置 h5，故需显式覆盖浏览器默认的加粗与字号。
   注意：不要写成 .scene-card h5, .scene-card p 这类合并选择器，
   正文样式要单独留在 .scene-card p 里，避免二级标题被正文样式反覆盖。 */
.scene-card h5.scene-subtitle {
  margin-top: var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.5;
}

.scene-card p {
  margin-top: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}

/* 图标样式与 .feature .ico 保持一致，保证同页卡片观感统一 */
.scene-card .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

.scene-card .ico svg {
  width: 18px;
  height: 18px;
}

.scene-card h4 {
  margin-top: 14px;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.scene-card p {
  margin-top: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}

/* ---------- FAQ 手风琴 ---------- */
.faq {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
}

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

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

.faq-question svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-text-3);
  transition: transform var(--transition-base), color var(--transition-fast);
}

.faq-question:hover svg {
  color: currentColor;
}

.faq-item.is-open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  transition: max-height .3s ease;
}

/*
 * 用足够大的上限代替固定 300px：
 * 固定值会截断较长的答案（产品 FAQ 答案长度不可控）。
 */
.faq-item.is-open .faq-answer {
  max-height: 60rem;
  padding-bottom: 18px;
}

/* ---------- 咨询区块 ---------- */
.contact-cta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-primary-soft);
  border-radius: var(--radius-lg);
  text-align: center;
}

.contact-cta h3 {
  /* 区块内标题：介于 section 标题(32px)与卡片标题(21px)之间，保持层级连贯 */
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.contact-cta p {
  margin-top: 10px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
}

.contact-cta .btn {
  margin-top: 20px;
}

/* ---------- Toast 轻提示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-7);
  z-index: var(--z-toast);
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-toast);
  pointer-events: none;
}

/* ---------- 下载卡片 ---------- */
.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

/* 悬停：仅轻微提示卡片与按钮的关联，不做整卡高亮
   卡片本身不可点击，整卡变色会误导用户以为点卡片也能下载 */
.download-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.download-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.download-info h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.download-info p {
  margin-top: var(--space-1);
  /* 说明性正文用 text-2：text-3 对 16px 正文对比度不足（3.07） */
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}

.download-btn {
  flex: none;
}

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(12, 16, 24, .45);
}

.modal[hidden] {
  display: none;
}

.modal-panel {
  width: 100%;
  max-width: 420px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
}

/* 含协议阅读区的弹窗需要更宽的版面，正文与序列号输入同屏可见 */
.modal-panel-wide {
  max-width: 620px;
  /* 面板本身限制高度，内部协议正文区独立滚动，避免整页被撑爆 */
  max-height: calc(100vh - 2 * var(--space-4));
  display: flex;
  flex-direction: column;
}

.modal-panel-wide form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- 协议阅读区 ---------- */
.agreement {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.agreement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.agreement-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.agreement-tabs {
  display: flex;
  gap: var(--space-1);
}

.agreement-tab {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.agreement-tab:hover {
  color: var(--color-primary);
}

.agreement-tab.is-active {
  border-color: var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-weight: 600;
}

.agreement-body {
  /* 固定高度 + 内部滚动：协议较长，不能让弹窗无限增高 */
  height: 190px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  /* 长文阅读用小字号：站点令牌最小档 15px 在密集条款里仍偏大 */
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-2);
  scrollbar-width: thin;
}

.agreement-body:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.agreement-body .legal-meta {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--color-text-3);
}

.agreement-body h2 {
  margin-top: var(--space-4);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.agreement-body h2:first-child {
  margin-top: 0;
}

.agreement-body h3 {
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.agreement-body p {
  margin-top: var(--space-2);
}

.agreement-body strong {
  color: var(--color-text);
}

.agreement-loading {
  margin: 0;
  color: var(--color-text-2);
}

.agreement-foot {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: right;
}

.agreement-more {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
}

.agreement-more:hover {
  text-decoration: underline;
}

/* ---------- 同意勾选 ---------- */
.agreement-consent {
  display: flex;
  /*
   * 勾选框必须与「首行文字」对齐，而不是与整个文本块居中。
   * 手机上这段文字会折成两三行，若用 align-items:center，
   * 框会沉到两行中间，看起来像脱离了那句「我已阅读并同意」。
   */
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-2);
  cursor: pointer;
}

.agreement-consent input {
  /*
   * 不依赖原生控件绘制：全局 reset 把 margin/padding 归零后，
   * 原生 checkbox 在部分浏览器里只剩一圈细边框，尺寸也不受 width 控制。
   * 这里自行绘制，尺寸与对齐完全可控。
   */
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /*
   * 与首行文字垂直居中（按 Chromium 实测校准）：
   *   line-height 27.2px，中文文字矩形高 20px → 半行距 (27.2-20)/2 = 3.6px，
   *   即文字在行盒内向下偏移约 3px。
   *   因此上偏移 = 3px(半行距) + (20px - 16px)/2 = 5px。
   * 框 16px 居中于 20px 文字 → +2px，合计 5px。
   */
  margin-top: 5px;
  border: 1.5px solid var(--color-text-2);
  border-radius: 3px;
  background: var(--color-bg);
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* 选中态：主色实心 + 白色对勾 */
.agreement-consent input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.agreement-consent input:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  /*
   * 注意全局 box-sizing: border-box——右侧与底部各 2px 边框会占掉宽高，
   * 所以 4×8 的盒子实际只剩 2×6 的可绘制区，对勾几乎看不见。
   * 这里把尺寸放大到 5×10，扣除边框后仍有 3×8 的对勾。
   */
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.agreement-consent input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agreement-consent a {
  color: var(--color-primary);
}

.agreement-consent a:hover {
  text-decoration: underline;
}

/* 未勾选却点了下载时的提示态：沿用站内统一的警示色 */
.agreement-consent.is-invalid {
  color: var(--color-warn);
}

.agreement-consent.is-invalid a {
  color: inherit;
  text-decoration: underline;
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.modal-desc {
  margin-top: var(--space-2);
  color: var(--color-text-2);
  font-size: var(--font-size-sm);
}

.form-label {
  display: block;
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-input.is-invalid {
  border-color: var(--color-warn);
}

.form-error {
  margin-top: var(--space-2);
  color: var(--color-warn);
  font-size: var(--font-size-sm);
}

/* ---------------------------- 序列号分格输入 ----------------------------
 * 8 个单字符格子，按 4-4 分组（中间一个 "-" 分隔）：
 *   [K][7][M][R] - [9][T][X][8]
 *
 * 为什么用 flex + gap 而不是拼成一张背景图/边框：
 *   - 每个格子仍是真正的 <input>，键盘、读屏、自动填充都能正常工作；
 *   - 窄屏（手机）下自动换行不会破坏布局，而背景图方案会错位。
 *
 * 字号用 monospace 并放大：序列号要逐位核对，等宽字体能让每一位对齐，
 * 避免用户把相邻两位看串。
 */
.serial-input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.serial-cell {
  /* 用固定宽高而不是 width:100%：格子代表"一个字符"，
   * 尺寸稳定才能让 4-4 的节奏一眼可读。 */
  width: 44px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  caret-color: var(--color-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.serial-cell:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* 已填写的格子加一层浅底，让"填到哪了"在余光里也能看到 */
.serial-cell.is-filled {
  border-color: var(--color-primary);
}

.serial-cell.is-invalid {
  border-color: var(--color-warn);
}

/* 分组分隔符：与格子同高、只占一个窄列，视觉上把 8 位切成 4+4 */
.serial-sep {
  color: var(--color-text-3);
  font-size: var(--font-size-lg);
  line-height: 52px;
  user-select: none;
}

/* 窄屏下缩小格子，保证 8 位 + 分隔符仍能一行放下；
 * 实在放不下时由 flex-wrap 换行，不会撑破弹窗。 */
@media (max-width: 480px) {
  .serial-input {
    gap: 6px;
  }

  .serial-cell {
    width: 34px;
    height: 44px;
    font-size: var(--font-size-base);
  }

  .serial-sep {
    line-height: 44px;
  }
}

/* 键盘用户：格子已填满时再输入会跳到下一格，
 * 用 :focus-visible 强调当前位，避免"光标在哪"看不清。 */
.serial-cell:focus-visible {
  border-color: var(--color-primary);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* 弹窗打开时锁定背景滚动 */
body.is-locked {
  overflow: hidden;
}

/* ---------- 图片放大预览（灯箱） ---------- */
/*
 * 触发按钮：包裹图片，样式上完全退化为普通图片，
 * 只补充「可点击」的光标与键盘焦点环。
 */
.hero-visual-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  /* 与 .hero-visual 的圆角保持一致，避免焦点环切角 */
  border-radius: inherit;
}

.hero-visual-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.lightbox {
  /*
   * 保留原生 dialog 的 margin: auto —— 模态模式下靠它水平居中；
   * 垂直方向在部分引擎里只靠 auto 不够，需配合下面的 position。
   * 改成 margin: 0 会让弹窗贴到视口左上角。
   */
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  /* 顶部留白供关闭按钮落位，不与图片内容重叠 */
  padding: 44px 0 0;
  border: 0;
  /* 只占图片实际尺寸，避免遮罩区域过大影响点击判定 */
  max-width: min(1200px, 92vw);
  max-height: 90vh;
  background: none;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(12, 16, 24, .78);
}

.lightbox img {
  display: block;
  /* 等比缩放，长边贴合视口 */
  width: auto;
  height: auto;
  max-width: 92vw;
  /* 减去上方为关闭按钮预留的 44px，保证整图完整可见 */
  max-height: calc(90vh - 44px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  cursor: zoom-out;
}

/*
 * 小尺寸原图（如 578×356 的硬件图）在桌面端默认会按原始像素显示，
 * 与首屏缩略图差别极小，用户会以为「点了没反应」。
 * 这里按视口宽度自适应放大，但设上限避免位图糊成一片：
 * 长边最多到 760px，约为原图的 1.3 倍，观感上明显变大且仍清晰。
 * 用 min() 与 92vw 取小值，移动端继续受视口约束，不会溢出。
 */
.lightbox img[src$="one_gateway.png"] {
  width: min(760px, 92vw);
  height: auto;
}

/*
 * 关闭按钮位于图片上方的留白区右侧。
 * 不覆盖在图片上：截图右上角常有工具栏，叠上去会被误认为界面自身的按钮。
 */
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(12, 16, 24, .55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lightbox-close:hover {
  background: rgba(12, 16, 24, .85);
}

.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- 响应式 ---------- */

/* 平板宽度：三列会挤到每列 250px 左右，文字断行难看，
   先降为两列，让 6 项排成 3 行。 */
@media (max-width: 1100px) {
  .scenario-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .feature-grid,
  .steps,
  .scenario-grid {
    grid-template-columns: 1fr;
  }

  .download-item {
    flex-direction: column;
    align-items: flex-start;
  }

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