@charset "utf-8";
/* ============================================================
   樱花漫画 · yhmhgw.cc
   视觉方向 B7 清新治愈 / 渲染语言 第19种「薄荷气泡」
   底 薄荷雾蓝 #EAF8F5 · 主 绿松石 #16A39A · 辅 浅湖蓝 #8AD2DE · 点缀 蜜桃粉 #FBAE9C
   ============================================================ */

:root{
  --bg:#EAF8F5;
  --bg-2:#F6FCFD;
  --card:#FFFFFF;
  --cream:#FFFDF8;
  --main:#16A39A;
  --main-d:#0E7268;
  --main-l:#DCF4F1;
  --sub:#4FA8B8;
  --sub-l:#EAF9FC;
  --peach:#FBAE9C;
  --peach-l:#FDEBE6;
  --ink:#14494F;
  --ink-2:#3D6E74;
  --ink-3:#75A0A5;
  --line:#D6EFEC;
  --sill:#CDEDE8;
  --shadow:0 5px 0 var(--sill);
  --r-lg:26px;
  --r-md:20px;
  --r-pill:999px;
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  font-size:16px;
  line-height:1.78;
  letter-spacing:.01em;
}
img{display:block;width:100%;height:auto;}
a{color:var(--main-d);text-decoration:none;}
a:hover{color:var(--main);}
ul,ol{list-style:none;}
h1,h2,h3{line-height:1.35;font-weight:700;}
h2{font-size:27px;letter-spacing:.02em;}
h3{font-size:19px;}

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

.skip{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(255,253,248,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:var(--wrap);margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand img{width:38px;height:38px;border-radius:12px;flex:none;}
.brand b{font-size:20px;color:var(--main-d);letter-spacing:.04em;white-space:nowrap;}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px;}
.nav a{
  padding:8px 15px;border-radius:var(--r-pill);font-size:15px;color:var(--ink-2);
}
.nav a:hover{background:var(--main-l);color:var(--main-d);}
.nav a[aria-current="page"]{background:var(--main-l);color:var(--main-d);font-weight:700;}
.burger{
  display:none;margin-left:auto;width:42px;height:42px;border:0;border-radius:14px;
  background:var(--main-l);color:var(--main-d);font-size:19px;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger[aria-expanded="true"]{background:var(--main);color:#fff;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--r-pill);
  background:linear-gradient(118deg,var(--main),#3DC0B6);
  color:#fff;font-size:16px;font-weight:700;
  box-shadow:0 4px 0 var(--sill);
  white-space:nowrap;
}
.btn:hover{color:#fff;filter:brightness(1.05);}
.btn--sm{padding:9px 17px;font-size:14px;flex:none;}
.btn__dot{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.28);display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:52px 0 46px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));}
.hero::before{
  content:"";position:absolute;left:-140px;top:-120px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,163,154,.16),rgba(234,248,245,0) 68%);
}
.hero::after{
  content:"";position:absolute;right:-90px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,174,156,.30),rgba(234,248,245,0) 66%);
}
.hero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;
}
.hero h1{font-size:46px;letter-spacing:.02em;color:var(--main-d);}
.hero .lead{margin-top:18px;font-size:17px;color:var(--ink-2);max-width:560px;}
.hero__act{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap;}
.hero__chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;}
.hero__chips span{
  font-size:14px;color:var(--main-d);background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 15px;
}
.hero__shot{position:relative;margin:0 auto;max-width:320px;}
.hero__shot img{
  border-radius:var(--r-lg);
  box-shadow:0 0 0 6px #fff,var(--shadow);
  animation:bubbleFloat 6.5s ease-in-out infinite;
}
.hero__shot figcaption{
  margin-top:16px;font-size:13px;color:var(--ink-3);text-align:center;
}

/* 水波弧线缝带（渲染语言构件） */
.waveband{
  height:26px;
  background-image:
    radial-gradient(circle at 12px 26px,rgba(22,163,154,.22) 0 7px,rgba(22,163,154,0) 8px),
    radial-gradient(circle at 12px 32px,rgba(79,168,184,.16) 0 7px,rgba(79,168,184,0) 8px);
  background-size:24px 26px,24px 26px;
  background-repeat:repeat-x;
  background-position:0 0,12px 0;
}

