/* ============================================================
   梦漫 · mengmangw.net
   第 10 档视觉：奶黄纸底 + 朱红主色 + 松墨绿辅色
   渲染语言「套色错位」：直角小圆角 + 实描边 + 双向偏移的空心错位框
   ============================================================ */

:root{
  --paper:#FBF6E4;
  --paper2:#FFFDF4;
  --card:#FFFFFF;
  --ink:#221D16;
  --ink2:#5E5445;
  --ink3:#8E8474;
  --red:#D8352C;
  --red-d:#9E1F18;
  --red-l:#FBE4E1;
  --green:#1F4A3B;
  --green-d:#14332A;
  --green-l:#E2EDE7;
  --blue:#2B6E8F;
  --line:rgba(34,29,22,.16);
  --line2:rgba(34,29,22,.08);
  --r:3px;
  --wrap:1120px;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.78 "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",
       "Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--red-d);text-decoration:none}
a:hover{color:var(--red)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:800;letter-spacing:.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

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

/* ── 通用小件 ─────────────────────────────────────── */
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.16em;
  color:var(--green);text-transform:uppercase;margin:0 0 14px;
}
.kicker::before{
  content:"";width:9px;height:9px;background:var(--red);
  transform:rotate(45deg);flex:0 0 auto;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 28px;
  font-size:16px;font-weight:800;
  color:#fff;background:var(--red);
  border:1px solid var(--ink);border-radius:var(--r);
  box-shadow:4px 4px 0 -1px var(--paper),4px 4px 0 0 var(--green);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover,.btn:focus-visible{
  color:#fff;background:var(--red-d);
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 -1px var(--paper),2px 2px 0 0 var(--green);
}
.btn--ghost{
  color:var(--green);background:var(--card);
  box-shadow:4px 4px 0 -1px var(--paper),4px 4px 0 0 rgba(31,74,59,.5);
}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--green-d);background:var(--green-l)}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}

.dot{
  display:inline-block;width:8px;height:8px;background:var(--red);
  transform:rotate(45deg);flex:0 0 auto;
}

/* 套色错位：卡面 + 右下偏移空心框 */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--ink);
  border-radius:var(--r);
  padding:26px 24px;
}
.card::after{
  content:"";position:absolute;top:7px;left:7px;width:100%;height:100%;
  border-right:1px solid rgba(216,53,44,.58);
  border-bottom:1px solid rgba(216,53,44,.58);
  border-radius:0 0 var(--r) 0;pointer-events:none;
}

