@charset "utf-8";
/* ============================================================
   waou-refine.css  ·  首页视觉精修层
   生成：2026-08-31   依据：taste-skill / redesign-existing-projects
   ------------------------------------------------------------
   设计原则：
   1. 只做视觉层，不动 DOM 结构 —— 保护已验收的 SEO 成果
   2. 加载顺序在 index.css 之后，靠层叠覆盖而非 !important 轰炸
   3. 中文优先的字体栈（原站只写 "微软雅黑"，苹果设备掉宋体）
   4. 单一强调色：小红书品牌红，移除紫蓝 AI 指纹色
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 品牌色：唯一强调色 */
  --waou-brand:        #ff2442;
  --waou-brand-deep:   #e01d38;
  --waou-brand-soft:   rgba(255,36,66,.08);
  --waou-brand-ring:   rgba(255,36,66,.28);

  /* 中性色：统一冷灰family，避免暖冷混用 */
  --waou-ink:          #1a1d24;
  --waou-ink-2:        #3d4350;
  --waou-ink-3:        #6b7280;
  --waou-ink-4:        #9aa1ad;
  --waou-line:         #e8eaee;
  --waou-line-soft:    #f1f3f5;
  --waou-bg:           #ffffff;
  --waou-bg-soft:      #fafbfc;

  /* 阴影：带品牌色倾向，而非纯黑透明 */
  --waou-shadow-sm:  0 1px 2px rgba(26,29,36,.05), 0 1px 3px rgba(26,29,36,.06);
  --waou-shadow-md:  0 2px 6px rgba(26,29,36,.06), 0 8px 20px rgba(26,29,36,.07);
  --waou-shadow-lg:  0 4px 12px rgba(26,29,36,.07), 0 16px 40px rgba(26,29,36,.09);
  --waou-shadow-brand: 0 6px 18px rgba(255,36,66,.24);

  --waou-r-sm: 6px;
  --waou-r:    10px;
  --waou-r-lg: 14px;

  --waou-ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. 字体栈（本次最关键的一项） ----------
   原站 body{font-family:"微软雅黑"} 只有单一字体名：
   · macOS / iOS 没有微软雅黑 → 回退到宋体 → 观感陡降
   · 不含 system-ui → 拿不到系统优化过的中文渲染
   下面按 苹果 → Windows → 开源 → 通用 的顺序回退。
------------------------------------------------------------ */
body,
body.waou-refined{
  font-family:
    system-ui, -apple-system, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
    "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--waou-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数字/价格用等宽数字，表格与数据区更整齐 */
.waou-num,
.shouye_kuai_data .kuai_gong strong{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 覆盖 head_foot.css 里写死的 "黑体"（渲染粗糙） */
.header .header_ul>li a,
.header .header_ul>li>ul>li>a{
  font-family: inherit;
  letter-spacing: .01em;
}

/* ---------- 3. 标题排版 ----------
   taste-skill：大标题要收紧字距、压低行高，才有"重量感"。
   中文不宜用负 tracking（会挤字），故仅对含数字/英文的场景微调。
------------------------------------------------------------ */
h1, h2, h3, h4, h5{
  color: var(--waou-ink);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;          /* 避免末行孤字 */
}
h1{ letter-spacing: -.01em; }
h2{ letter-spacing: -.005em; }

/* 首页各区块主标题：原为 28px 居中，加大留白与呼吸感 */
.kuai_gong h2,
.shouye_kuai1 h2, .shouye_kuai2 h2, .shouye_kuai3 h2,
.shouye_kuai4 h2, .shouye_kuai5 h2{
  position: relative;
  color: var(--waou-ink);
}

/* 标题下方细装饰线：替代"纯文字标题"的单调感 */
.kuai_gong > .container > h2::after{
  content:"";
  display:block;
  width:44px; height:3px;
  margin:14px auto 0;
  border-radius:3px;
  background: linear-gradient(90deg, var(--waou-brand), var(--waou-brand-soft));
}

/* 正文段落：限制阅读宽度（中文约 40 字/行最舒适） */
.kuai_gong p{
  max-width: 42em;
  color: var(--waou-ink-2);
}
.kuai_gong .container > p{ margin-left:auto; margin-right:auto; }

/* ---------- 4. 强调色归一 ----------
   原站同时存在 #ff2442（品牌红）与 #6366f1（紫蓝）。
   紫蓝是 taste-skill 点名的 "AI 渐变指纹色"，且与小红书调性冲突。
   内联 style 优先级高于此处，故对应改动在模板侧同步执行。
------------------------------------------------------------ */
.waou-stat-num{
  color: var(--waou-brand) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.02em;
}

/* ---------- 5. 卡片：统一质感 ---------- */
.waou-card{
  background: var(--waou-bg);
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r-lg);
  box-shadow: var(--waou-shadow-sm);
  transition: transform .28s var(--waou-ease),
              box-shadow .28s var(--waou-ease),
              border-color .28s var(--waou-ease);
  will-change: transform;
}
.waou-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--waou-shadow-md);
  border-color: #dcdfe5;
}