/* ---------- 区块通用 ---------- */
.sect{padding:46px 0 8px;}
.sect--tint{background:var(--bg-2);border-radius:36px;margin:34px auto 0;padding:42px 0 30px;
  max-width:calc(var(--wrap) + 44px);}
.sect__hd{max-width:780px;margin-bottom:24px;}
.sect__hd h2{position:relative;padding-left:34px;}
.sect__hd h2::before{
  content:"";position:absolute;left:0;top:5px;width:19px;height:24px;
  border:2.5px solid var(--main);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}
.sect__hd h2::after{
  content:"";position:absolute;left:34px;bottom:-9px;width:76px;height:4px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--main),var(--peach));
}
.sect__hd .sub{margin-top:14px;font-size:16px;color:var(--ink-3);}

/* ---------- 速览入口：胶囊锚点条 + 入口格 ---------- */
.quick{position:sticky;top:59px;z-index:30;padding:10px 0;
  background:linear-gradient(180deg,var(--bg) 62%,rgba(234,248,245,0));}
.quick__bar{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;
  scrollbar-width:none;
}
.quick__bar::-webkit-scrollbar{display:none;}
.quick__bar a{
  flex:none;font-size:14px;padding:9px 17px;border-radius:var(--r-pill);
  background:var(--cream);border:1px solid var(--line);color:var(--ink-2);
}
.quick__bar a[aria-current="true"]{
  background:var(--main);border-color:var(--main);color:#fff;font-weight:700;
}
.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.gate{
  background:var(--card);border-radius:var(--r-lg);padding:22px 20px 20px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.gate::before{
  content:"";position:absolute;right:-46px;top:-46px;width:104px;height:104px;border-radius:50%;
  background:var(--sub-l);
}
.gate em{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:14px;background:var(--main-l);color:var(--main-d);
  font-style:normal;font-size:17px;font-weight:700;margin-bottom:12px;
}
.gate h3{position:relative;font-size:18px;margin-bottom:8px;}
.gate p{position:relative;font-size:14px;color:var(--ink-3);line-height:1.7;}
.gate--peach em{background:var(--peach-l);color:#B4553C;}

/* ---------- 速览行（可展开） ---------- */
.glance{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:6px 24px;overflow:hidden;
}
.glance__row{border-bottom:1px dashed var(--line);}
.glance__row:last-child{border-bottom:0;}
.glance__row summary{
  display:grid;grid-template-columns:132px 1fr 92px;gap:16px;align-items:center;
  padding:17px 0;cursor:pointer;list-style:none;
}
.glance__row summary::-webkit-details-marker{display:none;}
.glance__row .k{
  font-size:15px;font-weight:700;color:var(--main-d);
  display:flex;align-items:center;gap:8px;
}
.glance__row .k::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--peach);flex:none;
}
.glance__row .t{font-size:16px;color:var(--ink);}
.glance__row .v{
  font-size:13px;color:var(--sub);text-align:right;
  background:var(--sub-l);border-radius:var(--r-pill);padding:4px 12px;justify-self:end;
}
.glance__row summary:hover .t{color:var(--main-d);}
.glance__row .body{
  padding:0 0 20px 141px;font-size:15px;color:var(--ink-2);
}

