/* ============================================================
 * 【PC 端专属样式 desktop.css】
 *  仅在 body[data-device="desktop"] 下生效
 *  所有新增 PC 端优化请写在这里，前缀必须带上
 *  body[data-device="desktop"] 避免污染移动端
 * ============================================================ */

body[data-device="desktop"] {
  /* 预留 PC 端全局变量区：后期可放 --pc-gap / --pc-radius 等 */
}

/* ============ PC 端：二维码 hover 悬浮显示 ============ */
body[data-device="desktop"] .qrcode-trigger:hover .qrcode-container {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ============ PC 端：流程区二维码向上弹出 ============ */
body[data-device="desktop"] .qrcode-container.process-qrcode {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  margin-bottom: 10px;
  width: 240px;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 40px -10px rgba(34, 197, 94, 0.25),
              0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
}
body[data-device="desktop"] .qrcode-trigger:hover .qrcode-container.process-qrcode {
  transform: translateX(-50%) translateY(0);
}
body[data-device="desktop"] .qrcode-container.process-qrcode .qrcode-inner {
  text-align: center;
}
body[data-device="desktop"] .qrcode-container.process-qrcode .qrcode-img {
  width: 200px;
  height: 200px;
  margin: 0 auto 10px;
  border-radius: 8px;
  overflow: hidden;
}
body[data-device="desktop"] .qrcode-container.process-qrcode .wechat-id {
  padding: 6px 12px;
  font-size: 14px;
  margin-top: 8px;
}

/* ============ PC 端：导航链接下划线高亮过渡 ============ */
body[data-device="desktop"] .pc-nav-link {
  position: relative;
  padding: 4px 0;
}
body[data-device="desktop"] .pc-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #22c55e;
  transition: width 0.25s ease;
}
body[data-device="desktop"] .pc-nav-link:hover::after,
body[data-device="desktop"] .pc-nav-link.is-active::after {
  width: 100%;
}
body[data-device="desktop"] .pc-nav-link.is-active {
  color: #22c55e;
}

/* ============ PC 端：微信号一键复制按钮 ============ */
body[data-device="desktop"] .pc-copy-btn {
  transition: all 0.2s ease;
}
body[data-device="desktop"] .pc-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

/* ==============================================================
 * PC 端：四大大卡片模块（process/format/testimonials/service）
 *        overflow:visible 防止 hover 放大 1.07 + 阴影被裁剪
 *        ⚠️ 动画属性（transition/transform/border/background/padding/shadow）
 *           全部由 desktop.js 初始化内联 style 写入，严格"单写入源"；
 *           这里 CSS 类仅控制：容器overflow可见、子元素文字色/字号/间距、
 *                             hover时标题颜色+绿光文字阴影、格式卡片子层 overflow裁剪
 * ============================================================== */

/* -------- process 操作流程（深底 + 3张 process-card） -------- */
/* 全父级链 overflow:visible：section → .container → 任何 class 名包含 grid 的子层，统一兜底 */
body[data-device="desktop"] #process,
body[data-device="desktop"] #process .container,
body[data-device="desktop"] #process [class*="grid"] {
  overflow: visible;
}

/* -------- 卡片子元素视觉样式（仅控制文字/颜色/位置） -------- */
body[data-device="desktop"] #process .process-card__num {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 60px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 28px;
  /* 子元素颜色变化使用独立 transition，不与卡片 5 条白名单冲突 */
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-device="desktop"] #process .process-card--first .process-card__num {
  color: #fff;
}
body[data-device="desktop"] #process .process-card__title {
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
}
body[data-device="desktop"] #process .process-card__desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.7;
}
body[data-device="desktop"] #process .process-card__badge {
  position: absolute;
  top: 32px;
  right: 32px;
  background: rgb(34, 197, 94);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 9999px;
}
/* hover 时编号变白 + 绿光（纯颜色效果，不参与 transform / 阴影过渡竞争） */
body[data-device="desktop"] #process .process-card:hover .process-card__num {
  color: #fff;
  text-shadow: 0 2px 12px rgba(34, 197, 94, 0.45);
}

/* -------- format 导出格式（浅底 + 2张 card-hover，整体需溢出可见；子图片区仍内部裁剪） -------- */
body[data-device="desktop"] #format,
body[data-device="desktop"] #format .container,
body[data-device="desktop"] #format [class*="grid"] {
  overflow: visible;
}
/* 格式卡片里的效果图框保持内部裁剪，不要影响整卡放大 */
body[data-device="desktop"] #format .card-hover .aspect-\[210\/297\],
body[data-device="desktop"] #format .card-hover .aspect-\\[210\\/297\\] {
  overflow: hidden;
}
/* hover 时格式卡片标题增强（颜色转绿 + 绿光文字阴影，同 process 编号效果性质） */
body[data-device="desktop"] #format .card-hover:hover h3 {
  color: #16a34a;
  text-shadow: 0 2px 10px rgba(34, 197, 94, 0.25);
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-device="desktop"] #format .card-hover h3 {
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* -------- testimonials 用户真实评价（浅底 + 3张 card-hover） -------- */
body[data-device="desktop"] #testimonials,
body[data-device="desktop"] #testimonials .container,
body[data-device="desktop"] #testimonials [class*="grid"] {
  overflow: visible;
}
/* hover 时评价卡片的用户名标签颜色变绿增强（仅改子元素文字颜色，不写 transform，整卡统一由 parent scale 控制） */
body[data-device="desktop"] #testimonials .card-hover:hover h4 {
  color: #16a34a;
  text-shadow: 0 2px 10px rgba(34, 197, 94, 0.25);
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-device="desktop"] #testimonials .card-hover h4 {
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 头像不再独立 scale（整卡 scale(1.15) 时头像等比放大，保持统一感） */

/* -------- service 服务优势大卡（浅底，1 张 service-adv-card） -------- */
body[data-device="desktop"] #service,
body[data-device="desktop"] #service .container,
body[data-device="desktop"] #service [class*="grid"] {
  overflow: visible;
}
/* hover 时服务优势大卡的主标题变绿 + 绿光 */
body[data-device="desktop"] #service .service-adv-card:hover > h3 {
  color: #16a34a;
  text-shadow: 0 2px 10px rgba(34, 197, 94, 0.25);
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-device="desktop"] #service .service-adv-card > h3 {
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              text-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* hover 时服务优势列表项小标题（h4）轻微变绿 */
body[data-device="desktop"] #service .service-adv-card:hover h4 {
  color: #15803d;
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-device="desktop"] #service .service-adv-card h4 {
  transition: color 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}