/* ---------- 6. 按钮：补齐 hover / active / focus ----------
   原站 CTA 只有静态渐变，无任何交互反馈。
------------------------------------------------------------ */
.waou-btn{
  display:inline-block;
  padding:11px 30px;
  background: linear-gradient(135deg, var(--waou-brand), #ff5a72);
  color:#fff !important;
  border:0;
  border-radius: var(--waou-r);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  min-width:104px;
  text-align:center;
  box-shadow: var(--waou-shadow-brand);
  transition: transform .2s var(--waou-ease),
              box-shadow .2s var(--waou-ease),
              filter .2s var(--waou-ease);
}
.waou-btn:hover,
.waou-btn:focus{
  color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,36,66,.32);
  filter: saturate(1.06);
  text-decoration:none;
}
/* 按下反馈：物理感 */
.waou-btn:active{
  transform: translateY(0) scale(.985);
  box-shadow: 0 3px 10px rgba(255,36,66,.26);
}

/* ---------- 7. 键盘可达性（原站 :focus 数量为 0） ----------
   taste-skill 明确指出：focus ring 是无障碍硬性要求，不是可选项。
------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.waou-btn:focus-visible{
  outline: 2px solid var(--waou-brand);
  outline-offset: 2px;
  border-radius: var(--waou-r-sm);
}
/* 鼠标点击不显示 ring，仅键盘显示 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){ outline:none; }

/* 表单聚焦态 */
input:focus, textarea:focus{
  border-color: var(--waou-brand) !important;
  box-shadow: 0 0 0 3px var(--waou-brand-ring);
}

/* ---------- 8. 链接与列表 ---------- */
a{
  color: var(--waou-ink-2);
  transition: color .18s var(--waou-ease);
}
a:hover{ color: var(--waou-brand); text-decoration:none; }

/* 资讯/问答列表项：hover 有位移反馈 */
.waou-list-item{
  padding:9px 0;
  border-bottom:1px dashed var(--waou-line);
  transition: padding-left .22s var(--waou-ease),
              border-color .22s var(--waou-ease);
}
.waou-list-item:hover{
  padding-left:6px;
  border-bottom-color: var(--waou-brand-ring);
}
.waou-list-item:last-child{ border-bottom:0; }

/* ---------- 9. 导航：当前页指示 ----------
   taste-skill：用户必须知道自己在哪一页。
------------------------------------------------------------ */
.header .header_ul>li>a{
  position:relative;
  transition: color .2s var(--waou-ease);
}
.header .header_ul>li>a::after{
  content:"";
  position:absolute;
  left:50%; bottom:-4px;
  width:0; height:2px;
  background: var(--waou-brand);
  border-radius:2px;
  transform: translateX(-50%);
  transition: width .26s var(--waou-ease);
}
.header .header_ul>li>a:hover::after,
.header .header_ul>li.active>a::after,
.header .header_ul>li.on>a::after{ width:70%; }
.header .header_ul>li.active>a,
.header .header_ul>li.on>a{ color: var(--waou-brand) !important; }

/* ---------- 10. 区块节奏 ----------
   taste-skill：营销页要敢留白；底部 padding 视觉上宜略大于顶部。
------------------------------------------------------------ */
.kuai_gong{ padding:66px 0 74px; }
.kuai_gong + .kuai_gong{ border-top:1px solid var(--waou-line-soft); }
/* 交替底色，打破通篇纯白的平淡 */
.shouye_kuai2, .shouye_kuai4{ background: var(--waou-bg-soft); }

/* ---------- 11. 图片 ---------- */
img{ max-width:100%; height:auto; }
.waou-card img,
.kuai_gong img{ border-radius: var(--waou-r-sm); }

/* ---------- 12. 平滑滚动与动效礼貌降级 ---------- */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 13. 移动端 ---------- */
@media (max-width:768px){
  body{ font-size:14.5px; line-height:1.7; }
  .kuai_gong{ padding:40px 0 46px; }
  .kuai_gong > .container > h2{ font-size:21px !important; }
  .waou-stat-num{ font-size:27px !important; }
  .waou-btn{ padding:11px 22px; font-size:14.5px; }
  /* 触控目标不小于 44px（iOS HIG） */
  .header .header_ul>li>a,
  .waou-btn{ min-height:44px; line-height:1.5; }
}
@media (max-width:480px){
  .kuai_gong > .container > h2{ font-size:19px !important; }
}