/* ── 顶栏 ─────────────────────────────────────────── */
.head{
  position:sticky;top:0;z-index:40;
  background:rgba(251,246,228,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(6px);
}
.head-in{display:flex;align-items:center;gap:18px;min-height:68px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:44px;height:44px;border-radius:10px;border:1px solid var(--line)}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt b{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.06em}
.brand__txt i{font-style:normal;font-size:12px;letter-spacing:.22em;color:var(--ink3)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  white-space:nowrap;padding:9px 13px;border-radius:var(--r);
  font-size:15px;font-weight:600;color:var(--ink2);
}
.nav a:hover{color:var(--green);background:var(--green-l)}
.nav a[aria-current="page"]{color:var(--red-d);background:var(--red-l)}

/* ── Hero ─────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(31,74,59,.22) 1.1px,transparent 1.2px);
  background-size:13px 13px;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 62%,transparent 96%);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 62%,transparent 96%);
}
.hero::after{
  content:"";position:absolute;right:-5%;top:11%;width:45%;height:76%;
  background:linear-gradient(158deg,rgba(216,53,44,.17),rgba(216,53,44,.04));
  border:1px solid rgba(216,53,44,.3);border-radius:4px;
  transform:rotate(-6deg);
}
.hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:52px;align-items:center;padding-top:62px;padding-bottom:66px;
}
.hero h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--red);}
.lead{font-size:17px;color:var(--ink2);margin:20px 0 0;max-width:44em}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;
  font-size:14px;color:var(--ink2);
}
.hero-meta li{display:flex;align-items:center;gap:9px}
.hero-meta li::before{content:"";width:7px;height:7px;background:var(--green)}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px}

.hero__shot{display:flex;justify-content:flex-end}
.phone{
  width:100%;max-width:322px;
  background:var(--card);border:1px solid var(--ink);border-radius:24px;
  padding:10px;box-shadow:8px 8px 0 -1px rgba(251,246,228,.9),8px 8px 0 0 rgba(31,74,59,.42);
}
.phone img{width:100%;height:auto;border-radius:15px}

/* ── 朱红数据带 ───────────────────────────────────── */
.facts{background:var(--red);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.26)}
.facts-in > li{background:var(--red);padding:26px 22px;color:#fff}
.facts-in b{display:block;font-size:30px;font-weight:800;line-height:1.2}
.facts-in span{display:block;font-size:13.5px;color:rgba(255,255,255,.86);margin-top:6px}

/* ── 分区与错落双栏骨架 ───────────────────────────── */
.sec{padding:70px 0}
.sec--tint{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--deep{background:var(--green);border-top:1px solid var(--green-d);border-bottom:1px solid var(--green-d);color:var(--paper2)}
.sec--deep h2{color:#fff}
.sec--deep .sec__sub{color:rgba(255,253,244,.78)}
.sec--deep a{color:#F6D9A6}

.sec__head{max-width:60em;margin-bottom:36px}
.sec h2{font-size:clamp(24px,2.9vw,32px)}
.sec__sub{color:var(--ink2);margin:12px 0 0;font-size:15.5px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.split--rev .split__text{order:2}
.split + .split{margin-top:56px}
.split__text h3{font-size:21px;margin-bottom:12px}
.split__text p{color:var(--ink2)}
.sec--deep .split__text p{color:rgba(255,253,244,.8)}
.notes{margin:16px 0 0;display:grid;gap:10px}
.notes li{position:relative;padding-left:20px;font-size:15px;color:var(--ink2)}
.notes li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  background:var(--red);transform:rotate(45deg);
}
.sec--deep .notes li{color:rgba(255,253,244,.82)}
.sec--deep .notes li::before{background:#F6C9A0}

/* ── 功能卡栅格 ───────────────────────────────────── */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card h3{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card p{font-size:15px;color:var(--ink2)}

/* ── 截图栅格 ─────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.shot{background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:10px}
.shot img{width:100%;height:auto;border-radius:2px}
.shot figcaption{font-size:13.5px;color:var(--ink2);padding:11px 3px 3px;line-height:1.5}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── 入口卡（内页互链）────────────────────────────── */
.entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.entry{
  position:relative;display:block;background:var(--card);
  border:1px solid var(--ink);border-radius:var(--r);padding:24px 22px;
  transition:transform .16s ease;
}
.entry::after{
  content:"";position:absolute;top:7px;left:7px;width:100%;height:100%;
  border-right:1px solid rgba(31,74,59,.5);border-bottom:1px solid rgba(31,74,59,.5);
  border-radius:0 0 var(--r) 0;pointer-events:none;
}
.entry:hover{transform:translate(-2px,-2px)}
.entry b{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.entry span{display:block;font-size:14.5px;color:var(--ink2)}
.entry i{display:block;margin-top:14px;font-style:normal;font-size:13px;letter-spacing:.14em;color:var(--red-d)}

/* ── 评价 ─────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.quote{background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:26px 24px}
.quote__stars{color:var(--red);font-size:15px;letter-spacing:4px;margin-bottom:12px}
.quote p{font-size:15.5px;color:var(--ink2)}
.quote footer{margin-top:14px;font-size:13.5px;color:var(--ink3)}

/* ── FAQ ──────────────────────────────────────────── */
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--ink);border-radius:var(--r)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 54px 18px 20px;position:relative;
  font-size:16px;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:21px;font-weight:800;color:var(--red);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq__a{padding:16px 20px 20px;font-size:15px;color:var(--ink2)}

/* ── 步骤 ─────────────────────────────────────────── */
.steps{display:grid;gap:18px}
.step{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;
  background:var(--card);border:1px solid var(--ink);border-radius:var(--r);padding:22px 24px;
}
.step__k{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;font-size:17px;font-weight:800;border-radius:var(--r);
}
.step h3{font-size:17.5px;margin-bottom:8px}
.step p{font-size:15px;color:var(--ink2)}

/* ── 表格 ─────────────────────────────────────────── */
.tbl-cap{font-size:14px;color:var(--ink3);margin:0 0 10px}
.tbl-scroll{overflow-x:auto;border:1px solid var(--ink);border-radius:var(--r);background:var(--card)}
.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl thead th{background:var(--green-l);color:var(--green-d);font-weight:800;white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}

/* ── 内页导语区 ───────────────────────────────────── */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--paper2);border-bottom:1px solid var(--line);
  padding:52px 0 54px;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(216,53,44,.2) 1.1px,transparent 1.2px);
  background-size:13px 13px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);
  mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(27px,3.4vw,38px)}
.page-hero .lead{max-width:52em}

/* 内页导语下方的缩略图带 */
.strip{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.strip .shot{width:116px;padding:6px;flex:0 0 auto}
.strip .shot img{border-radius:2px}
.strip .shot figcaption{display:none}

/* 正文块 */
.block{padding:56px 0 0}
.block:first-of-type{padding-top:52px}
.block h2{font-size:clamp(21px,2.5vw,26px);display:flex;align-items:center;gap:12px}
.block h2::before{content:"";width:10px;height:10px;background:var(--red);transform:rotate(45deg);flex:0 0 auto}
.block h3{font-size:18px;margin:26px 0 10px}
.block p{color:var(--ink2);margin:16px 0 0}
.block ul{margin:16px 0 0;display:grid;gap:9px}
.block ul li{position:relative;padding-left:20px;color:var(--ink2);font-size:15.5px}
.block ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--green);transform:rotate(45deg)}
.block .grid{margin-top:24px}

/* ── CTA ──────────────────────────────────────────── */
.cta{
  background:var(--green);color:var(--paper2);
  border-top:1px solid var(--green-d);padding:56px 0;
}
.cta-in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;
}
.cta h2{color:#fff;font-size:clamp(22px,2.7vw,29px)}
.cta p{color:rgba(255,253,244,.8);margin:12px 0 0;font-size:15.5px}
.cta .btn{box-shadow:4px 4px 0 -1px var(--green),4px 4px 0 0 #F6C9A0}
.cta .btn:hover{box-shadow:2px 2px 0 -1px var(--green),2px 2px 0 0 #F6C9A0}

/* ── 页脚 ─────────────────────────────────────────── */
.foot{background:var(--paper2);border-top:1px solid var(--line);padding:46px 0 34px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:34px}
.foot h3{font-size:15px;color:var(--ink);margin-bottom:14px;letter-spacing:.04em}
.foot ul{display:grid;gap:9px}
.foot ul a{font-size:14.5px;color:var(--ink2)}
.foot ul a:hover{color:var(--red-d)}
.foot__about{font-size:14.5px;color:var(--ink2);max-width:34em}
.foot__about .brand{margin-bottom:14px}
.disc{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink3);line-height:1.7;
}
.copy{margin-top:10px;font-size:13px;color:var(--ink3)}

/* ── 动效（纯 CSS，与滚动位置无关）────────────────── */
@keyframes stampIn{
  from{opacity:0;transform:translateY(11px) scale(.986)}
  to{opacity:1;transform:none}
}
.stamp{animation:stampIn .5s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.06s}
.d2{animation-delay:.12s}
.d3{animation-delay:.18s}
.d4{animation-delay:.24s}
.d5{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .stamp{animation:none;opacity:1;transform:none}
  .btn,.entry{transition:none}
}

/* ── 断点 ─────────────────────────────────────────── */
@media (max-width:980px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:46px;padding-bottom:48px}
  .hero__shot{max-width:300px;margin:0 auto;justify-content:center}
  .split{grid-template-columns:minmax(0,1fr);gap:26px}
  .split--rev .split__text{order:0}
  .split + .split{margin-top:40px}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .entries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts-in{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cta-in{grid-template-columns:minmax(0,1fr);gap:24px}
}

@media (max-width:620px){
  .wrap{padding:0 18px}
  .head-in{flex-wrap:wrap;gap:10px 12px;padding-top:9px;padding-bottom:0}
  .head .btn{margin-left:auto}
  .nav{
    order:3;width:100%;margin-left:0;
    justify-content:space-between;border-top:1px solid var(--line);
  }
  .nav a{padding:11px 6px;font-size:14px}
  .hero h1{font-size:31px}
  .lead{font-size:16px}
  .hero::after{width:56%}
  .phone{box-shadow:6px 6px 0 -1px rgba(251,246,228,.9),6px 6px 0 0 rgba(31,74,59,.42)}
  .sec{padding:52px 0}
  .block{padding:44px 0 0}
  .grid--2,.grid--3,.grid--4,.shots,.shots--wide,.entries,.quotes,.facts-in{
    grid-template-columns:minmax(0,1fr);
  }
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .shot figcaption{font-size:12.5px}
  .step{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px}
  .step__k{width:38px;height:38px;font-size:15px}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .cta .btn{width:100%}
}