@charset "utf-8";
/* 樱花漫画 · yhmhgw.org.cn
   视觉方向：粉彩少女（浅粉/浅紫底 + 奶白/薄荷点缀）
   装饰机制：拱门顶部 + 波浪分隔 + 圆角散点（与前几档的点阵/斜线/市松方格错开） */

:root{
  --bg:#FFF2F7;
  --bg-2:#FBF3FB;
  --panel:#FFFFFF;
  --panel-2:#FFFBFD;
  --ink:#3A3040;
  --ink-2:#7A6B82;
  --ink-3:#A99DAD;
  --line:#F2E4EC;
  --rose:#E4679E;
  --rose-d:#C74E86;
  --rose-l:#FFE7F1;
  --lilac:#6E5BB8;
  --lilac-l:#EDE7FB;
  --mint:#2FB89A;
  --mint-l:#E7F8F3;
  --pop:#FFCE6B;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.78 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",
       "PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
}
h1,h2,h3,h4,p,ul,ol,figure,figcaption,dl,dd,dt{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--rose-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block;border:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}

/* ── 装饰机制：拱门 / 波浪 / 散点 ───────────────────── */
.arch{border-radius:170px 170px 26px 26px}
.dots{
  background-image:radial-gradient(circle,rgba(228,103,158,.18) 2.4px,transparent 2.7px);
  background-size:24px 24px;
}
.dots-lilac{
  background-image:radial-gradient(circle,rgba(110,91,184,.15) 2.4px,transparent 2.7px);
  background-size:24px 24px;
}
.wave{display:block;width:100%;height:44px}

/* ── 头部 ─────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:30;
  background:rgba(255,242,247,.94);
  border-bottom:1px solid var(--line);
}
.hd-in{display:flex;align-items:center;gap:22px;height:72px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px;border-radius:12px;flex:none}
.brand-name{font-size:20px;font-weight:800;letter-spacing:.6px;line-height:1.2}
.brand-name .sub{display:block;font-size:11px;font-weight:400;color:var(--ink-3);letter-spacing:1.6px}
.nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end;flex-wrap:wrap}
.nav a{
  font-size:15px;color:var(--ink-2);padding:9px 13px;border-radius:999px;
  white-space:nowrap;line-height:1;
}
.nav a:hover{background:#fff;color:var(--rose-d);text-decoration:none}
.nav a.on{color:var(--rose-d);font-weight:700}
.header-cta{
  background:linear-gradient(135deg,#F58FBB,#E4679E 60%,#C74E86);
  color:#fff!important;font-weight:700;padding:11px 20px!important;
  box-shadow:0 8px 18px rgba(228,103,158,.28);
}
.header-cta::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.85);margin-left:8px;vertical-align:middle;
}

/* ── Hero ─────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:50%;top:-160px;width:760px;height:520px;
  margin-left:-380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,206,107,.28),rgba(255,206,107,0) 68%);
}
.hero::after{
  content:"";position:absolute;right:-140px;bottom:-180px;width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(110,91,184,.14),rgba(110,91,184,0) 70%);
}
.hero .hero-grid{
  position:relative;z-index:1;
  padding-top:62px;padding-bottom:66px;
  display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center;
}
.hero-grid>*{min-width:0}
.kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--rose-d);
  background:var(--rose-l);border-radius:999px;padding:7px 15px;margin-bottom:18px;
  letter-spacing:.6px;
}
.kicker b{width:7px;height:7px;border-radius:50%;background:var(--mint);display:block}
h1{
  font-size:46px;line-height:1.2;font-weight:800;letter-spacing:1.6px;
  background:linear-gradient(120deg,#4A3A52,#7A4E8C 46%,#C74E86);
  -webkit-background-clip:text;background-clip:text;color:#4A3A52;
  -webkit-text-fill-color:transparent;
}
.lead{font-size:17px;color:var(--ink-2);margin-top:18px;max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#F58FBB,#E4679E 58%,#C74E86);
  border-radius:999px;padding:15px 30px;line-height:1;
  box-shadow:0 12px 26px rgba(228,103,158,.3);
}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.9)}
.btn.ghost{
  background:#fff;color:var(--rose-d);border:1.5px solid #F6CDDE;box-shadow:none;
}
.btn.ghost::after{background:var(--mint)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-meta li{
  font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;
}
.hero-visual{display:flex;justify-content:center;align-items:flex-end;gap:20px}
.phone{
  width:206px;flex:none;border-radius:26px;background:#fff;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),0 18px 40px rgba(122,78,140,.16);
}
.phone.small{width:142px;border-radius:20px}
.phone img{width:100%;height:auto}

/* ── 弧形数据条 ───────────────────────────────────── */
.stats-outer{padding:0 0 8px}
.stats{
  background:#fff;border:1px solid var(--line);padding:34px 30px 30px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  box-shadow:0 16px 40px rgba(122,78,140,.07);
}
.stats li{text-align:center;min-width:0}
.stats b{display:block;font-size:34px;font-weight:800;color:var(--rose-d);letter-spacing:.5px}
.stats s{display:block;text-decoration:none;font-size:13px;color:var(--ink-2);margin-top:6px}