/* ---------- 14. 打印 ---------- */
@media print{
  .header, .footer, .waou-btn{ display:none; }
  body{ color:#000; font-size:12pt; }
}

/* ============================================================
   15. 内联样式迁移后的等价类
   ------------------------------------------------------------
   下列 class 由模板中 102 处内联 style 转换而来。
   数值在原基础上按 taste-skill 审计做了节奏与层级微调，
   但保持视觉连续性，不做结构性改动。
   ============================================================ */

/* 区块主标题（原 28px 居中） */
.waou-sec-title{
  font-size: 30px;
  font-weight: 700;
  color: var(--waou-ink);
  text-align: center;
  line-height: 1.32;
  letter-spacing: -.008em;
  margin: 0 0 38px;
}

/* 卡片内标题 / 描述 */
.waou-card-title{
  font-size: 16.5px;
  font-weight: 600;
  color: var(--waou-ink);
  line-height: 1.45;
  margin: 0 0 9px;
}
.waou-card-desc{
  font-size: 13.5px;
  color: var(--waou-ink-3);
  line-height: 1.7;
  margin: 0;
}

/* 统计数字（原 #6366f1 紫蓝 -> 品牌红，强调色归一） */
.waou-stat-num{
  display: block;
  font-size: 33px;
  font-weight: 700;
  color: var(--waou-brand);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.waou-stat-num--lg{
  font-size: 37px;
  margin-bottom: 5px;
}

/* 卡片两种变体：用 flex 保持原有横向排布 */
.waou-card--stat{
  flex: 1;
  min-width: 180px;
  padding: 26px 20px;
  text-align: center;
}
.waou-card--feat{
  flex: 1;
  min-width: 160px;
  padding: 30px 22px;
}

/* 正文块（原 max-width:1100px） */
.waou-prose{
  max-width: 1100px;
  margin: 0 auto;
  line-height: 1.9;
  color: var(--waou-ink-2);
  font-size: 15.5px;
}
.waou-prose p{ margin-bottom: 1.15em; }

/* 白底区块 */
.waou-band{
  background: var(--waou-bg);
  padding: 62px 0 68px;
}

/* 文本工具类 */
.waou-t   { color: var(--waou-ink-2); }
.waou-t14 { color: var(--waou-ink-2); font-size: 14px; }
.waou-t11 { color: var(--waou-ink-4); font-size: 11.5px; }
.waou-muted{ font-size: 14px; color: var(--waou-ink-3); }
.waou-hl  { color: var(--waou-brand); font-weight: 700; }

/* 间距工具类 */
.waou-mb16{ margin-bottom: 16px; }
.waou-mb8 { margin-bottom: 8px; }
.waou-indent{ padding-left: 20px; margin-bottom: 16px; }

/* 结构工具类 */
.waou-divider-top{
  border-top: 1px solid var(--waou-line);
  margin-top: 5px;
  padding-top: 9px;
}
.waou-plain-list{
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 移动端覆写 */
@media (max-width: 768px){
  .waou-sec-title{ font-size: 21px; margin-bottom: 24px; }
  .waou-stat-num{ font-size: 27px; }
  .waou-stat-num--lg{ font-size: 29px; }
  .waou-prose{ font-size: 15px; line-height: 1.82; }
  .waou-band{ padding: 40px 0 44px; }
  .waou-card--stat,
  .waou-card--feat{ min-width: 100%; padding: 22px 18px; }
}

/* ============================================================
   16. 深色区域修正（修复本轮引入的对比度回归）
   ------------------------------------------------------------
   问题：第 2 节把 body 颜色设为 --waou-ink-2（深灰），
   页脚 / 遮罩层是深色底，深字压深底 → 对比度低至 1.18–1.44，
   远低于 WCAG AA 的 4.5。这是本轮改动引入的回归，必须修。
   做法：深色容器内强制浅色文本，并保持标题与正文的层级差。
   ============================================================ */

.footer,
.footer *,
.foot, .foot *,
.bottom, .bottom *{
  color: rgba(255,255,255,.82);
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5,
.foot h1, .foot h2, .foot h3, .foot h4, .foot h5,
.bottom h1, .bottom h2, .bottom h3, .bottom h4, .bottom h5{
  color: #fff;
}
.footer a, .foot a, .bottom a{
  color: rgba(255,255,255,.74);
}
.footer a:hover, .foot a:hover, .bottom a:hover{
  color: #fff;
}
/* 备案号等次要信息：仍需 >=4.5，故不低于 .68 */
.footer .copyright, .footer .icp,
.foot .copyright, .foot .icp{
  color: rgba(255,255,255,.7);
}

/* 轮播/横幅上的深色遮罩文字 */
.carousel-caption, .carousel-caption *,
.banner-text, .banner-text *,
[class*="mask"] h2, [class*="overlay"] h2{
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ---------- 17. 浅底上的低对比文字提亮 ----------
   原站多处用 #999 / #888 于白底，比值 2.8–3.5，不达标。
   统一收紧到可读范围（保持"次要信息"观感但达标）。
------------------------------------------------------------ */
.waou-t11{ color: #6a707c; }          /* 原 #999 -> 4.5+ */
.waou-muted{ color: #5f6672; }

/* 品牌红作正文色时对比不足（3.57），仅在浅粉底加深 */
.waou-hl,
[style*="background:#fff7f8"] .waou-hl{
  color: var(--waou-brand-deep);
}

/* 反白按钮文字（白字红底 3.78 -> 加深底色达标） */
.waou-btn{
  background: linear-gradient(135deg, var(--waou-brand-deep), #ff4560);
}

/* ---------- 18. 移动端导航：已撑销 ----------
   此处原先把 .header_ul 改成常显的 flex 换行布局，那是错的。

   head_foot.css:185 的移动端设计是【抽屉菜单】：
     .header_ul{ position:fixed; right:-40%; width:40%; }
   默认藏在屏外，由 .yd_caidan 按钮切换 .yd_yidong 滑出。

   改成 left:0/right:0 后抽屉交互被彻底破坏：
   菜单永久展开、ul 高度撑成 844px、
   菜单项散落在 top=6/284/562。

   而当初审计报的“横向溢出 L=390 R=546”，
   其实就是抽屉的正常隐藏状态（就该在屏外）——
   是我的审计脚本误报，不是缺陷。

   移动端触控高度改在第 24 节处理，不动定位与显示逻辑。
-------------------------------------------------------------- */

/* ============================================================
   19. 移动端导航：已撑销（同第 18 节）
   ------------------------------------------------------------
   这一节把 left/right 强制归零，是在错误前提上的
   “修得更彻底”，反而把抽屉菜单死锁在展开状态。
   已整段移除。
   ============================================================ */

/* ============================================================
   20. 低对比内联文字（模板侧 inline style 已同步改色）
   ------------------------------------------------------------
   D 项实测：#999 / #888 均来自模板 inline style，
   CSS 无法覆盖，故在模板中直接替换为达标色值。
   此处仅作兜底（当 inline 被移除后生效）。
   ============================================================ */
.kuai_gong span[style*="#999"],
.kuai_gong p[style*="#888"]{
  color: #6a707c;
}

/* ============================================================
   21. 剩余三处对比度收尾
   ------------------------------------------------------------
   均来自 head_foot.css / index.css，非首页模板 inline，
   故可在本层用选择器覆盖。
   ============================================================ */

/* (1) "联系我们" 白字压 #ff2800 亮红：3.78 < 4.5
   实测来源：index.css:97  .shouye_kuai5 .container>ul>li
             index.css:125 .biaodan form ul li .coolbg
   真正的元凶是这两条都带 opacity:0.7 —— 半透明让白字与红底
   同时被背景冲淡，等效对比度只剩 3.78。
   做法：opacity 归 1（本来也没有透明的设计意图），底色压深。 */
.shouye_kuai5 .container > ul > li,
.biaodan form ul li .coolbg{
  background: #d81e33;
  opacity: 1;
}
.biaodan form ul li .coolbg{
  border-color: #c2172c;
}
/* hover 时给出反馈（原本没有） */
.shouye_kuai5 .container > ul > li:hover{
  background: #c2172c;
}

/* (2) 品牌红作 18px 标题压浅粉底 #fff7f8：3.57 < 4.5
       浅粉底保留，红字加深。 */
[style*="#fff7f8"] h3,
[style*="#fff7f8"] h4,
[style*="#fff7f8"] strong,
[style*="background:#fff7f8"] *[style*="color:#ff2442"]{
  color: #c8172c !important;
}

/* (3) 页脚 "扫一扫，加好友咨询" #999 压 #383838：4.12 < 4.5
       第 16 节已统一页脚为 rgba(255,255,255,.82)，
       但该处 inline #999 优先级更高，需显式覆盖。 */
.footer span[style*="#999"],
.footer span[style*="color:#999"],
.foot span[style*="#999"],
.bottom span[style*="#999"],
.footer [style*="font-size:12px"]{
  color: rgba(255,255,255,.78) !important;
}

/* ============================================================
   22. 触控目标补足（移动端）
   ------------------------------------------------------------
   实测多处 17–25px，低于 iOS HIG 的 44px 下限。
   对纯文本链接不硬撑高度（会破坏文章列表排版），
   改为增加垂直 padding 扩大可点区域。
   ============================================================ */
@media (max-width: 768px){
  .waou-list-item a,
  .kuai_gong li > a,
  .footer a, .foot a{
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.5;
  }
  /* 底部导航 / 标签类小链接 */
  .footer .footer_nav a,
  .foot .foot_nav a{
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   23. Font Awesome 4.7 兼容层
   ------------------------------------------------------------
   背景：首页原从 cdnjs.cloudflare.com 加载 FA 6.0-beta3，
   国内访问经常超时 → 图标区空白，拖累 LCP 与首屏观感。
   站内自带 skin/css/font-awesome.min.css，但版本是 4.7.0。

   冲突：站点模板用的是 FA5+ 语法（fas / far / fab 前缀），
   而 4.7 只认 .fa —— 直接换本地文件会导致图标全部消失。

   做法：把 fas/far/fab 映射到 4.7 的 FontAwesome 字体族，
   并按实测用到的图标补齐字形（4.7 与 5+ 的码位不同）。
   实测站内仅用到 4 个图标，逐个对照 4.7 码位补全。
   ============================================================ */

.fas, .far, .fab, .fal, .fa{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 实测站内使用的图标 —— 对照 FA 4.7 码位 */
.fas.fa-comments:before,
.far.fa-comments:before{ content: "\f086"; }
.fas.fa-times:before{ content: "\f00d"; }
.fas.fa-user-circle:before,
.far.fa-user-circle:before{ content: "\f2bd"; }
.fas.fa-phone:before{ content: "\f095"; }
.fas.fa-envelope:before,
.far.fa-envelope:before{ content: "\f0e0"; }
.fas.fa-weixin:before,
.fab.fa-weixin:before{ content: "\f1d7"; }
.fas.fa-qq:before,
.fab.fa-qq:before{ content: "\f1d6"; }
.fas.fa-map-marker-alt:before{ content: "\f041"; }  /* 4.7 名为 map-marker */
.fas.fa-clock:before,
.far.fa-clock:before{ content: "\f017"; }           /* 4.7 名为 clock-o */
.fas.fa-check:before{ content: "\f00c"; }
.fas.fa-check-circle:before,
.far.fa-check-circle:before{ content: "\f058"; }
.fas.fa-arrow-right:before{ content: "\f061"; }
.fas.fa-arrow-up:before{ content: "\f062"; }
.fas.fa-chevron-right:before{ content: "\f054"; }
.fas.fa-chevron-left:before{ content: "\f053"; }
.fas.fa-star:before{ content: "\f005"; }
.fas.fa-search:before{ content: "\f002"; }
.fas.fa-bars:before{ content: "\f0c9"; }

/* ============================================================
   24. 导航栏单行修复（本轮报错的问题）
   ------------------------------------------------------------
   现象：「联系我们」掉到第二行，与其他菜单项不在一行。

   实测数据（1440px 视口）：
     .header_ul 容器  position:absolute; right:0;  实际宽 878px
     菜单项排到       left=1121 + w=89 = 1210px
     溢出             332px  → float:left 换行 → 第 10 项掉行

   根因是我改的：head_foot.css:27 用 `font-size:1.2em`，
   em 是相对单位 —— 我把 body 从 14px 调到 15px，
   导航字号随之从 16.8px 变成 18px，每项宽约 +7%，
   9 项累计就溢出了容器。

   修法：导航改用绝对单位固定字号，与 body 解耦；
   同时收紧项间距。不动 float/position，保留原布局模型。
   ============================================================ */

.header .header_ul > li > a{
  font-size: 16px;          /* 原 1.2em×15px=18px → 固定 16px */
  letter-spacing: 0;
}
.header .header_ul > li{
  margin: 0 6px;            /* 原 9px；9 项共省 54px */
}

/* 下拉子菜单字号同样解耦，避免继承 body 变化 */
.header .header_ul > li > ul > li > a{
  font-size: 14px;
}

/* 1200–1440：容器更窄，进一步收紧 */
@media (min-width: 992px) and (max-width: 1440px){
  .header .header_ul > li > a{ font-size: 15px; }
  .header .header_ul > li{ margin: 0 5px; }
}

/* 992–1199：head_foot.css:107/131 本就把 margin 收到 8px，
   这里同步压字号，避免二次换行 */
@media (min-width: 992px) and (max-width: 1199px){
  .header .header_ul > li > a{ font-size: 14px; }
  .header .header_ul > li{ margin: 0 4px; }
}

/* 抽屉菜单内（768px 以下）恢复原始行高模型，
   清掉第 13 节可能残留的影响 */
@media (max-width: 768px){
  .header .header_ul > li > a{
    font-size: 15px;
    min-height: 0;
    display: inline;
    line-height: inherit;
  }
  /* 抽屉里不需要下划线动效（原设计是整行边框） */
  .header .header_ul > li > a::after{ display: none; }
}

/* ============================================================
   25. 首页区块视觉重构（第 14 轮）
   ------------------------------------------------------------
   本节修复两个由第 2/10 节引入的回归，并给 6 个区块补齐设计感。

   【回归一：区块2 黑底黑字，实测对比度 1.32 / 1.29】
   原站设计（index.css:31,33,35）本是"深底白字"：
     .shouye_kuai2{ background:url(shouye_kuai2_bg.jpg); color:#fff; }
     .kuai2_bg{ background:rgba(0,0,0,.8); }
     .shouye_kuai2 p{ color:#F3F3F3; }
   我在第 2 节写了 `.shouye_kuai2 h2{color:var(--waou-ink)}`（深墨），
   又在第 10 节写了 `.shouye_kuai2{background:var(--waou-bg-soft)}`（浅灰），
   但 .kuai2_bg 的 rgba(0,0,0,.8) 遮罩仍在 —— 合成后仍是深灰底(rgb(50,50,50))，
   于是深字压深底，h2 与副标题肉眼几乎不可见。
   这就是用户说的"显示不出来"。
   处置：按用户决定，恢复原站深底白字（改动面最小、尊重原设计）。

   【回归二：区块 1/2/3 主标题左对齐】
   原站 index.css 中没有任何 h2 居中规则（grep h2 仅命中 .header h2），
   区块 3/4/5 的居中来自我新增的 .waou-sec-title，
   而区块 1、2、品牌区的 h2 未挂该 class → textAlign 实测为 start。
   处置：模板侧补挂 .waou-sec-title，并在此处保证深底场景下的配色正确。
   ============================================================ */

/* ---- 25.1 撤销第 10 节对区块2 的浅底覆写，恢复原站深色背景图 ---- */
.shouye_kuai2{
  background: #0f1115 url(../images/shouye_kuai2_bg.jpg) center/cover no-repeat;
  color: #fff;
}
/* 遮罩：原站 rgba(0,0,0,.8) 偏闷，改用竖向渐变保留层次但同等压暗，
   实测最亮处 rgb(28,30,36) —— 白字对比度仍 >12，安全 */
.shouye_kuai2 .kuai2_bg{
  background: linear-gradient(180deg,
              rgba(10,11,14,.86) 0%,
              rgba(10,11,14,.80) 55%,
              rgba(10,11,14,.88) 100%);
  opacity: 1;
}

/* ---- 25.2 深底区块内的文字配色（覆盖第 2 节的深墨色）---- */
.shouye_kuai2 > .kuai2_bg > .container > h2,
.shouye_kuai2 h2.waou-sec-title{
  color: #fff;
}
.shouye_kuai2 > .kuai2_bg > .container > p{
  color: rgba(255,255,255,.86);
}
/* 深底上的装饰线：品牌红在深底对比偏弱，改亮一档 */
.shouye_kuai2 > .kuai2_bg > .container > h2::after,
.shouye_kuai2 h2.waou-sec-title::after{
  background: linear-gradient(90deg, #ff4d63, #ff8a99);
}

/* 区块2 卡片：白卡压深底，强化投影与序号 */
.shouye_kuai2 ul li{
  background: #fff;
  border-radius: var(--waou-r-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  padding: 22px 24px 20px;
  transition: transform .28s var(--waou-ease), box-shadow .28s var(--waou-ease);
}
.shouye_kuai2 ul li:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
}
/* 序号 01-04：原为 red 2.5em 绝对定位，改为品牌红大号数字 */
.shouye_kuai2 ul li i{
  color: var(--waou-brand);
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  top: 20px;
}
.shouye_kuai2 ul li h4{
  color: var(--waou-ink);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.shouye_kuai2 ul li p{
  color: var(--waou-ink-2);
  font-size: 14px;
  line-height: 1.78;
}

/* ---- 25.3 区块1「我们能提供什么」：8 项服务卡片化 ----
   原站 index.css:15 —— li 是 float 布局 + height:220px 固定高 + 2px 灰投影，
   固定高在中文换行时容易出现空白或截断。改 grid 等高，去掉固定高。
------------------------------------------------------------ */
.shouye_kuai1 ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: visible;
}
.shouye_kuai1 ul li{
  /* 覆盖原站 float/width/margin/height */
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r-lg);
  box-shadow: none;
  transition: transform .28s var(--waou-ease),
              box-shadow .28s var(--waou-ease),
              border-color .28s var(--waou-ease);
}
.shouye_kuai1 ul li:hover{
  /* 覆盖原站 :hover{background:#f3f3f3;border:1px solid #FF0000} */
  background: #fff;
  border-color: rgba(255,36,66,.38);
  box-shadow: 0 10px 26px rgba(20,24,32,.10);
  transform: translateY(-4px);
}
.shouye_kuai1 ul li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 30px 18px 26px;
  color: var(--waou-ink);
}
.shouye_kuai1 ul li:hover a{ color: var(--waou-ink); }
/* 图标：原 width:80px;margin:20px，改为品牌红浅底圆形托底 */
.shouye_kuai1 ul li a img{
  width: 46px;
  height: 46px;
  margin: 0 0 16px;
  padding: 13px;
  box-sizing: content-box;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff1f3, #ffe4e8);
  transition: transform .3s var(--waou-ease);
}
.shouye_kuai1 ul li:hover a img{ transform: scale(1.07); }
.shouye_kuai1 ul li h4{
  font-size: 16.5px;
  font-weight: 700;
  color: var(--waou-ink);
  margin: 0 0 8px;
}
.shouye_kuai1 ul li:hover h4{ color: var(--waou-brand); }
.shouye_kuai1 ul li span{
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--waou-ink-3);
}
.shouye_kuai1 .container{ padding-bottom: 0; }

/* ---- 25.4 区块3「合作过的品牌客户」：居中 + logo 网格 ----
   原站 index.css:53-59 用 border 拼接 5 列表格线，float 布局。
   保留"网格线"观感但改 grid，避免 float 收尾错位。
------------------------------------------------------------ */
.shouye_kuai3 ul{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r);
  overflow: hidden;
  background: var(--waou-line);
}
.shouye_kuai3 ul li{
  /* 覆盖原站 float/width/border 系列规则 */
  float: none;
  width: auto;
  border: 0;
  margin: 0;
  list-style: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  box-shadow: inset -1px -1px 0 var(--waou-line);
  transition: box-shadow .26s var(--waou-ease), transform .26s var(--waou-ease);
}
.shouye_kuai3 ul li:hover{
  box-shadow: inset -1px -1px 0 var(--waou-line), 0 8px 22px rgba(20,24,32,.10);
  transform: translateY(-2px);
  z-index: 1;
}
/* logo 常态去饱和，hover 复原 —— 让 20 个杂色 logo 视觉统一 */
.shouye_kuai3 ul li img{
  width: 100%;
  max-width: 132px;
  height: auto;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .3s var(--waou-ease), opacity .3s var(--waou-ease);
}
.shouye_kuai3 ul li:hover img{ filter: grayscale(0); opacity: 1; }
.shouye_kuai3 .container{ padding-bottom: 0; }

/* ---- 25.5 通用：特性卡网格 / 时间轴 / 行业卡 ----
   用于把区块 3「为什么选择小红书」、4「营销趋势」、5「服务覆盖行业」
   从 .waou-prose 纯文字段落改为结构化排版。
   仅新增 class，不改动原站选择器。
------------------------------------------------------------ */

/* 区块导语：居中、限宽、比正文略大 */
.waou-lead{
  max-width: 800px;
  margin: -8px auto 40px;
  text-align: center;
  font-size: 16px;
  line-height: 1.85;
  color: var(--waou-ink-2);
}
.waou-lead strong{ color: var(--waou-ink); font-weight: 700; }

/* ---- 特性卡网格（3 列，自适应）---- */
.waou-grid{
  display: grid;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.waou-grid--3{ grid-template-columns: repeat(3, 1fr); }
.waou-grid--4{ grid-template-columns: repeat(4, 1fr); }
.waou-grid--2{ grid-template-columns: repeat(2, 1fr); }

.waou-fcard{
  background: #fff;
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r-lg);
  padding: 28px 24px 26px;
  transition: transform .28s var(--waou-ease),
              box-shadow .28s var(--waou-ease),
              border-color .28s var(--waou-ease);
}
.waou-fcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(20,24,32,.10);
  border-color: #dcdfe5;
}
/* 卡内图标章：品牌红浅底方块 */
.waou-fcard__ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff1f3, #ffe1e6);
  color: var(--waou-brand);
  font-size: 19px;
  line-height: 1;
}
.waou-fcard__t{
  font-size: 17px;
  font-weight: 700;
  color: var(--waou-ink);
  margin: 0 0 10px;
  line-height: 1.4;
}
.waou-fcard__d{
  font-size: 14px;
  line-height: 1.8;
  color: var(--waou-ink-2);
  margin: 0;
}
.waou-fcard__d strong{ color: var(--waou-ink); font-weight: 700; }

/* 高亮卡（用于"我们的差异"三条核心竞争力） */
.waou-fcard--accent{
  background: linear-gradient(160deg, #fffafb 0%, #fff 62%);
  border-color: rgba(255,36,66,.20);
}

/* ---- 数字统计条（痛点/交付时效）---- */
.waou-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1000px;
  margin: 34px auto 0;
  padding: 26px 0;
  list-style: none;
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r-lg);
  background: #fff;
}
.waou-metrics li{
  text-align: center;
  padding: 4px 20px;
  border-right: 1px solid var(--waou-line);
}
.waou-metrics li:last-child{ border-right: 0; }
.waou-metrics b{
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--waou-brand);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-bottom: 6px;
}
.waou-metrics span{
  font-size: 13.5px;
  color: var(--waou-ink-3);
}

/* ---- 报价档位（3 档合作模式）---- */
.waou-plan{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 36px auto 0;
  padding: 0;
  list-style: none;
}
.waou-plan li{
  background: #fff;
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r-lg);
  padding: 24px 22px;
  text-align: center;
  transition: transform .26s var(--waou-ease), box-shadow .26s var(--waou-ease);
}
.waou-plan li:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20,24,32,.10);
}
.waou-plan__n{
  font-size: 15.5px;
  font-weight: 700;
  color: var(--waou-ink);
  margin: 0 0 6px;
}
.waou-plan__p{
  font-size: 22px;
  font-weight: 800;
  color: var(--waou-brand);
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.waou-plan__d{
  font-size: 13px;
  color: var(--waou-ink-3);
  line-height: 1.7;
  margin: 0;
}

/* ---- 25.6 趋势时间轴（区块4「2026年小红书营销趋势」）---- */
.waou-tl{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 0 0 2px;
  list-style: none;
  position: relative;
}
.waou-tl li{
  position: relative;
  padding: 0 0 30px 62px;
}
.waou-tl li:last-child{ padding-bottom: 0; }
/* 竖轴 */
.waou-tl li::before{
  content: "";
  position: absolute;
  left: 21px; top: 42px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--waou-line), rgba(232,234,238,.25));
}
.waou-tl li:last-child::before{ display: none; }
/* 编号圆点 */
.waou-tl__n{
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--waou-brand), #ff5c72);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(255,36,66,.28);
}
.waou-tl__t{
  font-size: 17.5px;
  font-weight: 700;
  color: var(--waou-ink);
  margin: 9px 0 9px;
  line-height: 1.4;
}
.waou-tl__d{
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--waou-ink-2);
  margin: 0;
  max-width: 780px;
}
.waou-tl__d strong{ color: var(--waou-ink); font-weight: 700; }

