/* ==========================================================================
   AI 视频工厂 · 落地页样式
   --------------------------------------------------------------------------
   设计基准：**375px 宽（iPhone 标准）优先**，>=768px 适配电脑。
   硬性约束（来自需求）：
     · 按钮最小 44×44px，字体最小 16px
     · 触摸元素之间至少 8px 间隔（防误触）
     · body padding-bottom 含 env(safe-area-inset-bottom)
     · 底部转化栏手机端吸附
   --------------------------------------------------------------------------
   ⚠️ 本文件顶部这段"基础规则"与 index.html 里 <style> 的内联首屏 CSS
      是**同一份内容**（为了让首屏不阻塞）。改这里必须同步改那边。
   ========================================================================== */

/* ===================== 基础（与内联首屏 CSS 同源） ===================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* 【六】iPhone 安全区
     ⚠️ 这里用 `--barh` 变量而不是写死 72px：
        底部栏的实际高度会变（文案换行会把它撑高，实测 375px 下是 137px）。
        写死数值的结果是**页脚被吸附栏盖住**（实测 footerOverlapped = true）。
        用同一个变量让"留白"与"栏高"永远一致，栏多高就留多少。
     兜底：不支持 var() 的老浏览器退回 72px。 */
  --barh: 137px;
  padding-bottom: calc(var(--barh) + env(safe-area-inset-bottom, 0px));
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;                /* 【一.2】最小 16px —— 也是 iOS 不自动放大的门槛 */
  line-height: 1.6;
  color: #e6edf3;
  background: #0d1117;
  overflow-x: hidden;             /* 防横向滚动条（移动端最丑的 bug） */
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.wrap {
  width: 100%;
  max-width: 480px;               /* 手机上不拉太宽；桌面由 media query 放大 */
  margin: 0 auto;
  padding: 0 16px;
}