/* ── 区块通用 ─────────────────────────────────────── */
.sec{padding:62px 0}
.sec.tint{background:var(--bg-2)}
.sec.white{background:#fff}
.sec-head{max-width:780px}
.sec-head h2{font-size:31px;line-height:1.3;font-weight:800;letter-spacing:.8px}
.sec-head h2 .mark{
  display:inline-block;width:26px;height:12px;border-radius:999px;margin-right:12px;
  background:linear-gradient(90deg,var(--rose),var(--pop));vertical-align:middle;
}
.sec-head-p{font-size:15px;color:var(--ink-2);margin-top:12px}
.sec-body{margin-top:28px}

/* ── 热度榜（左侧序号 + 右侧内容的两栏单元） ───────── */
.hot{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hot li{
  display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px 20px;
  min-width:0;
}
.hot li .no{
  width:42px;height:42px;border-radius:14px;background:#F8F4FA;color:var(--ink-3);
  font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.hot li.top .no{background:var(--rose-l);color:var(--rose-d)}
.hot li .tx{min-width:0}
.hot li .tx b{display:block;font-size:17px;font-weight:700;line-height:1.35}
.hot li .tx s{display:block;text-decoration:none;font-size:13px;color:var(--ink-2);margin-top:5px}
.hot li .ht{
  font-size:12px;font-weight:700;color:var(--rose-d);background:var(--rose-l);
  border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.hot li.cool .ht{color:#3A7F6E;background:var(--mint-l)}

/* ── 话题分区（左名右述，刻意不用三列功能卡） ─────── */
.zlist{margin-top:28px;display:grid;gap:12px}
.zlist>div{
  display:grid;grid-template-columns:186px 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;min-width:0;
}
.zlist dt{font-size:17px;font-weight:800;display:flex;align-items:center;gap:10px}
.zlist dt .tag{
  font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.tg-rose{background:var(--rose-l);color:var(--rose-d)}
.tg-lilac{background:var(--lilac-l);color:var(--lilac)}
.tg-mint{background:var(--mint-l);color:#26806C}
.tg-pop{background:#FFF3DC;color:#8A6A2E}
.zlist dd{font-size:14.5px;color:var(--ink-2);min-width:0}

/* ── 预览图栅格 ───────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.shot{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:14px 14px 12px;display:flex;flex-direction:column;align-items:center;min-width:0;
}
.shot img{width:100%;max-width:178px;border-radius:14px;height:auto}
.shot figcaption{font-size:13px;color:var(--ink-2);margin-top:10px;text-align:center}
.shot .cap-cn{font-weight:700;color:var(--ink);display:block;font-size:14px}

/* ── 评价（两条长引述，刻意不用三列卡） ───────────── */
.voices{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.voices li{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 22px;min-width:0;
}
.voices li p{font-size:15px;color:var(--ink)}
.voices li cite{
  display:flex;align-items:center;gap:10px;margin-top:16px;font-style:normal;
  font-size:13px;color:var(--ink-2);
}
.voices li cite i{
  width:10px;height:10px;border-radius:50%;background:var(--mint);flex:none;
}
.voices .stars{font-size:13px;color:var(--pop);letter-spacing:2px;margin-bottom:12px;display:block}

/* ── 动线步骤 ─────────────────────────────────────── */
.steps{counter-reset:st}
.steps>li{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:18px 20px 18px 62px;margin-bottom:12px;min-width:0;
}
.steps>li:last-child{margin-bottom:0}
.steps>li::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;
  background:var(--rose-l);color:var(--rose-d);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.steps>li b{display:block;font-size:16px;font-weight:700}
.steps>li span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:6px}

/* ── FAQ ──────────────────────────────────────────── */
.faq-list{display:grid;gap:12px}
.faq-list details{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px;
}
.faq-list summary{
  cursor:pointer;font-size:16px;font-weight:700;padding:19px 0;list-style:none;
  display:flex;align-items:center;gap:12px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--rose);flex:none;
}
.faq-list details[open] summary::before{background:var(--mint)}
.faq-list p{font-size:14.5px;color:var(--ink-2);padding-bottom:20px}

/* ── 底部下载条 ───────────────────────────────────── */
.band{
  background:linear-gradient(135deg,#FFE7F1,#EDE7FB 62%,#E7F8F3);
  padding:44px 0;
}
.band-in{
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
}
.band h2{font-size:26px;font-weight:800;letter-spacing:.6px}
.band-txt{font-size:14.5px;color:var(--ink-2);margin-top:8px}
.band .btn{justify-self:end}

/* ── 内页 ─────────────────────────────────────────── */
.page-hero{
  background:linear-gradient(160deg,#FFF6FA,#EDE7FB 74%,#E7F8F3);
  padding:44px 0 50px;position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(228,103,158,.16),rgba(228,103,158,0) 70%);
}
.crumb{font-size:13px;color:var(--ink-2);margin-bottom:14px;position:relative}
.crumb a{color:var(--ink-2)}
.page-hero h1{font-size:38px;letter-spacing:1.4px;position:relative}
.page-hero .lead{position:relative}

.prose{
  width:100%;max-width:900px;min-width:0;margin:0 auto;padding:52px 22px 66px;
}
.prose h2{
  font-size:25px;font-weight:800;line-height:1.35;letter-spacing:.6px;
  margin:44px 0 0;padding-left:16px;position:relative;
}
.prose h2::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:7px;border-radius:999px;
  background:linear-gradient(180deg,var(--rose),var(--mint));
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;font-weight:700;margin:26px 0 0}
.prose p{font-size:16px;margin-top:16px}
.prose ul{margin-top:16px}
.prose ul li{
  position:relative;padding-left:22px;font-size:16px;margin-bottom:10px;
}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:12px;width:8px;height:8px;border-radius:3px;
  background:var(--rose-l);border:1.5px solid var(--rose);
}
.prose strong{color:var(--rose-d)}
.prose .tbl-cap,.prose>p.tbl-note{
  font-size:13.5px;color:var(--ink-2);margin-top:12px;
}
.prose .tipbox{
  background:var(--mint-l);border-radius:18px;padding:20px 22px;margin-top:20px;
  font-size:15px;color:#256B5A;
}
.prose .warnbox{
  background:#FFF7E9;border-radius:18px;padding:20px 22px;margin-top:20px;
  font-size:15px;color:#8A6A2E;
}
.prose .shot{margin-top:24px;max-width:320px}
.prose .shot img{width:100%;border-radius:16px;height:auto}
.prose .shot figcaption{font-size:13px;color:var(--ink-2);margin-top:10px;text-align:center}

/* 表格：窄屏靠横滑看全 */
.tbl-scroll{overflow-x:auto;margin-top:20px;-webkit-overflow-scrolling:touch}
table.cmp{
  border-collapse:collapse;width:100%;min-width:560px;background:#fff;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
table.cmp th,table.cmp td{
  padding:13px 16px;font-size:14.5px;text-align:left;border-bottom:1px solid var(--line);
}
table.cmp th{background:#FBF3FB;font-weight:700;color:var(--ink)}
table.cmp tr:last-child td{border-bottom:0}

/* ── 页脚 ─────────────────────────────────────────── */
.ft{background:#fff;border-top:1px solid var(--line);padding:38px 0 44px}
.ft-in{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
.ft-note{font-size:13.5px;color:var(--ink-2);max-width:640px}
.ft-copy{font-size:13px;color:var(--ink-3);margin-top:12px}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ft-nav a{
  font-size:13px;color:var(--ink-2);background:#FBF3FB;border-radius:999px;padding:7px 14px;
}
.ft-dl{
  display:inline-flex;align-items:center;margin-top:14px;font-size:14px;font-weight:700;
  color:var(--rose-d);border:1.5px solid #F6CDDE;border-radius:999px;padding:9px 18px;
}

/* ── 入场动效：纯 CSS，与滚动位置无关 ───────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:rise .72s ease both}

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width:980px){
  .hero .hero-grid{grid-template-columns:1fr;gap:34px;padding-top:46px;padding-bottom:52px}
  .hero-visual{order:2}
  h1{font-size:38px}
  .page-hero h1{font-size:31px}
  .stats{grid-template-columns:repeat(2,1fr);gap:22px}
  .hot{grid-template-columns:1fr}
  .zlist>div{grid-template-columns:1fr;gap:9px}
  .voices{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr);gap:14px}
  .band-in{grid-template-columns:1fr;gap:18px}
  .band .btn{justify-self:start}
  .ft-in{grid-template-columns:1fr;gap:18px}
  .ft-nav{justify-content:flex-start}
}
@media (max-width:620px){
  .hd-in{height:auto;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;gap:8px}
  .nav{flex:1 1 100%;gap:0;justify-content:flex-start}
  .nav a{flex:0 0 33.3333%;text-align:center;padding:10px 4px;font-size:14px}
  .nav .header-cta{display:none}
  .brand-name .sub{display:none}
  h1{font-size:32px;letter-spacing:1px}
  .page-hero h1{font-size:27px}
  .sec{padding:46px 0}
  .sec-head h2{font-size:24px}
  .prose{padding:40px 22px 52px}
  .prose h2{font-size:21px}
  .hero .hero-grid{padding-top:36px;padding-bottom:42px}
  .hero-visual{gap:12px}
  .phone{width:44vw;max-width:196px}
  .phone.small{width:30vw;max-width:132px}
  .arch{border-radius:110px 110px 22px 22px}
  .stats{padding:26px 18px 22px}
  .stats b{font-size:27px}
  .hot li{grid-template-columns:42px 1fr;padding:15px 16px;gap:12px}
  .hot li .ht{grid-column:2;justify-self:start}
}