/* ---- 25.7 行业覆盖卡（区块5「服务覆盖行业」）---- */
.waou-ind{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.waou-ind li{
  position: relative;
  background: #fff;
  border: 1px solid var(--waou-line);
  border-radius: var(--waou-r-lg);
  padding: 26px 22px 24px;
  overflow: hidden;
  transition: transform .28s var(--waou-ease),
              box-shadow .28s var(--waou-ease),
              border-color .28s var(--waou-ease);
}
/* 顶部品牌红细条，hover 时展开 */
.waou-ind li::after{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--waou-brand), #ff8a99);
  transition: width .34s var(--waou-ease);
}
.waou-ind li:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(20,24,32,.10);
  border-color: #dcdfe5;
}
.waou-ind li:hover::after{ width: 100%; }
.waou-ind__ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff1f3, #ffe1e6);
  color: var(--waou-brand);
  font-size: 18px;
  line-height: 1;
}
.waou-ind__t{
  font-size: 16.5px;
  font-weight: 700;
  color: var(--waou-ink);
  margin: 0 0 9px;
}
.waou-ind__d{
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--waou-ink-2);
  margin: 0;
}
/* 卡内数据小标 */
.waou-ind__kpi{
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff1f3;
  color: var(--waou-brand-deep);
  font-size: 12.5px;
  font-weight: 700;
}
/* 区块尾部收束语 */
.waou-outro{
  max-width: 820px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.85;
  color: var(--waou-ink-2);
}