/* ===================== 首屏 ===================== */
.hero { padding: 28px 0 20px; text-align: center; }
.hero h1 { font-size: 24px; line-height: 1.35; margin: 0 0 12px; font-weight: 700; }
.hero p { font-size: 16px; color: #9aa7b4; margin: 0 0 20px; }
.hero-note { font-size: 16px; color: #6e7b8a; margin: 16px 0 0; }

.hero-logo {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 18px;
  object-fit: contain;
}

/* ===================== 按钮 =====================
   最小 56px 高（远超要求的 44px）—— 底部吸附栏和主 CTA 都是大按钮。
   触摸目标间距统一用 margin/gap >= 8px。
   ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 44px;                /* 【一.2】最小 44×44 */
  padding: 12px 20px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;                /* 【一.2】不小于 16px */
  font-weight: 600;
  cursor: pointer;
  /* 【一.3】触摸元素间隔：按钮之间至少 8px（由父容器 gap 保证，见下） */
  transition: transform .12s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }

.btn-lg { min-height: 56px; width: 100%; }
.btn-primary { background: #2f81f7; color: #fff; }
.btn-primary:active { background: #1f6feb; }
.btn-ghost {
  background: transparent;
  color: #e6edf3;
  border: 1px solid #30363d;
}
.btn-ghost:active { background: #161b22; }

/* 按钮容器：统一 12px 间距（> 8px 硬要求） */
.order-actions,
.case-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* ===================== 通用分节 ===================== */
.section { padding: 24px 0; }
.section-title {
  font-size: 20px;
  margin: 0 0 16px;
  font-weight: 700;
}
.section-title::before {
  content: "";
  display: inline-block;
  width: 4px; height: 18px;
  background: #2f81f7;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -2px;
}

/* ===================== 案例 ===================== */
.case {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 16px;            /* 案例之间 >= 8px */
}

/* 【二.2】锁定 9:16 竖屏：不靠视频实际尺寸，避免加载中布局跳动 */
.case-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #0d1117;            /* poster 未加载时的底色（不是黑屏） */
  border-radius: 12px;
  overflow: hidden;
}
/* 案例区的媒体：`video`（有成片时）或 `img`（只有海报时）都要撑满 9:16 容器。
   ⚠️ 2026-10-16：原先只写了 `video` —— 换成海报 `<img>` 后会退回全局
      `img{max-width:100%;height:auto}`，在 `aspect-ratio` 容器里**高度不撑满**、
      留出底色条。故把 `img` 一并纳入同一组规则。 */
.case-video video,
.case-video img {
  width: 100%; height: 100%;
  object-fit: contain;            /* 竖屏内容在 9:16 容器里完整显示，不裁切 */
  background: #0d1117;
  display: block;
}

.case-title { font-size: 18px; margin: 12px 0 4px; font-weight: 700; }
.case-desc { font-size: 16px; color: #9aa7b4; margin: 0 0 8px; }
/* 【二.3】微信内不能直接下载 ⇒ 明确给出替代操作 */
.case-hint {
  font-size: 16px;
  color: #6e7b8a;
  margin: 0;
  padding: 8px 10px;
  background: #0d1117;
  border-left: 3px solid #2f81f7;
  border-radius: 6px;
}
.case-hint strong { color: #e6edf3; }

/* ===================== 特性列表 ===================== */
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;                 /* 行高足够，触摸安全 */
  border-bottom: 1px solid #21262d;
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list img { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.feature-list strong { display: block; font-size: 16px; }
.feature-list span { font-size: 16px; color: #9aa7b4; }

/* ===================== 步骤 ===================== */
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
}
.step-num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2f81f7;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}

/* ===================== 页脚 ===================== */
.foot { padding: 24px 0 8px; text-align: center; }
.foot p { font-size: 16px; color: #9aa7b4; margin: 0 0 6px; }
.foot-dim { color: #6e7b8a; }

/* ==========================================================================
   【三】底部吸附转化栏
   - 4 个按钮**平分整宽**，每个都远超 44×44
   - 手机端 position:fixed 吸附；桌面端（>=768px）改为常规块
   - 高度 72px + 安全区，和 body 的 padding-bottom 对应
   ========================================================================== */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(13, 17, 23, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #21262d;
  /* 【六】刘海屏底部安全区：把内容顶上来，避免被小白条盖住 */
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;                        /* 【一.3】按钮间隔 8px */
  padding: 8px 12px;
  max-width: 480px;
  margin: 0 auto;
}
.ab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;                /* 远超 44px */
  min-width: 44px;
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.ab-btn:active { background: #21262d; }
.ab-btn { position: relative; container-type: inline-size; }
.ab-ico { font-size: 20px; line-height: 1; }
/* ⚠️ 底栏标签字号：**不能写死**。
   实测（375px 视口 / 5 个按钮 / 每格 64px，`padding:6px 4px` ⇒ **内宽 55.8px**）：
     · 「拨打电话」16px 固有宽 = **64.0px > 55.8px** ⇒ 放不下
       （配 `overflow-wrap:anywhere` 时 Blink 会**硬挤成一行**，字距被压；
        配 `nowrap` 则会**横向溢出**压到相邻按钮 —— 两种都难看）
     · 「扫码加微信」5 字：16px → 80px，**必然溢出**
   解：① 第 5 个标签缩短为「**扫码**」（2 字 = 32px）；
       ② 字号用容器查询单位 `cqi` 跟着格子走（1cqi = 格子**内容盒**宽的 1%）。
   校核（`25cqi`，内容盒 55.8px）：`55.8 × 0.25 = 13.95px`
     · 「拨打电话」4 字 → 4 × 13.95 ≈ **55.8px** ✅ 恰好放下
     · 「扫码」2 字 → 27.9px ✅ 余量充足
   上下限 12px / 16px：4 按钮（内宽 71.8px）时取到上限 16px，与小字号场景一致。 */
.ab-txt {
  font-size: clamp(12px, 25cqi, 16px);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;     /* 绝不折行；宽度由上面的 cqi 字号保证放得下 */
}
.ab-btn-primary { background: #2f81f7; color: #fff; }
.ab-btn-primary:active { background: #1f6feb; }

/* ==========================================================================
   弹层（扫码加微信）
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 200; display: flex;
         align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); }
.modal-body {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100vw - 48px));
  padding: 20px;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 16px;
  text-align: center;
}
.modal-title { font-size: 18px; margin: 0 0 16px; font-weight: 700; }
.modal-body img {
  width: 240px; height: 240px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}
.modal-tip { font-size: 16px; color: #9aa7b4; margin: 0 0 16px; }

/* 微信号展示（2026-10-16 新增）
   为什么要做成"可选中、像输入框"：站点在 `http://` 下 `navigator.clipboard`
   不可用，必须走 `execCommand` 兜底；兜底失败时这是用户**唯一**能拿到微信号的地方。
   `user-select: all` ⇒ 单击即全选，方便长按/复制。
   `word-break: break-all` ⇒ 微信号较长时不会溢出容器。 */
.wx-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: .5px;
  color: #e6edf3;
  background: #0d1117;
  border: 1px dashed #2f81f7;
  border-radius: 10px;
  padding: 14px 12px;
  margin: 0 0 12px;
  text-align: center;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}
/* 弹层里按钮可能有两个（主/次），竖排留间距 */
.modal-body .btn + .btn { margin-top: 10px; }

/* ==========================================================================
   轻提示
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 300;
  padding: 12px 20px;
  background: rgba(47, 129, 247, .96);
  color: #fff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  animation: toastIn .18s ease;
}
.toast[hidden] { display: none; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   【一.1】>=768px 适配电脑
   - 内容区变宽、案例改两列
   - 底部吸附栏**取消固定**（桌面上挡视线且没必要）
   ========================================================================== */
@media (min-width: 768px) {
  body {
    padding-bottom: 0;             /* 桌面没有吸附栏了，不需要底部留白 */
    font-size: 17px;
  }
  .wrap { max-width: 1080px; padding: 0 32px; }

  .hero { padding: 64px 0 40px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 18px; }
  .hero-logo { width: 88px; height: 88px; border-radius: 22px; }

  /* 主 CTA 在桌面上不要占满整宽（显得笨） */
  .hero .btn-lg { width: auto; min-width: 240px; }

  /* 案例两列 */
  #cases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  #cases .section-title { grid-column: 1 / -1; margin-bottom: 0; }
  .case { margin-bottom: 0; }

  /* 下单按钮横向排 */
  .order-actions { flex-direction: row; }
  .order-actions .btn-lg { width: auto; flex: 1; }

  /* 桌面：吸附栏变成页面底部的常规一排按钮，不再遮挡内容 */
  .actionbar {
    position: static;
    margin-top: 24px;
    border-top: 1px solid #21262d;
    border-radius: 16px;
    background: #161b22;
    padding-bottom: 0;
  }
  .actionbar-inner { max-width: 1080px; padding: 12px 32px; }
  .hero-note { font-size: 16px; }
}

/* ==========================================================================
   无障碍 / 偏好
   - 尊重"减少动效"偏好（前庭障碍用户）
   - 键盘焦点可见（桌面上 Tab 导航）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .ab-btn, .toast { transition: none; animation: none; }
}
:focus-visible {
  outline: 2px solid #2f81f7;
  outline-offset: 2px;
}

/* ==========================================================================
   `[hidden]` 必须真的隐藏 —— 放在**样式表最末尾**
   --------------------------------------------------------------------------
   ⚠️ 这是一个**真窟窿**（2026-10-15 发现并修）：
   HTML 的 `hidden` 属性靠 **UA 样式表**的 `[hidden]{display:none}` 生效，
   但**作者样式表里任何 `display` 声明都会盖掉它**。
   本文件里 `.ab-btn{display:flex}`(232)、`.btn{display:flex/inline-flex}(104)`
   都是作者样式 ⇒ **`hidden` 对按钮完全无效**。

   实测证据：按生产配置（`phone:''` / `lng,lat:0`）部署前验证时，
   `script.js` 给 `[data-action="tel"]` / `[data-action="nav"]` 设了
   `hidden = true`，DOM 里 `hasAttribute('hidden') === true`，
   但**截图里「拨打电话」「导航到店」仍然显示** —— 客户的电话会拨到
   `00000000000`、导航跳到坐标 0,0（几内亚湾）。

   放在**最末尾**：与 `.ab-btn{display:flex}` 特异性相同（都是 0,1,0），
   靠**后者胜出**，无需 `!important`（保持可覆盖性，便于将来调试）。
   ========================================================================== */
[hidden] { display: none; }

/* ==========================================================================
   AI 现场生成同款文案弹窗
   ========================================================================== */
.ai-copy-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 780px);
  overflow-y: auto;
  text-align: left;
}
.modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: #8b949e; font-size: 28px; line-height: 1;
  cursor: pointer;
}
.modal-x:hover { background: #21262d; color: #fff; }
.ai-copy-sub { margin: -6px 0 18px; color: #9aa7b4; font-size: 14px; line-height: 1.6; }
.ai-copy-label { display: block; margin: 14px 0 6px; color: #c9d1d9; font-size: 14px; font-weight: 600; }
.ai-copy-select, .ai-copy-textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid #30363d; border-radius: 10px;
  background: #0d1117; color: #e6edf3; font-size: 16px;
  font-family: inherit; outline: none;
}
.ai-copy-select:focus, .ai-copy-textarea:focus { border-color: #2f81f7; }
.ai-copy-textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.ai-copy-count { text-align: right; color: #6e7681; font-size: 12px; margin: 4px 0 14px; }
.ai-copy-error { color: #ff7b72; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.ai-copy-result {
  margin-top: 18px; padding: 16px;
  background: #0d1117; border: 1px solid #30363d; border-radius: 12px;
}
.ai-copy-result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ai-copy-result-head h4 { margin: 0; font-size: 17px; color: #e6edf3; }
.ai-copy-badge {
  flex: none; padding: 3px 8px; border-radius: 999px;
  background: rgba(47, 129, 247, .16); color: #79c0ff; font-size: 12px;
}
.ai-copy-result-text {
  margin: 0 0 14px; color: #d2d8de; font-size: 16px;
  line-height: 1.85; white-space: pre-wrap; word-break: break-word;
}
.ai-copy-note { margin: 10px 0 0; color: #8b949e; font-size: 13px; line-height: 1.5; }
#aiGenerateBtn:disabled { opacity: .65; cursor: wait; }

.ai-copy-req {
  display: inline-block; margin: 0 0 12px; padding: 6px 12px;
  border-radius: 8px; background: rgba(47,129,247,.12);
  color: #79c0ff; font-size: 14px; font-weight: 700; letter-spacing: .5px;
}
.modal-x {
  background: #21262d !important;
  border: 1px solid #30363d !important;
  color: #fff !important;
  font-size: 24px !important;
  z-index: 3;
}

.toast-success {
  background: #238636 !important;
  box-shadow: 0 8px 24px rgba(35,134,54,.35);
}
.modal-x {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #21262d !important;
  border: 1px solid #30363d !important;
  color: #fff !important;
  font-size: 28px !important; line-height: 1; z-index: 5;
}
.modal-x:hover { background: #30363d !important; }