/* ============================================================================
   文案板块 · 四个子页的「介绍 hero」（2026-09-19 用户要求）
   ----------------------------------------------------------------------------
   用户原话：「文案板块里，你看我截图这些大部分都没有 banner 的介绍呀…
             把哪些没有 banner 介绍的，根据这个功能的内容，写一个 banner 介绍出来，
             介绍又有特色、有差异化的东西出来，包括配图、UI，要高级好看。
             没有 banner 介绍怎么能吸引人呢？」

   🔴 设计依据（不是自己发明的新样式）：
     量了站内已有的同类 hero —— `.hk-hero`（黄金钩子）、`.ls-hero`（直播话术）、
     `.mts-hero`（朋友圈）、`.boss-hero`（老板获客）。它们的尺寸/字号/胶囊完全同构，
     本文件**逐项对齐**：radius 18px ｜ padding 24/20/18 ｜ tag 11px ｜ 标题 25px/900
     ｜ 说明 13px/1.72 ｜ 底部流程胶囊 12px。这样四个新 hero 与已有的四个**看起来是一套**。

   🔴 差异化怎么做的（三条同时上）：
     ① 配色 = **各功能卡自己的身份色**（style.css 的 .f-blue/.f-orange/.f-cyan/.f-indigo）
        深色版 → 白字可读，且与网格里那张卡一眼对得上；
     ② 右下角一枚**专属线稿配图**（inline SVG，白色描边，opacity .2）：
        爆款文案=笔记卡 · 爆款标题=上升柱+箭头 · 笔记润色=笔+星光 · 文案仿写=骨架三层；
     ③ 「on」流程胶囊的颜色也跟着变（不再是全站同一个金）。

   🔴 三条技术红线：容器 relative+overflow:hidden（装饰件是 absolute）；不动 style.css；
     版本号 = 内容 md5 前 8 位。
   ========================================================================== */