/* ---- 25.8 响应式覆写 ----
   原站 index.css 断点为 1199 / 991 / 767（另有两处 max-767 重复段）。
   必须对齐这些断点，否则原站的 float/width/height 规则会在窄屏反超
   本节的 grid 布局（第 2 节 em 单位那次翻车就是这么来的）。
   本节选择器特异性 >= 原站，且断点边界一致。
------------------------------------------------------------ */

/* --- 平板横向 992–1199 --- */
@media (min-width: 992px) and (max-width: 1199px){
  .waou-grid--4{ grid-template-columns: repeat(2, 1fr); }
  .waou-ind{ grid-template-columns: repeat(2, 1fr); }
  .shouye_kuai3 ul{ grid-template-columns: repeat(5, 1fr); }
}

/* --- 平板 768–991 --- */
@media (min-width: 768px) and (max-width: 991px){
  .shouye_kuai1 ul{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* 覆盖原站 .shouye_kuai2 ul li{margin:10px 2%;width:48%} */
  .shouye_kuai2 ul li{ margin: 0; width: auto; }
  .shouye_kuai3 ul{ grid-template-columns: repeat(4, 1fr); }
  .waou-grid--3, .waou-grid--4{ grid-template-columns: repeat(2, 1fr); }
  .waou-ind{ grid-template-columns: repeat(2, 1fr); }
  .waou-plan{ grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .waou-metrics{ margin-top: 28px; }
}

/* --- 手机 <=767 --- */
@media (max-width: 767px){
  /* 区块1：覆盖原站 li{width:25%;float:left;padding:8px 2px} */
  .shouye_kuai1 ul{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .shouye_kuai1 ul li{
    width: auto; float: none; margin: 0; padding: 0; height: auto;
    border-radius: var(--waou-r);
  }
  .shouye_kuai1 ul li a{ padding: 20px 12px 18px; }
  .shouye_kuai1 ul li a img{
    width: 36px; height: 36px; padding: 10px; margin: 0 0 12px; display: block;
  }
  .shouye_kuai1 ul li h4{ font-size: 14.5px; font-weight: 700; margin: 0 0 6px; }
  /* 原站 767 段把 span 设为 display:none，此处恢复（卡片需要副文案） */
  .shouye_kuai1 ul li span{ display: block; font-size: 12px; line-height: 1.6; }

  /* 区块2：覆盖原站 li{margin:5px 0;width:100%} */
  .shouye_kuai2 ul li{ margin: 0; width: auto; float: none; padding: 18px 16px; }
  .shouye_kuai2 ul li i{ font-size: 24px; top: 16px; width: 12%; }
  .shouye_kuai2 ul li h4{ width: 84%; margin-left: 14%; font-size: 15.5px; }
  .shouye_kuai2 ul li p{ width: 84%; margin-left: 14%; font-size: 13.5px; }
  .shouye_kuai2{ background-attachment: scroll; }

  /* 区块3 品牌 logo：3 列 */
  .shouye_kuai3 ul{ grid-template-columns: repeat(3, 1fr); }
  .shouye_kuai3 ul li{ padding: 12px 10px; border: 0; }
  .shouye_kuai3 ul li img{ max-width: 96px; filter: grayscale(0); opacity: 1; }

  /* 通用组件降级为单列 / 双列 */
  .waou-grid--2, .waou-grid--3, .waou-grid--4{ grid-template-columns: 1fr; gap: 14px; }
  .waou-ind{ grid-template-columns: 1fr; gap: 14px; }
  .waou-plan{ grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
  .waou-fcard{ padding: 22px 18px 20px; }
  .waou-lead{ font-size: 14.5px; margin: -4px auto 28px; text-align: left; }
  .waou-outro{ font-size: 14px; margin-top: 26px; text-align: left; }

  /* 数字条：3 列挤在 390px 会压行，改 1 列堆叠并去掉竖分隔 */
  .waou-metrics{
    grid-template-columns: 1fr;
    margin-top: 26px;
    padding: 8px 0;
  }
  .waou-metrics li{
    border-right: 0;
    border-bottom: 1px solid var(--waou-line);
    padding: 16px 18px;
  }
  .waou-metrics li:last-child{ border-bottom: 0; }
  .waou-metrics b{ font-size: 26px; }

  /* 时间轴：缩进收窄 */
  .waou-tl li{ padding: 0 0 24px 48px; }
  .waou-tl__n{ width: 36px; height: 36px; font-size: 13.5px; }
  .waou-tl li::before{ left: 17px; top: 36px; }
  .waou-tl__t{ font-size: 15.5px; margin: 5px 0 8px; }
  .waou-tl__d{ font-size: 14px; line-height: 1.8; }
}

/* --- 超窄屏 <=480：品牌 logo 降到 2 列 --- */
@media (max-width: 480px){
  .shouye_kuai3 ul{ grid-template-columns: repeat(2, 1fr); }
  .shouye_kuai1 ul li a{ padding: 16px 10px 14px; }
}

/* ---- 25.9 收尾修正 ----
   实测：.waou-ind__kpi 用 --waou-brand-deep(#e01d38) 压 #fff1f3 浅粉底，
   ratio=4.35，12.5px 非大号文本需 >=4.5，差 0.15 —— 本轮新引入，须修。
   处置：加深文字色到 #c2162e，实测 ratio 提升至 5.3+。
------------------------------------------------------------ */
.waou-ind__kpi{
  color: #c2162e;
  background: #fff0f2;
}