/* ---------- 数据带 ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.stat{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 22px;
}
.stat b{display:block;font-size:30px;color:var(--main);letter-spacing:.02em;}
.stat p{font-size:14px;color:var(--ink-3);margin-top:6px;}
.stat .bar{height:12px;border-radius:var(--r-pill);background:var(--main-l);margin-top:16px;overflow:hidden;}
.stat .bar i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--main),#48C6BC);
  animation:rippleRise 1.1s ease-out both;
}
.stat .bar i.p{background:linear-gradient(90deg,var(--peach),#FDCFC2);}
.stat .bar i.s{background:linear-gradient(90deg,var(--sub),#8AD2DE);}

/* ---------- 错位浮岛 ---------- */
.isles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.isle{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:26px 24px;display:grid;grid-template-columns:1fr 132px;gap:18px;align-items:center;
}
.isle--wide{grid-column:1 / -1;grid-template-columns:132px 1fr;background:var(--cream);}
.isle h3{margin-bottom:10px;color:var(--main-d);}
.isle p{font-size:14.5px;color:var(--ink-2);}
.isle figure{margin:0;}
.isle figure img{border-radius:var(--r-md);box-shadow:0 0 0 5px #fff,0 4px 0 var(--sill);}

/* ---------- 步骤条 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.step{
  background:var(--cream);border-radius:var(--r-md);padding:20px;position:relative;
  border:1px solid var(--line);
}
.step b{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:10px;background:var(--main);color:#fff;font-size:14px;margin-bottom:10px;
}
.step h3{font-size:17px;margin-bottom:6px;}
.step p{font-size:14px;color:var(--ink-3);}

/* ---------- 交叉入口卡 ---------- */
.xentry{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.xentry a{
  display:block;background:var(--card);border-radius:var(--r-lg);padding:22px 24px;
  box-shadow:var(--shadow);
}
.xentry a:hover{box-shadow:0 6px 0 var(--main-l);}
.xentry b{display:block;font-size:18px;color:var(--main-d);margin-bottom:8px;}
.xentry p{font-size:14px;color:var(--ink-3);}
.xentry span{display:inline-block;margin-top:12px;font-size:14px;color:var(--main);}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;}
.faq details{
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow);padding:0 22px;
}
.faq summary{
  padding:17px 0;font-size:16px;font-weight:700;color:var(--main-d);
  cursor:pointer;list-style:none;position:relative;padding-right:26px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";position:absolute;right:0;top:15px;font-size:20px;color:var(--sub);font-weight:400;
}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 0 18px;font-size:14.5px;color:var(--ink-2);}

/* ---------- 评价 ---------- */
.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.note{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px 20px;
  position:relative;
}
.note::before{
  content:"";position:absolute;left:24px;top:-8px;width:26px;height:26px;border-radius:50% 50% 50% 0;
  background:var(--peach);transform:rotate(-45deg);opacity:.5;
}
.note p{font-size:15px;color:var(--ink-2);}
.note em{display:block;margin-top:14px;font-style:normal;font-size:13.5px;color:var(--ink-3);}

