@charset "UTF-8";
/* ==========================================================================
   汗汗漫画  ·  www.hanhanmanga.com
   --------------------------------------------------------------------------
   配色档位：本品牌第 3 档
     底 浅黄绿白 #F7FBF1 ｜ 主色 草绿(偏黄绿) #6FBF2E ｜ 辅色 青碧 #12969B
     ｜ 点缀 晴蓝 #2E8FE0 ｜ 评分星 #E8A93C ｜ 页脚 深墨绿 #122415
   与同品牌前两档在四个维度上同时错开：
     档1 草青绿主 + 天青辅 + 暖橘 CTA + 浅青绿单色 Hero + 水滴 Logo
     档2 湖蓝主   + 薄荷青辅 + 薰衣草紫点缀 + 冷色深底 CTA + 三色同屏 Hero + 双页书册 Logo
     档3（本站）草绿(黄绿)主 + 青碧辅 + 晴蓝点缀 + 亮绿渐变 CTA + 两色对角 Hero(斜向条纹) + 漫画爆裂框 Logo
   App 自身界面近白底 + 品红/珊瑚红强调，站点 chrome 刻意避开该色系。
   ========================================================================== */

:root{
  --bg:#F7FBF1;
  --bg-2:#FFFFFF;
  --bg-3:#EEF7E2;
  --brand:#6FBF2E;
  --brand-d:#4A8C12;
  --brand-dd:#2E5A08;
  --brand-l:#EDF8DA;
  --teal:#12969B;
  --teal-d:#0A6E73;
  --teal-l:#DDF3F3;
  --sky:#2E8FE0;
  --sky-l:#E4F1FB;
  --amber:#E8A93C;
  --ink:#20261A;
  --ink-2:#4E5744;
  --muted:#87907C;
  --line:#E4EDD8;
  --foot:#122415;
  --foot-2:#C4D3B8;
  --cta:linear-gradient(135deg,#8ED23C,#5AA61A 54%,#37730A);
  --shadow:0 10px 30px rgba(46,90,8,.10);
  --radius:16px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.78 "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
}

img{max-width:100%;height:auto;display:block;border:0}

a{color:var(--teal-d);text-decoration:none}
a:hover{color:var(--brand-d)}

h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:800;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ── 顶部导航 ───────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:40px;height:40px;border-radius:11px}
.brand span{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.nav__links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav__links a{font-size:15px;color:var(--ink-2);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.nav__links a:hover{color:var(--brand-d)}
.nav__links a.is-on{color:var(--brand-dd);border-bottom-color:var(--brand)}

/* ── 按钮 ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:999px;border:0;cursor:pointer;
  background:var(--cta);color:#fff;font-size:16px;font-weight:700;letter-spacing:.4px;
  box-shadow:0 12px 26px rgba(55,115,10,.30);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(55,115,10,.36)}
.btn svg{width:18px;height:18px;flex:none}
.btn--sm{padding:9px 20px;font-size:14px;box-shadow:0 8px 18px rgba(55,115,10,.26);margin-left:0}
.btn--ghost{
  background:#fff;color:var(--teal-d);border:1px solid var(--teal-l);
  box-shadow:0 6px 16px rgba(18,150,155,.12);
}
.btn--ghost:hover{color:var(--teal-d);background:var(--teal-l)}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,#F6FCEC 0%,#EBF8F0 54%,#E5F4FC 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 320px at 12% 8%,rgba(111,191,46,.24),transparent 68%),
    radial-gradient(520px 340px at 88% 22%,rgba(18,150,155,.20),transparent 70%),
    radial-gradient(460px 300px at 62% 100%,rgba(46,143,224,.16),transparent 72%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(74,140,18,.13) 0 2px,transparent 2px 24px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 58%,transparent 100%);
}
.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:center;
  padding-top:70px;padding-bottom:78px;
}
.hero--sm .hero__inner{padding-top:52px;padding-bottom:60px}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--brand-dd);border:1px solid var(--brand-l);
  font-size:13px;font-weight:700;letter-spacing:.6px;
  padding:6px 15px;border-radius:999px;margin-bottom:18px;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.hero h1{font-size:42px;letter-spacing:.5px;color:#1B2A10}
.hero h1 em{font-style:normal;color:var(--brand-d)}
.hero-lead{margin-top:18px;font-size:16.5px;color:var(--ink-2);max-width:640px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.hero__meta li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}
.hero__meta svg{width:15px;height:15px;flex:none;color:var(--brand-d)}
.hero__art{display:flex;justify-content:center}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand-d)}
.crumbs span{color:var(--muted)}

/* 手机外框 */
.phone{
  width:250px;flex:none;padding:9px;border-radius:32px;background:#122415;
  box-shadow:0 0 0 1px rgba(18,36,21,.12),0 24px 48px rgba(46,90,8,.24);
}
.phone img{width:100%;height:auto;border-radius:24px}

/* ── 通用区块 ───────────────────────────────────────────── */
.sec{padding-top:74px;padding-bottom:74px}
.sec--tint{background:var(--bg-2)}
.sec--deep{background:linear-gradient(180deg,#F1F9E7,#E9F6F1)}
.sec__head{margin-bottom:36px;max-width:760px}
.h2{font-size:29px;letter-spacing:.4px}
.sub{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
.h2-bar{display:block;width:56px;height:4px;border-radius:2px;background:var(--cta);margin-bottom:16px}

/* ── 数据条 ─────────────────────────────────────────────── */
.stats{background:var(--bg-2);border-bottom:1px solid var(--line)}
.stats__list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:28px;padding-bottom:28px}
.stats__list li{display:flex;align-items:center;gap:13px}
.stats__list svg{width:26px;height:26px;flex:none;color:var(--brand-d)}
.stats__list b{display:block;font-size:19px;line-height:1.2;color:var(--ink)}
.stats__list span{font-size:13px;color:var(--muted)}

/* ── 功能卡 ─────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
}
.card__ico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-l);color:var(--brand-dd);margin-bottom:15px;
}
.card__ico svg{width:24px;height:24px}
.card h3{font-size:17.5px;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--ink-2)}

/* ── 双栏文字 ───────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start}
.split p+p{margin-top:14px}
.split p{color:var(--ink-2);font-size:15.5px}
.ticks{margin-top:20px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:28px;font-size:15px;color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:5px;
  background:var(--brand-l);border:1px solid var(--brand);
}
.ticks li b{color:var(--ink)}
.note{
  margin-top:24px;padding:18px 20px;border-radius:14px;font-size:14.5px;color:var(--teal-d);
  background:var(--teal-l);border-left:4px solid var(--teal);
}

/* ── 截图栅格 ───────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.shot{margin:0}
.shot .phone{width:100%;padding:8px;border-radius:26px}
.shot .phone img{border-radius:19px}
.shot figcaption{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.shot figcaption b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}

/* ── 内页入口卡 ─────────────────────────────────────────── */
.entries{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.entry{
  display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease;
}
.entry:hover{transform:translateY(-3px);border-color:var(--brand)}
.entry b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:8px}
.entry span{font-size:14px;color:var(--ink-2);display:block}
.entry i{
  display:inline-block;margin-top:14px;font-style:normal;font-size:13.5px;font-weight:700;color:var(--brand-d);
}
.entry i::after{content:" →"}

/* ── 评价 ───────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
}
.quote__stars{display:flex;gap:3px;color:var(--amber);margin-bottom:13px}
.quote__stars svg{width:17px;height:17px}
.quote p{font-size:14.8px;color:var(--ink-2)}
.quote__who{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--muted)}
.quote__who b{color:var(--ink)}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{display:grid;gap:14px;max-width:900px}
.faq details{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:4px 22px;
}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 0;font-size:16.5px;font-weight:700;color:var(--ink);
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:21px;color:var(--brand-d);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:8px;font-size:14.8px;color:var(--ink-2)}
.faq details p+p{padding-top:0}
.faq details p:last-child{padding-bottom:20px}
.faq__more{margin-top:24px;font-size:15px}

/* 分组式 FAQ（问题页） */
.qgroup{margin-bottom:44px}
.qgroup:last-child{margin-bottom:0}
.qgroup h2{font-size:21px;margin-bottom:14px;display:flex;align-items:center;gap:11px}
.qgroup h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}

/* ── 步骤 ───────────────────────────────────────────────── */
.steps{counter-reset:st;display:grid;gap:16px;max-width:900px}
.steps li{
  counter-increment:st;position:relative;padding:22px 24px 22px 72px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.steps li::before{
  content:counter(st);position:absolute;left:22px;top:20px;
  width:34px;height:34px;border-radius:11px;background:var(--cta);color:#fff;
  font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.steps h2{font-size:17.5px;margin-bottom:8px}
.steps b{display:block;font-size:17px;margin-bottom:7px}
.steps p{font-size:14.8px;color:var(--ink-2)}
.steps p+p{margin-top:10px}
.steps a{text-decoration:underline;text-decoration-color:var(--brand-l)}

/* ── 正文排版 ───────────────────────────────────────────── */
.prose{max-width:900px}
.prose p{color:var(--ink-2);font-size:15.5px}
.prose p+p{margin-top:15px}
.prose h2{margin-top:46px;margin-bottom:14px;font-size:23px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:28px;margin-bottom:10px;font-size:17.5px;color:var(--brand-dd)}
.prose ul{margin-top:14px;display:grid;gap:11px}
.prose ul li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.prose figure{margin:28px 0 0}
.prose .phone{width:250px}

/* ── CTA 通道 ───────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;background:linear-gradient(150deg,#E9F7D6,#E2F4F3 58%,#E4F1FB)}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(74,140,18,.10) 0 2px,transparent 2px 26px);
}
.cta__inner{position:relative;z-index:1;text-align:center;padding-top:66px;padding-bottom:70px}
.cta__inner h2{font-size:28px}
.cta__inner p{margin-top:14px;font-size:16px;color:var(--ink-2)}
.cta__inner .btn{margin-top:28px}

/* ── 页脚 ───────────────────────────────────────────────── */
.foot{background:var(--foot);color:var(--foot-2);padding-top:56px}
.foot__inner{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:38px}
.foot__brand{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot__brand img{width:42px;height:42px;border-radius:12px}
.foot__name{font-size:18px;font-weight:800;color:#fff}
.foot__desc{font-size:14px;color:#93A88A;max-width:300px}
.foot h3{font-size:15px;color:#fff;margin-bottom:14px;font-weight:700}
.foot__links ul{display:grid;gap:10px}
.foot__links a{font-size:14px;color:var(--foot-2)}
.foot__links a:hover{color:#fff}
.foot__bottom{
  margin-top:44px;padding-top:22px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
}
.foot__disclaimer{font-size:13px;color:#8FA485;max-width:760px}
.foot__copy{font-size:13px;color:#8FA485}

/* ── 渐显 ───────────────────────────────────────────────── */
.reveal{transition:opacity .6s ease,transform .6s ease}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.reveal{opacity:1;transform:none}
  .btn{transition:none}
}

/* ── 断点 ≤980 ──────────────────────────────────────────── */
@media (max-width:980px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav__links{gap:16px}
  .nav__links a{font-size:14px}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:48px;padding-bottom:56px}
  .hero h1{font-size:34px}
  .hero__art{order:2}
  .stats__list{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .shots{grid-template-columns:repeat(2,1fr)}
  .entries{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .sec{padding-top:56px;padding-bottom:56px}
  .h2{font-size:25px}
  .foot__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}

/* ── 断点 ≤620 ──────────────────────────────────────────── */
@media (max-width:620px){
  body{font-size:15.5px}
  .nav__inner{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .brand img{width:34px;height:34px;border-radius:9px}
  .brand span{font-size:17px}
  .nav__links{order:3;width:100%;justify-content:space-between;gap:6px;margin-left:0}
  .nav__links a{font-size:13px;padding:4px 0;white-space:nowrap}
  .btn{padding:12px 22px;font-size:15px}
  .btn--sm{padding:8px 15px;font-size:13px}
  .hero__inner{padding-top:36px;padding-bottom:44px;gap:30px}
  .hero h1{font-size:27px}
  .hero-lead{font-size:15.5px;margin-top:14px}
  .hero__cta{gap:10px;margin-top:22px}
  .hero__meta{gap:8px 18px;margin-top:20px}
  .phone{width:212px;padding:7px;border-radius:27px}
  .phone img{border-radius:21px}
  .stats__list{padding-top:22px;padding-bottom:22px;gap:16px 12px}
  .stats__list b{font-size:17px}
  .cards{grid-template-columns:minmax(0,1fr);gap:16px}
  .card{padding:22px 20px}
  .shots{grid-template-columns:repeat(2,1fr);gap:14px}
  .shot .phone{padding:5px;border-radius:20px}
  .shot .phone img{border-radius:15px}
  .shot figcaption{font-size:12.5px}
  .shot figcaption b{font-size:13.5px}
  .entries{grid-template-columns:minmax(0,1fr);gap:14px}
  .sec{padding-top:46px;padding-bottom:46px}
  .h2{font-size:22px}
  .sub{font-size:14.5px}
  .steps li{padding:20px 18px 20px 62px}
  .steps li::before{left:18px;top:18px;width:30px;height:30px;border-radius:9px;font-size:15px}
  .prose h2{font-size:20px;margin-top:36px}
  .prose .phone{width:206px}
  .cta__inner{padding-top:48px;padding-bottom:52px}
  .cta__inner h2{font-size:22px}
  .cta__inner p{font-size:15px}
  .foot{padding-top:44px}
  .foot__inner{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot__bottom{margin-top:32px;flex-direction:column;align-items:flex-start}
}