*,
*::before,
*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font:16px/1.78 "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",
       "Noto Sans CJK SC","WenQuanYi Micro Hei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root{
  --bg:#FDF8F1;
  --bg2:#EFEAF3;
  --card:#FFFFFF;
  --pri:#E2732B;
  --pri-d:#BC5615;
  --acc:#8E6FAE;
  --acc-l:#F1EBF7;
  --sun:#F6C05A;
  --ink:#2A1B13;
  --txt:#31241C;
  --mut:#7A6A5E;
  --edge:#D8BFA4;
  --line:#E8DECD;
  --wrap:1140px;
  --rad:12px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pri-d);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:800;color:var(--ink);line-height:1.35}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

@keyframes flipin{
  from{opacity:0;transform:perspective(700px) rotateY(-9deg) translateY(12px)}
  to{opacity:1;transform:none}
}
.rise{animation:flipin .58s cubic-bezier(.2,.7,.3,1) both}
.rise.d1{animation-delay:.08s}
.rise.d2{animation-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:999px;
  border:2px solid var(--ink);
  background:var(--pri);color:#FFF8F0;
  font:700 16px/1 inherit;letter-spacing:.4px;
  box-shadow:4px 4px 0 var(--acc);
  transition:background .18s,box-shadow .18s,transform .18s;
}
.btn:hover{background:var(--pri-d);color:#FFFFFF;box-shadow:6px 6px 0 var(--acc);transform:translate(-1px,-1px)}
.btn--sm{padding:9px 20px;font-size:14px;box-shadow:3px 3px 0 var(--acc)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 rgba(255,255,255,.28)}
.btn--ghost:hover{background:rgba(255,255,255,.12);color:var(--ink)}
.top .btn,.cta .btn,.foot .btn{color:#FFF8F0}
.top .btn:hover,.cta .btn:hover,.foot .btn:hover{color:#FFFFFF}
.cta .btn--ghost,.foot .btn--ghost{color:var(--ink)}
.cta .btn--ghost:hover,.foot .btn--ghost:hover{color:var(--ink)}

.top{
  position:sticky;top:0;z-index:40;
  background:rgba(253,248,241,.95);
  border-bottom:2px solid var(--line);
  backdrop-filter:blur(8px);
}
.top__in{
  max-width:var(--wrap);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink)}
.brand img{width:42px;height:42px;border-radius:12px}
.brand__txt{font-weight:800;font-size:19px;letter-spacing:.6px;color:var(--ink)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  padding:8px 14px;border-radius:999px;color:var(--txt);
  font-size:15px;font-weight:600;white-space:nowrap;
}
.nav a:hover{background:var(--acc-l);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--acc);color:#FFFFFF}

.hero{position:relative;padding:58px 0 46px;background:linear-gradient(180deg,#FDF8F1 0%,#F6F0F8 55%,#EFEAF3 100%)}
.hero__deco{position:absolute;right:4%;top:8%;width:210px;height:210px;border-radius:44px;background:var(--acc);opacity:.14;transform:rotate(8deg)}
.hero__dots{position:absolute;right:22%;bottom:6%;width:150px;height:110px;
  background-image:radial-gradient(var(--sun) 2.2px,transparent 2.3px);
  background-size:15px 15px;opacity:.7}
.hero__in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.kicker{
  display:inline-block;margin-bottom:14px;padding:5px 14px;border-radius:999px;
  background:var(--acc-l);border:1px solid #DCCDEC;color:#6A4E8C;
  font-size:13px;font-weight:700;letter-spacing:.5px;
}
.hero h1{font-size:40px;letter-spacing:.5px;margin-bottom:16px}
.lead{font-size:16.5px;color:#4A382D;max-width:640px}
.hero__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-note{font-size:13.5px;color:var(--mut)}
.hero__shot{position:relative}
.hero__shot img{
  width:100%;max-width:308px;height:auto;margin:0 auto;border-radius:18px;
  box-shadow:0 0 0 4px #FFFFFF,7px 7px 0 rgba(142,111,174,.30);
}
.hero__shot figcaption{margin-top:12px;text-align:center;font-size:13px;color:var(--mut)}

.page-hero{padding:44px 0 34px;background:linear-gradient(180deg,#FDF8F1 0%,#F3EDF6 100%);border-bottom:2px solid var(--line)}
.page-hero h1{font-size:32px;margin-bottom:14px}
.page-hero .lead{max-width:820px}

.sec{padding:56px 0}
.sec--alt{background:var(--bg2)}
.h2{position:relative;padding-left:26px;font-size:26px;margin-bottom:26px}
.h2::before{content:"";position:absolute;left:0;top:.36em;width:14px;height:14px;border-radius:3px;background:var(--acc)}
.h2::after{content:"";position:absolute;left:0;bottom:-11px;width:52px;height:3px;background:var(--pri)}
.sec__sub{margin:-8px 0 26px;font-size:15px;color:var(--mut);max-width:760px}
.sec__sub.pad{padding-left:26px}

.card{
  position:relative;background:var(--card);border:2px solid var(--edge);
  border-radius:var(--rad);padding:22px;
}
.card::after{
  content:"";position:absolute;inset:7px;border:1px dashed rgba(142,111,174,.34);
  border-radius:8px;pointer-events:none;
}
.card>*{position:relative;z-index:1}
.card h3{font-size:17.5px;margin-bottom:10px}
.card p{font-size:15px;color:#4A382D}

.stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{position:relative;background:var(--card);border:2px solid var(--edge);border-radius:var(--rad);padding:20px 18px;text-align:center}
.stat::after{content:"";position:absolute;inset:7px;border:1px dashed rgba(142,111,174,.34);border-radius:8px;pointer-events:none}
.stat b{position:relative;display:block;font-size:27px;color:var(--pri-d);letter-spacing:.5px}
.stat span{position:relative;display:block;margin-top:6px;font-size:13.5px;color:var(--mut)}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.shot{padding:12px 12px 14px}
.shot img{width:100%;height:auto;border-radius:8px}
.shot figcaption{margin-top:10px;font-size:13.5px;color:var(--mut);text-align:center;line-height:1.6}

.feat{display:flex;gap:14px;align-items:flex-start}
.feat__ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--acc-l);
  border:2px solid var(--acc);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#6A4E8C;font-size:15px;
}
.feat__bd h3{margin-bottom:8px}
.feat__bd p{font-size:14.5px}

.band{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.band+.band{margin-top:52px}
.band--rev .band__txt{order:2}
.band__shot img{width:100%;max-width:330px;height:auto;margin:0 auto;border-radius:16px;
  box-shadow:0 0 0 4px #FFFFFF,7px 7px 0 rgba(142,111,174,.28)}
.band__shot figcaption{margin-top:12px;text-align:center;font-size:13px;color:var(--mut)}
.band__txt h2{margin-bottom:18px}
.band__txt p+p{margin-top:14px}
.tick{margin-top:18px;display:grid;gap:10px}
.tick li{position:relative;padding-left:24px;font-size:15px;color:#4A382D}
.tick li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--sun);border:1.5px solid var(--pri-d)}

.prose{columns:2;column-gap:42px}
.prose p{margin-bottom:16px;font-size:15.5px;color:#3D2C22;break-inside:avoid}
.note{
  margin-top:24px;border-left:6px solid var(--acc);background:var(--acc-l);
  border-radius:0 var(--rad) var(--rad) 0;padding:18px 22px;
}
.note p{font-size:15px;color:#4A3A5C}

.rev{display:flex;flex-direction:column;gap:14px}
.rev__hd{display:flex;align-items:center;gap:12px}
.rev__ava{width:42px;height:42px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink);font-size:16px}
.rev__who b{display:block;font-size:15px;color:var(--ink)}
.rev__who span{font-size:12.5px;color:var(--mut)}
.score{font-size:13px;color:var(--pri-d);font-weight:700;margin-left:auto;white-space:nowrap}
.rev p{font-size:15px;color:#4A382D}

.faq__col{display:grid;gap:14px;align-content:start}
details.q{background:var(--card);border:2px solid var(--edge);border-radius:var(--rad);padding:16px 18px}
details.q[open]{border-color:var(--acc)}
details.q summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:15.5px;list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";float:right;color:var(--acc);font-weight:800}
details.q[open] summary::after{content:"–"}
details.q p{margin-top:12px;font-size:14.8px;color:#4A382D}

.entry{display:flex;flex-direction:column;gap:10px}
.entry .tag{display:inline-block;align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--sun);color:#4A2F07;font-size:12px;font-weight:700}
.entry h3{font-size:17px}
.entry p{font-size:14.5px;color:#4A382D}
.entry a{font-weight:700;font-size:14px;color:var(--pri-d)}

.cta{background:var(--ink);color:#F6EDE1;padding:52px 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta h2{color:#FFF6EA;font-size:25px;padding-left:0;margin-bottom:10px}
.cta h2::before,.cta h2::after{display:none}
.cta p{color:#D9CABA;font-size:15px;max-width:620px}

.foot{background:#1F130D;color:#CBB9A8;padding:40px 0 26px;font-size:14px}
.foot__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot h4{color:#F6E7D6;font-size:16px;margin-bottom:12px}
.foot a{color:#CBB9A8}
.foot a:hover{color:#FFFFFF}
.foot li{margin-bottom:8px}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot__brand img{width:36px;height:36px;border-radius:10px}
.foot__brand b{color:#F6E7D6;font-size:17px}
.disc{margin-top:26px;padding-top:18px;border-top:1px solid rgba(203,185,168,.28);font-size:13px;line-height:1.8;color:#B8A492}
.copy{margin-top:10px;font-size:12.5px;color:#9B8775}

@media (max-width:980px){
  .hero h1{font-size:33px}
  .page-hero h1{font-size:28px}
  .hero__in{grid-template-columns:1fr;gap:30px}
  .hero__deco{right:3%;top:2%;width:132px;height:132px;border-radius:28px}
  .hero__dots{display:none}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .stats__in{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr;gap:26px}
  .band--rev .band__txt{order:0}
  .prose{columns:1}
  .foot__top{grid-template-columns:1fr 1fr}
  .h2{font-size:23px}
}
@media (max-width:620px){
  .top__in{flex-wrap:wrap;padding:10px 14px;gap:10px}
  .nav{order:3;width:100%;overflow-x:auto;margin-left:0;padding-bottom:2px}
  .nav a{padding:7px 12px;font-size:14px}
  .brand img{width:36px;height:36px}
  .brand__txt{font-size:17px}
  .btn{padding:11px 22px;font-size:15px}
  .hero{padding:38px 0 32px}
  .hero h1{font-size:27px}
  .page-hero h1{font-size:23px}
  .lead{font-size:15.5px}
  .sec{padding:40px 0}
  .h2{font-size:21px;padding-left:22px}
  .grid4{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid3,.grid2{grid-template-columns:1fr}
  .stats__in{grid-template-columns:repeat(2,1fr);gap:12px}
  .card{padding:18px}
  .shot{padding:10px 10px 12px}
  .shot figcaption{font-size:12.5px}
  .cta h2{font-size:21px}
  .foot__top{grid-template-columns:1fr;gap:20px}
}