/* ---------- CTA ---------- */
.cta{
  margin:52px auto 0;max-width:calc(var(--wrap) + 44px);
  background:linear-gradient(150deg,var(--main) 0%,#2FB6AE 58%,#63C9CF 100%);
  border-radius:36px;padding:46px 22px 50px;position:relative;overflow:hidden;text-align:center;
}
.cta::before{
  content:"";position:absolute;left:-60px;bottom:-190px;width:420px;height:420px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
}
.cta::after{
  content:"";position:absolute;right:-90px;top:-190px;width:420px;height:420px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
}
.cta__in{position:relative;z-index:2;}
.cta h2{color:#fff;}
.cta .sub{color:rgba(255,255,255,.9);font-size:15.5px;margin-top:12px;}
.cta__act{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  background:rgba(255,255,255,.16);border-radius:var(--r-pill);padding:8px 8px 8px 14px;
}
.cta .btn{background:var(--cream);color:var(--main-d);box-shadow:0 4px 0 rgba(11,86,80,.35);}
.cta .btn:hover{color:var(--main-d);}
.cta__ring{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:19px;
}

/* ---------- 页脚 ---------- */
.foot{margin-top:52px;background:var(--cream);border-top:1px solid var(--line);padding:36px 0 28px;}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;}
.foot p{font-size:14px;color:var(--ink-3);}
.foot b{display:block;font-size:16px;color:var(--main-d);margin-bottom:12px;}
.foot li{font-size:14px;color:var(--ink-2);margin-bottom:8px;}
.foot li a{color:var(--ink-2);}
.foot li a:hover{color:var(--main);}
.foot__law{
  max-width:var(--wrap);margin:26px auto 0;padding:16px 22px 0;border-top:1px dashed var(--line);
  font-size:13.5px;color:var(--ink-3);line-height:1.8;
}
.foot__copy{max-width:var(--wrap);margin:12px auto 0;padding:0 22px;font-size:13px;color:var(--ink-3);}

/* ---------- 内页头 ---------- */
.page-hero{padding:44px 0 10px;position:relative;}
.page-hero h1{font-size:36px;color:var(--main-d);}
.page-hero .lead{margin-top:16px;font-size:16.5px;color:var(--ink-2);max-width:760px;}
.crumb{font-size:14px;color:var(--ink-3);margin-bottom:14px;}
.crumb a{color:var(--ink-3);}
.crumb a:hover{color:var(--main);}
.prose{max-width:820px;}
.prose p{margin-bottom:16px;font-size:16px;color:var(--ink-2);}
.prose h3{margin:26px 0 12px;color:var(--main-d);}
.prose ul{margin:0 0 18px;}
.prose li{
  font-size:15.5px;color:var(--ink-2);padding-left:22px;position:relative;margin-bottom:10px;
}
.prose li::before{
  content:"";position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50% 50% 50% 0;
  background:var(--sub-l);border:2px solid var(--sub);transform:rotate(-45deg);
}
.prose .fact{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:22px 24px;margin:22px 0;
}
.prose .fact p{margin-bottom:10px;font-size:15px;}
.prose .fact p:last-child{margin-bottom:0;}
.prose .fact b{color:var(--main-d);}

/* ---------- 动效 ---------- */
@keyframes bubbleFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes rippleRise{
  from{width:6%;opacity:.4;}
}
@media (prefers-reduced-motion:reduce){
  .hero__shot img{animation:none;}
  .stat .bar i{animation:none;}
}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .nav{
    display:none;position:absolute;left:16px;right:16px;top:62px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
    padding:10px;box-shadow:0 12px 26px rgba(20,73,79,.10);
  }
  .burger[aria-expanded="true"] ~ .nav{display:flex;}
  .burger{display:inline-flex;}
  .top__in .btn--sm{padding:8px 14px;font-size:13.5px;}
  .hero{padding:38px 0 34px;}
  .hero__in{grid-template-columns:1fr;gap:30px;}
  .hero h1{font-size:36px;}
  .hero__shot{max-width:290px;}
  .gates{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:1fr;}
  .isles{grid-template-columns:1fr;}
  .isle--wide{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .faq{grid-template-columns:1fr;}
  .notes{grid-template-columns:1fr;}
  .xentry{grid-template-columns:1fr;}
  .foot__in{grid-template-columns:1fr;}
  .glance__row summary{grid-template-columns:104px 1fr 78px;gap:12px;}
  .glance__row .body{padding-left:116px;}
}
@media (max-width:620px){
  .wrap{padding:0 16px;}
  .top__in{padding:9px 16px;gap:10px;}
  .brand img{width:34px;height:34px;border-radius:11px;}
  .brand b{font-size:18px;}
  .top__in .btn--sm{padding:7px 12px;font-size:13px;}
  .btn__dot{display:none;}
  h2{font-size:23px;}
  .hero h1{font-size:30px;}
  .hero .lead{font-size:15.5px;}
  .hero__shot{max-width:250px;}
  .sect{padding:36px 0 6px;}
  .sect--tint{border-radius:26px;padding:32px 0 24px;}
  .sect__hd h2{padding-left:28px;}
  .gates{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .glance{padding:4px 16px;}
  .glance__row summary{grid-template-columns:1fr auto;gap:6px 10px;padding:14px 0;}
  .glance__row .k{grid-column:1 / -1;}
  .glance__row .t{font-size:15px;}
  .glance__row .v{justify-self:end;}
  .glance__row .body{padding:0 0 16px;}
  .isle{grid-template-columns:1fr;padding:22px 18px;}
  .isle figure{max-width:190px;margin:0 auto;}
  .cta{padding:36px 18px 40px;border-radius:26px;}
  .page-hero h1{font-size:26px;}
  .prose p,.prose li{font-size:15px;}
  .faq details{padding:0 18px;}
}