/* ══════════════════════════════════════════════════════════════
   V声剧社 · 频道落地页   /  ->  myapp/view/default/home.html
   前缀 hm-，与后台样式表互不干扰

   2026.08.29：原本整段内联在 home.html 的 <style> 里，
   现在抽成独立文件，改样式不用再翻 700 行模板。
   引用方式见 home.html 头部，带 ?v={CSS_VERSION}。
   ══════════════════════════════════════════════════════════════ */

.hm{
  --red:#D92B3C; --red-d:#AE1A2B; --red-l:#F2545F; --red-s:#FDECEE; --red-s2:#FBDCE0;
  --ink:#1A1512; --ink-2:#5A4F49; --ink-3:#8F827A; --ink-4:#BFB3AB;
  --paper:#FDF8F5; --paper-2:#F8EFE9;
  --line:#EFE3DC; --line-2:#F6EEE9;
  --green:#0E7A57; --green-s:#E3F5EE;
  --gold:#C8912A;
  --tl:#14B8A6;                       /* 引用「V声主播」频道色 */
  --or:#FF6A2B;                       /* 引用「V声邀约」频道色 */
  --grad:linear-gradient(102deg,#E8434F 0%,#D92B3C 48%,#A9152B 100%);
  --grad-d:linear-gradient(102deg,#D92B3C 0%,#B81C2D 48%,#8C0F22 100%);
  --sh-s:0 2px 8px rgba(90,40,30,.06);
  --sh:0 10px 30px rgba(90,40,30,.10);
  --sh-l:0 22px 54px rgba(90,40,30,.18);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:#fff; font-size:15px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
.hm *,.hm *::before,.hm *::after{box-sizing:border-box}
.hm a{color:inherit;text-decoration:none}
.hm-w{max-width:1180px;margin:0 auto;padding:0 30px}
html{scroll-behavior:smooth}
body{margin:0}
@media (prefers-reduced-motion:reduce){.hm *{animation:none!important;transition:none!important}}
/* 滚出视野的动画一律暂停（由页面底部的 IntersectionObserver 挂 class）。
   合成器不会因为元素看不见就自动停手，得显式告诉它。 */
.hm-run.is-paused{animation-play-state:paused}
.hm-panel.is-paused .lv i{animation-play-state:paused}

/* 幕布褶皱：签名纹理。

   只用在饱和色上 —— 现在全站就是各区块标题底下那条红色小分隔条。
   曾经做过一版浅底变体铺在首屏、账单卡和 CTA 上，把黑线换成淡红线，
   但在浅色上它已经不像幕布褶皱了，就是一片竖条纹，反而更脏。撤掉了。
   浅底区块的层次靠留白、描边和淡色晕来分，不靠纹理。 */
.hm-curtain{
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
    rgba(255,255,255,.05) 1px, rgba(255,255,255,.05) 3px,
    transparent 3px, transparent 26px,
    rgba(0,0,0,.10) 26px, rgba(0,0,0,.10) 27px,
    transparent 27px, transparent 52px);
}

/* ===== 公告条 ===== */
.hm-note{background:var(--red-s);border-bottom:1px solid var(--red-s2);color:var(--ink-2);font-size:13.5px}
.hm-note .hm-w{min-height:40px;display:flex;align-items:center;gap:11px;padding-top:6px;padding-bottom:6px}
.hm-note .tg{background:var(--grad);color:#fff;border-radius:5px;padding:2px 9px;font-size:11.5px;font-weight:700;letter-spacing:.5px;flex:none}
.hm-note__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-note .mo{flex:none;color:var(--red-d);font-weight:600}
.hm-note .mo:hover{color:#8C0F22}

/* ===== 导航 ===== */
.hm-nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hm-nav .hm-w{height:68px;display:flex;align-items:center}
.hm-logo{display:flex;align-items:center;gap:10px;margin-right:34px}
.hm-logo .mk{width:34px;height:34px;display:grid;place-items:center;flex:none;filter:drop-shadow(0 5px 12px rgba(217,43,60,.34))}
.hm-logo .nm{font-size:19px;font-weight:800;letter-spacing:1px}
.hm-logo .nm em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-menu{display:flex;height:100%}
.hm-menu a{position:relative;display:flex;align-items:center;padding:0 17px;font-size:15px;color:var(--ink-2);white-space:nowrap;transition:color .16s}
.hm-menu a::after{content:"";position:absolute;left:50%;bottom:18px;width:0;height:2.5px;border-radius:2px;background:var(--grad);transform:translateX(-50%);transition:width .22s}
.hm-menu a:hover{color:var(--ink)}
.hm-menu a:hover::after{width:20px}
.hm-navr{margin-left:auto;display:flex;align-items:center;gap:14px}
.hm-navr .lg{font-size:15px;color:var(--ink-2)}
.hm-navr .lg:hover{color:var(--red)}
.hm .hm-pill{height:40px;padding:0 22px;border-radius:8px;display:inline-flex;align-items:center;font-size:15px;font-weight:600;background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(217,43,60,.30);transition:.18s;white-space:nowrap}
.hm .hm-pill:hover{background:var(--grad-d);box-shadow:0 9px 22px rgba(217,43,60,.42);transform:translateY(-1px)}

/* 频道切换器：四站互跳属于导航层的事，不占正文版面。
   与 V声主播 / V声邀约 两站用的是同一套结构，只是前缀和高亮位置不同。 */
.hm-switch{position:relative;flex:none}
.hm-switch-btn{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border:0;
  border-radius:9px;background:none;cursor:pointer;font:inherit;font-size:14.5px;color:var(--ink-3);transition:.16s}
.hm-switch-btn:hover{color:var(--ink);background:var(--paper-2)}
.hm-switch-btn i{font-size:17px}
.hm-switch-btn .ar{font-size:16px;transition:transform .2s}
.hm-switch.is-open .hm-switch-btn{color:var(--red-d);background:var(--red-s)}
.hm-switch.is-open .hm-switch-btn .ar{transform:rotate(180deg)}
.hm-switch-pop{position:absolute;right:0;top:calc(100% + 12px);width:286px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-l);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:70}
.hm-switch.is-open .hm-switch-pop{opacity:1;visibility:visible;transform:translateY(0)}
.hm-switch-pop .hd{padding:8px 12px 10px;font-size:11.5px;font-weight:800;letter-spacing:1.5px;color:var(--ink-4)}
.hm-switch-pop .it{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;transition:background .16s;--c:var(--ink-3)}
.hm-switch-pop a.it:hover{background:var(--paper)}
.hm-switch-pop .dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none;margin-top:6px}
.hm-switch-pop .tx{flex:1;min-width:0}
.hm-switch-pop .tx b{display:block;font-size:14.5px;font-weight:700;line-height:1.5}
.hm-switch-pop .tx em{display:block;font-style:normal;font-size:12px;line-height:1.6;color:var(--ink-4)}
.hm-switch-pop .cur{flex:none;align-self:center;font-size:11px;font-weight:700;color:var(--red-d);
  background:var(--red-s2);border-radius:5px;padding:2px 7px}
.hm-switch-pop .c-main{--c:#BFB3AB}
.hm-switch-pop .c-zb{--c:var(--tl)}
.hm-switch-pop .c-mcn{--c:var(--red)}
.hm-switch-pop .c-v{--c:var(--or)}
.hm-switch-pop .is-cur{background:var(--red-s)}
.hm-switch-pop .is-cur .tx b{color:var(--red-d)}

/* ===== Hero =====
   原来是近黑底。整页只有这一块和结尾两块压得极暗，翻下来很沉。
   改成暖纸底 + 三层淡红晕：亮、通透，标题用墨色照样立得住。

   舞台红比活力橙重得多，整屏铺红会吵，所以剧社不学邀约那样做彩色首屏，
   而是把红留给结尾的 CTA 一块，收束感照样有。

   晕开的色块用静态 radial-gradient 直接画在容器背景上，
   只在首绘算一次；原来那种 blur 元素做位移动画的写法会一直吃 GPU。 */
.hm-hero{position:relative;overflow:hidden;color:var(--ink);
  background:
    radial-gradient(46% 62% at 6% -8%,   #FBDCE0 0%, rgba(251,220,224,0) 60%),
    radial-gradient(42% 56% at 97% 104%, #FFE7DA 0%, rgba(255,231,218,0) 60%),
    radial-gradient(30% 38% at 54% 46%,  #FDECEE 0%, rgba(253,236,238,0) 62%),
    var(--paper)}
.hm-hero .hm-w{position:relative;z-index:3;padding:70px 30px 76px;display:grid;grid-template-columns:1fr 452px;gap:52px;align-items:center}
.hm-kick{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:30px;padding:7px 18px 7px 8px;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:24px;box-shadow:0 4px 12px rgba(90,40,30,.07)}
.hm-kick i{width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:11px}
.hm h1{margin:0 0 10px;font-size:48px;line-height:1.26;font-weight:800;letter-spacing:1.5px;color:var(--ink)}
.hm h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-sub{font-size:12.5px;letter-spacing:5px;color:var(--ink-4);margin:0 0 24px;font-weight:700}
.hm-lead{margin:0 0 30px;font-size:16.5px;line-height:2;color:var(--ink-2);max-width:500px}
.hm-lead b{color:var(--ink);font-weight:700}
.hm-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hm .hm-btn{height:52px;padding:0 30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:16.5px;font-weight:600;transition:.18s}
.hm-btn.g{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(217,43,60,.4)}
.hm-btn.g:hover{background:var(--grad-d);transform:translateY(-2px);box-shadow:0 15px 34px rgba(217,43,60,.5)}
.hm-btn.o{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(90,40,30,.08)}
.hm-btn.o:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(90,40,30,.12)}
.hm-btn.r{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(217,43,60,.32)}
.hm-btn.r:hover{background:var(--grad-d);transform:translateY(-2px)}
.hm-mini{font-size:13.5px;color:var(--ink-3)}
.hm-mini a{color:var(--red-d);font-weight:700}
.hm-mini a:hover{color:#8C0F22}

/* Hero 右侧：一条线。
   跟着 Hero 一起从「深底上的半透明玻璃」改成白卡，
   顺手去掉 backdrop-filter —— 在亮底上它既没效果又白占一层合成。 */
.hm-panel{background:#fff;border-radius:16px;padding:22px;box-shadow:var(--sh-l)}
.hm-ph{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.hm-ph .lv{display:inline-flex;align-items:center;gap:6px;background:var(--red-s2);color:var(--red-d);font-size:11px;font-weight:800;border-radius:20px;padding:4px 10px;letter-spacing:.6px}
.hm-ph .lv i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:hmb 1.7s infinite}
@keyframes hmb{0%,100%{opacity:1}50%{opacity:.25}}
.hm-ph .tt{font-size:14.5px;font-weight:700;letter-spacing:.5px;color:var(--ink-2)}
.hm-ph .nn{margin-left:auto;font-size:12px;color:var(--ink-4)}
.hm-wave{display:flex;align-items:flex-end;gap:2.5px;height:36px;margin-bottom:16px}
.hm-wave i{flex:1;border-radius:1.5px;background:var(--paper-2)}
.hm-wave i.on{background:linear-gradient(180deg,#F2545F,#A9152B)}
.hm-step{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:9px;transition:background .16s}
.hm-step + .hm-step{margin-top:2px}
.hm-step:hover{background:var(--paper)}
.hm-step.cur{background:var(--red-s);box-shadow:inset 2px 0 0 var(--red)}
.hm-step .no{width:27px;height:27px;border-radius:7px;background:var(--paper-2);color:var(--ink-3);display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}
.hm-step.cur .no{background:var(--grad);color:#fff}
.hm-step b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.hm-step span{display:block;font-size:12px;line-height:1.6;color:var(--ink-3)}
.hm-step .dr{margin-left:auto;font-size:11.5px;color:var(--ink-4);flex:none}

/* ===== 题材条 ===== */
.hm-tags{background:var(--paper);border-bottom:1px solid var(--line)}
.hm-tags .hm-w{padding:15px 30px;display:flex;align-items:center;gap:16px}
.hm-tags .lb{flex:none;font-size:13px;color:var(--ink-3);font-weight:600;letter-spacing:1.5px}
/* 两端淡出原本用 mask-image，但被遮罩的容器里正好有个一直在动的元素，
   于是每帧都要连着遮罩重新合成。改成两侧各盖一层渐变，静态绘制一次即可。 */
.hm-tags .bx{position:relative;overflow:hidden;flex:1;min-width:0}
.hm-tags .bx::before,.hm-tags .bx::after{content:"";position:absolute;top:0;bottom:0;width:52px;z-index:2;pointer-events:none}
.hm-tags .bx::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(253,248,245,0))}
.hm-tags .bx::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(253,248,245,0))}
.hm-run{display:flex;gap:9px;width:max-content;animation:hmrun 40s linear infinite}
.hm-tags:hover .hm-run{animation-play-state:paused}
@keyframes hmrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hm-run span{font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px;white-space:nowrap}
.hm-run span.p{background:var(--red-s);border-color:var(--red-s2);color:var(--red-d);font-weight:600}

/* ===== 区块 ===== */
.hm-sec{padding:74px 0}
.hm-sec.tint{background:var(--paper)}
.hm-sh{text-align:center;max-width:740px;margin:0 auto 44px}
.hm-sh .eb{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:3px;color:var(--red-d);margin-bottom:14px}
.hm-sh .eb::before,.hm-sh .eb::after{content:"";width:20px;height:1.5px;background:linear-gradient(90deg,transparent,var(--red))}
.hm-sh .eb::after{background:linear-gradient(90deg,var(--red),transparent)}
.hm-sh h2{margin:0 0 14px;font-size:35px;font-weight:800;letter-spacing:2px}
.hm-sh .cur{width:64px;height:8px;margin:0 auto 16px;border-radius:2px;background:var(--red);opacity:.85}
.hm-sh p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:2}
.hm-sh p b{color:var(--ink);font-weight:600}

/* ===== 能力卡 ===== */
.hm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hm-cd{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 26px 26px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.hm-cd::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .26s}
.hm-cd:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--red-s2)}
.hm-cd:hover::after{transform:scaleX(1)}
.hm-cd .ic{width:50px;height:50px;border-radius:14px;background:var(--red-s);color:var(--red);display:grid;place-items:center;margin-bottom:18px;font-size:23px;transition:.22s}
.hm-cd:hover .ic{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(217,43,60,.3)}
.hm-cd .idx{position:absolute;right:22px;top:20px;font-size:13px;font-weight:800;color:var(--line);letter-spacing:1px}
.hm-cd h3{margin:0 0 10px;font-size:18.5px;font-weight:700;letter-spacing:.6px}
.hm-cd p{margin:0;font-size:14.5px;line-height:1.95;color:var(--ink-2)}
.hm-cd p em{font-style:normal;color:var(--ink-3)}

.hm-bound{margin-top:20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:20px 24px;display:flex;gap:15px;align-items:flex-start}
.hm-bound .bi{width:34px;height:34px;border-radius:10px;background:var(--red-s);color:var(--red);display:grid;place-items:center;flex:none;font-size:18px}
.hm-bound b{display:block;font-size:15.5px;font-weight:700;margin-bottom:5px}
.hm-bound p{margin:0;font-size:14.5px;line-height:1.95;color:var(--ink-2)}

/* ===== 入驻四步 ===== */
.hm-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hm-flow::before{content:"";position:absolute;left:12%;right:12%;top:54px;height:1px;background:repeating-linear-gradient(90deg,var(--ink-4) 0 6px,transparent 6px 13px)}
.hm-fs{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 22px 24px;text-align:center;transition:.2s}
.hm-fs:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--red-s2)}
.hm-fs .no{width:54px;height:54px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:19px;font-weight:800;color:#fff;background:var(--grad);position:relative;z-index:2;box-shadow:0 0 0 6px var(--paper),0 8px 18px rgba(217,43,60,.28)}
.hm-sec:not(.tint) .hm-fs .no{box-shadow:0 0 0 6px #fff,0 8px 18px rgba(217,43,60,.28)}
.hm-fs h4{margin:0 0 11px;font-size:18px;font-weight:700;letter-spacing:.6px}
.hm-fs p{margin:0 0 14px;font-size:14px;line-height:1.95;color:var(--ink-2);text-align:left}
.hm-fs p b{color:var(--ink);font-weight:600}
.hm-chip{display:inline-block;font-size:12.5px;color:var(--ink-2);background:var(--paper-2);border-radius:5px;padding:4px 10px;margin:0 5px 5px 0;line-height:1.6}
.hm-chip b{color:var(--ink);font-weight:600}
.hm-chip.w{background:var(--red-s);color:var(--red-d)}
.hm-chip.w b{color:var(--red-d)}

/* ===== 等级 ===== */
.hm-rate{max-width:620px;margin:0 auto 30px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;display:flex;align-items:center;gap:20px;box-shadow:var(--sh-s)}
.hm-rate .big{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
.hm-rate .big small{font-size:20px;font-weight:700}
.hm-rate .tx b{display:block;font-size:16px;font-weight:700;margin-bottom:3px}
.hm-rate .tx span{display:block;font-size:14px;line-height:1.85;color:var(--ink-2)}

.hm-lvs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.hm-lv{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 26px 26px;transition:.2s;display:flex;flex-direction:column}
.hm-lv:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.hm-lv.is-hi{border-color:var(--red);box-shadow:0 16px 42px rgba(217,43,60,.16)}
.hm-lv .rec{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:12px;font-weight:700;border-radius:20px;padding:5px 15px;box-shadow:0 6px 15px rgba(217,43,60,.36);white-space:nowrap}
.hm-lv .hd{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.hm-lv .hd .lb{font-size:11.5px;font-weight:700;letter-spacing:2.5px;color:var(--ink-4)}
.hm-lv .hd .lvn{font-size:32px;font-weight:800;letter-spacing:-.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-lv .dl{min-height:24px;margin:0 0 20px;font-size:12.5px;font-weight:700;color:var(--red)}
.hm-lv .dl:empty::before{content:"起步档，先把班底跑起来";color:var(--ink-3);font-weight:400}
.hm-rt{list-style:none;margin:0 0 22px;padding:0;flex:1}
.hm-rt li{padding:14px 0;border-bottom:1px dashed var(--line)}
.hm-rt li:last-child{border-bottom:0}
.hm-rt .k{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:4px;letter-spacing:.5px}
.hm-rt .v{display:block;font-size:22px;font-weight:800;letter-spacing:.3px;color:var(--ink);line-height:1.3}
.hm-rt .v small{font-size:13px;font-weight:600;color:var(--ink-2);margin-left:3px}
.hm-rt .v.txt{font-size:15px;font-weight:600;line-height:1.75}
.hm-lv .go{height:46px;border-radius:8px;display:grid;place-items:center;font-size:15px;font-weight:600;transition:.18s}
.hm-lv .go.is-solid{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(217,43,60,.3)}
.hm-lv .go.is-solid:hover{background:var(--grad-d);transform:translateY(-1px)}
.hm-lv .go.is-line{border:1px solid var(--line);color:var(--ink-2)}
.hm-lv .go.is-line:hover{border-color:var(--red);color:var(--red);background:var(--red-s)}
.hm-lvnote{margin-top:22px;text-align:center;font-size:14px;color:var(--ink-2);line-height:2}
.hm-lvnote .pr{color:var(--gold);font-weight:700}

/* ===== 收益 ===== */
.hm-mg{display:grid;grid-template-columns:1.06fr 1fr;gap:18px;align-items:stretch}
.hm-pn{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px}
.hm-pn h3{margin:0 0 6px;font-size:19.5px;font-weight:700;letter-spacing:.6px}
.hm-pn .ps{margin:0 0 22px;font-size:14px;color:var(--ink-3)}
.hm-src{list-style:none;margin:0;padding:0}
.hm-src li{display:flex;gap:14px;padding:17px 0;border-bottom:1px dashed var(--line);align-items:flex-start}
.hm-src li:last-child{border-bottom:0;padding-bottom:0}
.hm-src .tg{flex:none;font-size:12.5px;font-weight:700;border-radius:5px;padding:5px 11px;margin-top:2px;min-width:74px;text-align:center;background:var(--red-s);color:var(--red-d)}
.hm-src li:nth-child(2) .tg{background:var(--green-s);color:var(--green)}
.hm-src b{display:block;font-size:15.5px;font-weight:600;margin-bottom:4px}
.hm-src span{display:block;font-size:14px;line-height:1.9;color:var(--ink-2)}
.hm-ex{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.hm-ex em{font-style:normal;font-size:12.5px;background:var(--paper-2);border-radius:5px;padding:4px 11px;color:var(--ink-2)}
.hm-ex em.soon{background:#fff;border:1px dashed var(--line);color:var(--ink-3)}
/* 账单卡：由近黑改成淡红纸卡，与左边的白卡拉开层次但不压暗整块 */
.hm-bl{background:var(--red-s);border:1px solid var(--red-s2);border-radius:14px;padding:30px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.hm-bl>*{position:relative;z-index:2}
.hm-bl h3{margin:0 0 6px;font-size:19.5px;font-weight:700;letter-spacing:.6px;color:var(--ink)}
.hm-bl .ps{margin:0 0 22px;font-size:14px;color:var(--ink-3)}
.hm-br{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid var(--red-s2);font-size:15px}
.hm-br:last-of-type{border-bottom:0}
.hm-br .lb{color:var(--ink-2)}
.hm-br .st{font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;background:var(--green-s);color:var(--green)}
.hm-br .m{margin-left:auto;color:var(--ink-4);font-size:13.5px}
.hm-bn{margin:auto 0 0;padding-top:20px;font-size:12.5px;line-height:1.9;color:var(--ink-4)}

/* ===== FAQ ===== */
.hm-faq{max-width:880px;margin:0 auto}
.hm-qa{background:#fff;border:1px solid var(--line);border-radius:11px;margin-bottom:10px;transition:.18s;overflow:hidden}
.hm-qa[open]{border-color:var(--red-s2);box-shadow:var(--sh-s)}
.hm-qa summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;position:relative;font-size:16.5px;font-weight:600;letter-spacing:.4px}
.hm-qa summary::-webkit-details-marker{display:none}
.hm-qa summary .q{display:inline-block;width:22px;height:22px;border-radius:4px;background:var(--red-s);color:var(--red-d);font-size:12px;font-weight:800;text-align:center;line-height:22px;margin-right:11px;vertical-align:2px}
.hm-qa summary::after{content:"\002B";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--ink-4);font-size:17px}
.hm-qa[open] summary::after{content:"\2212";color:var(--red)}
.hm-qa[open] summary .q{background:var(--grad);color:#fff}
.hm-qa .a{padding:0 22px 22px 55px;font-size:14.5px;line-height:2;color:var(--ink-2)}
.hm-qa .a b{color:var(--ink);font-weight:600}

/* ===== CTA =====
   先前试过整块铺红渐变，但舞台红的暗端 #A9152B 压得太重，
   放在页尾等于又砸下一块深色，跟整页调亮的方向相反。

   改成淡红晕底 + 墨色标题，收尾的分量交给那颗红按钮去扛：
   一小块高饱和的红比一整条深红更抓眼，页面也不会在最后闷下来。
   上边框把这一段和前面的白色区块分开，不至于糊成一片。 */
.hm-cta{position:relative;overflow:hidden;color:var(--ink);border-top:1px solid var(--red-s2);
  background:
    radial-gradient(52% 74% at 10% 0%,   #FFE0E4 0%, rgba(255,224,228,0) 62%),
    radial-gradient(46% 66% at 90% 100%, #FFEADC 0%, rgba(255,234,220,0) 62%),
    var(--red-s)}
.hm-cta .hm-w{position:relative;z-index:3;padding:62px 30px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hm-cta h2{margin:0 0 14px;font-size:34px;font-weight:800;letter-spacing:2px;color:var(--ink)}
.hm-cta p{margin:0 0 28px;font-size:16px;color:var(--ink-2);line-height:2;max-width:520px}
.hm-qr{background:#fff;border:1px solid var(--red-s2);border-radius:14px;padding:16px;text-align:center;width:182px;flex:none;box-shadow:0 12px 28px rgba(90,40,30,.10)}
.hm-qr img {
  width: 152px;
  height: 152px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}
.hm-qr .bx{width:150px;height:150px;background:var(--paper);border-radius:8px;display:grid;place-items:center;color:var(--ink-3);font-size:12.5px;margin-bottom:9px}
.hm-qr .cp{font-size:13px;color:var(--ink-2);font-weight:600}

/* ===== 页脚 =====
   改成分栏式。同族站点的链接放页脚是所有网站的惯例，
   找不到路的人也会往页尾翻，比在 CTA 后面另起一块自然得多。 */
.hm-foot{background:var(--paper);border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px}
.hm-foot-main{padding:44px 30px 36px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.hm-foot-brand .lg{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hm-foot-brand .lg svg{display:block;flex:none;filter:drop-shadow(0 5px 12px rgba(217,43,60,.28))}
.hm-foot-brand .lg b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.hm-foot-brand p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-3);max-width:300px}

.hm-foot-col{display:flex;flex-direction:column;align-items:flex-start}
.hm-foot-col .ct{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:14px;letter-spacing:.5px}
.hm-foot-col a,.hm-foot-col .is-cur{display:flex;align-items:baseline;gap:7px;padding:5px 0;color:var(--ink-3);line-height:1.7;transition:color .16s}
.hm-foot-col a:hover{color:var(--red-d)}

/* 频道那一列多带一个色点和一句话说明，一眼看出各站给谁用 */
.hm-foot-chn a,.hm-foot-chn .is-cur{--c:var(--ink-4)}
.hm-foot-chn i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;align-self:center}
.hm-foot-chn em{font-style:normal;font-size:12px;color:var(--ink-4)}
.hm-foot-chn .c-main{--c:#BFB3AB}
.hm-foot-chn .c-zb{--c:var(--tl)}
.hm-foot-chn .c-mcn{--c:var(--red)}
.hm-foot-chn .c-v{--c:var(--or)}
.hm-foot-chn .is-cur{color:var(--red-d);font-weight:700}
.hm-foot-chn .is-cur em{color:var(--red-d);font-weight:400}

.hm-foot-bar{border-top:1px solid var(--line)}
.hm-foot-bar .hm-w{padding:18px 30px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;
  text-align:center;font-size:13px;color:var(--ink-4)}
.hm-foot-bar a{color:var(--ink-4)}
.hm-foot-bar a:hover{color:var(--red-d)}

@media (max-width:1180px){.hm-menu a{padding:0 12px;font-size:14.5px}}
@media (max-width:1060px){
  .hm-hero .hm-w{grid-template-columns:1fr;gap:38px;padding:52px 30px 58px}
  .hm-cards,.hm-lvs{grid-template-columns:1fr 1fr}
  .hm-flow{grid-template-columns:1fr 1fr}
  .hm-flow::before{display:none}
  .hm-mg{grid-template-columns:1fr}
  .hm-cta .hm-w{grid-template-columns:1fr}
  .hm-menu{display:none}
  .hm-foot-main{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:680px){
  .hm-w{padding:0 18px}
  .hm h1{font-size:31px}
  .hm-hero .hm-w{padding:42px 18px 46px}
  .hm-sec{padding:52px 0}
  .hm-sh h2{font-size:26px}
  .hm-cards,.hm-flow,.hm-lvs{grid-template-columns:1fr}
  .hm-note .mo{display:none}
  .hm-rate{flex-direction:column;text-align:center;gap:12px}
  .hm-btn{width:100%}
  .hm-btns{flex-direction:column;align-items:stretch}
  .hm-foot-main{grid-template-columns:1fr;gap:26px;padding:32px 18px 28px}
  .hm-switch-btn .tx{display:none}
  .hm-switch-pop{width:min(286px,calc(100vw - 36px))}
}