.ch {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 24px 20px 18px;
  margin-bottom: 14px;
  color: #fff;
}
.ch-glow, .ch-glow2 {
  position: absolute; border-radius: 50%;
  filter: blur(38px); pointer-events: none;
}
.ch-deco {
  position: absolute; right: -16px; bottom: -18px;
  width: 132px; height: 132px; opacity: 0.2; pointer-events: none;
}
.ch-tag {
  position: relative; display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: #ffe2c9; background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px; border-radius: 999px;
}
.ch-t {
  position: relative;
  font-size: 25px; font-weight: 900; line-height: 1.34;
  margin: 12px 0 9px;
}
.ch-s {
  position: relative;
  font-size: 13px; line-height: 1.72; color: rgba(255, 255, 255, 0.82);
}
.ch-s b { color: #fff; font-weight: 800; }
.ch-flow {
  position: relative; display: flex; align-items: center;
  gap: 7px; margin-top: 14px; flex-wrap: wrap;
}
.ch-flow i { font-style: normal; color: rgba(255, 255, 255, 0.42); font-size: 12px; }
.ch-fchip {
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 11px; border-radius: 999px;
}

/* ============================ ① 爆款文案（蓝 · f-blue #7cb8ff→#3b82f6） ============ */
.ch-blue { background: linear-gradient(135deg, #12306e 0%, #1f4bb0 46%, #3f83e8 100%); }
.ch-blue .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(96, 165, 250, 0.55); }
.ch-blue .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(255, 196, 120, 0.28); }
.ch-blue .ch-tag   { color: #d6e6ff; }
.ch-blue .ch-fchip.on { color: #12306e; background: linear-gradient(135deg, #d6e6ff 0%, #8fb8ff 100%); border-color: transparent; }

/* ============================ ② 爆款标题（橙金 · f-orange #ffad64→#f95901） ======== */
.ch-orange { background: linear-gradient(135deg, #6d2606 0%, #b0520c 46%, #ef7f1c 100%); }
.ch-orange .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(255, 150, 60, 0.55); }
.ch-orange .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(255, 92, 120, 0.26); }
.ch-orange .ch-tag   { color: #ffe0b8; }
.ch-orange .ch-fchip.on { color: #5a2606; background: linear-gradient(135deg, #ffe0b8 0%, #ffb057 100%); border-color: transparent; }

/* ============================ ③ 笔记润色（青 · f-cyan #7fdcf0→#06b6d4） ============ */
.ch-cyan { background: linear-gradient(135deg, #063c4d 0%, #0c6d86 46%, #16a8c4 100%); }
.ch-cyan .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(34, 211, 238, 0.5); }
.ch-cyan .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(255, 214, 140, 0.26); }
.ch-cyan .ch-tag   { color: #c6f0f8; }
.ch-cyan .ch-fchip.on { color: #063a47; background: linear-gradient(135deg, #c6f0f8 0%, #57d4e8 100%); border-color: transparent; }

/* ============================ ④ 文案仿写（靛 · f-indigo #8b93f8→#4f46e5） ========== */
.ch-indigo { background: linear-gradient(135deg, #1f1a6b 0%, #3b34ad 46%, #6a63e6 100%); }
.ch-indigo .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(129, 140, 248, 0.55); }
.ch-indigo .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(255, 140, 180, 0.26); }
.ch-indigo .ch-tag   { color: #dcdcff; }
.ch-indigo .ch-fchip.on { color: #1f1a6b; background: linear-gradient(135deg, #dcdcff 0%, #9a94ff 100%); border-color: transparent; }

/* ============================ 窄屏 ================================================ */
@media (max-width: 420px) {
  .ch { padding: 20px 17px 16px; }
  .ch-t { font-size: 22px; }
  .ch-deco { width: 112px; height: 112px; opacity: 0.16; }
}

/* ============================================================================
   v2（2026-09-19 16:5x）— 把剩下三个「不在家族里」的介绍统一进来
   ----------------------------------------------------------------------------
   用户原话：「你看一下这几个，要么就是颜色不搭，要么就是里面的内容差点意思，不吸引人。你来优化一下。」
   逐个量完 6 张截图后的诊断：
     · #sub-reply   .rep-head  = **白底卡**（#fff6ef）→ 与彩色 hero 家族不搭
     · #sub-icebreak .ib-head  = **白底卡**（#fff6ee）→ 同上
     · #sub-copy-extract       = **根本没有 hero**（直接进输入卡）
     · 其余（爆款文案/标题/润色/仿写/口播/朋友圈/钩子/直播/老板获客）都已是彩色 hero ✅
   做法：两个白底卡**不动同事的 HTML**，只在本文件覆盖样式（同特异性 + 后加载者胜）；
         提取文案确实要补结构，才动 index.html。
   配色仍守同一条规则：**用该功能自己那张卡的色** ——
         回复 = f-orange 的朱红档 / 破冰 = f-forest 森绿 / 提取 = f-purple 紫罗兰。
   ========================================================================== */

/* ---------- 三个新增配色档 ---------- */
.ch-vermilion { background: linear-gradient(135deg, #6d1d10 0%, #a8381a 46%, #d95a2a 100%); }
.ch-vermilion .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(255, 150, 90, 0.5); }
.ch-vermilion .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(255, 210, 120, 0.24); }
.ch-vermilion .ch-tag   { color: #ffd9c4; }
.ch-vermilion .ch-fchip.on { color: #6d1d10; background: linear-gradient(135deg, #ffd9c4 0%, #ffa878 100%); border-color: transparent; }

.ch-forest { background: linear-gradient(135deg, #0b3327 0%, #14563f 46%, #24795a 100%); }
.ch-forest .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(52, 211, 153, 0.42); }
.ch-forest .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(200, 255, 220, 0.2); }
.ch-forest .ch-tag   { color: #c8f0dc; }
.ch-forest .ch-fchip.on { color: #0b3327; background: linear-gradient(135deg, #c8f0dc 0%, #5fc79b 100%); border-color: transparent; }

.ch-purple { background: linear-gradient(135deg, #3a1466 0%, #5d22a8 46%, #8a45dd 100%); }
.ch-purple .ch-glow  { width: 190px; height: 190px; right: -50px; top: -70px; background: rgba(168, 85, 247, 0.5); }
.ch-purple .ch-glow2 { width: 150px; height: 150px; left: -40px; bottom: -70px; background: rgba(255, 200, 140, 0.24); }
.ch-purple .ch-tag   { color: #e2d0ff; }
.ch-purple .ch-fchip.on { color: #3a1466; background: linear-gradient(135deg, #e2d0ff 0%, #b98cff 100%); border-color: transparent; }

/* ---------- ① 回复客户话术：白底卡 → 朱红 hero（不动同事 HTML）---------- */
#sub-reply .rep-head {
  position: relative; overflow: hidden;
  border: none; color: #fff;
  border-radius: 18px; padding: 22px 19px 17px; margin-bottom: 14px;
  background: linear-gradient(135deg, #6d1d10 0%, #a8381a 46%, #d95a2a 100%);
  box-shadow: 0 12px 26px -14px rgba(120, 40, 15, 0.62);
}
#sub-reply .rep-head::before {          /* 身份小胶囊（家族统一件） */
  content: '客服 · 每句话都能接住';
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: #ffd9c4; background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 4px 10px; border-radius: 999px;
}
#sub-reply .rep-head::after {           /* 右下角「聊天气泡」（纯 CSS 画的配图） */
  content: ''; position: absolute; right: -12px; bottom: -14px;
  width: 92px; height: 70px; border-radius: 22px 22px 22px 6px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: -26px -26px 0 -18px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
#sub-reply .rep-head-t { position: relative; color: #fff; font-size: 25px; font-weight: 900; line-height: 1.34; margin: 12px 0 9px; }
#sub-reply .rep-head-d { position: relative; color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.72; }
#sub-reply .rep-head-d b { color: #fff; font-weight: 800; }
#sub-reply .rep-gains { position: relative; }
#sub-reply .rep-gain { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); }

/* ---------- ② 私域破冰话术：白底卡 → 森绿 hero（不动同事 HTML）---------- */
#sub-icebreak .ib-head {
  position: relative; overflow: hidden;
  border: none; color: #fff;
  border-radius: 18px; padding: 22px 19px 17px;
  /* 底 = 森绿渐变；上面两条 linear-gradient 画出右下角「+」= 加好友（纯 CSS 配图） */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
    linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
    linear-gradient(135deg, #0b3327 0%, #14563f 46%, #24795a 100%);
  background-size: 8px 46px, 46px 8px, 100% 100%;
  background-position: right 32px bottom 34px, right 13px bottom 53px, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 12px 26px -14px rgba(10, 60, 45, 0.62);
}
#sub-icebreak .ib-head::before {
  content: '私域 · 加好友第一句';
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: #c8f0dc; background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 4px 10px; border-radius: 999px;
}
#sub-icebreak .ib-head::after {          /* 原来那团橙色柔光 → 换成白色柔光 */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
}
#sub-icebreak .ib-head-t { position: relative; color: #fff; font-size: 25px; font-weight: 900; line-height: 1.34; margin: 12px 0 9px; letter-spacing: 0.3px; }
#sub-icebreak .ib-head-d { position: relative; color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.72; margin-top: 0; }
#sub-icebreak .ib-head-d b { color: #fff; font-weight: 800; }
#sub-icebreak .ib-gains { position: relative; }
#sub-icebreak .ib-gain { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); }