:root{
  --bg:#F7F5F2;
  --band:#EDE7DD;
  --card:#FFFFFF;
  --line:#E2DCD2;
  --line-s:#CFC7BA;
  --ink:#2C2824;
  --ink-d:#1E1B18;
  --ink-l:#4A443C;
  --txt:#3A342E;
  --sub:#776E64;
  --orange:#F0621E;
  --orange-d:#C7490F;
  --orange-l:#FFD9C2;
  --gold:#D8A657;
  --r:14px;
  --wrap:1160px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,sans-serif;
  font-size:16px;
  line-height:1.78;
}

h1,h2,h3,h4,p,figure,figcaption,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  color:#FFFFFF;
  font-size:16px;
  font-weight:700;
  letter-spacing:.4px;
  line-height:1.2;
  white-space:nowrap;
}
.btn:hover{background:linear-gradient(135deg,#FF7433,#D9530F);color:#FFFFFF}
.btn--ghost{
  background:transparent;
  border-color:var(--line-s);
  color:var(--ink);
}
.btn--ghost:hover{background:#FFFFFF;border-color:var(--orange);color:var(--orange-d)}
.btn--top{padding:9px 18px;font-size:14px}
.btn--sm{padding:11px 22px;font-size:15px}

.top{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(247,245,242,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.top__in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__logo{width:40px;height:40px;border-radius:11px}
.brand__name{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.5px;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px;
  margin-left:auto;
  font-size:14.5px;
}
.nav a{
  padding:7px 13px;
  border-radius:9px;
  color:var(--ink-l);
}
.nav a:hover{background:#FFFFFF;color:var(--orange-d)}
.nav a[aria-current="page"]{
  background:#FFFFFF;
  color:var(--orange-d);
  font-weight:700;
  box-shadow:inset 0 -2px 0 var(--orange);
}
.top .btn{color:#FFFFFF;flex:0 0 auto}
.top .btn--top{color:#FFFFFF}

.hero{
  position:relative;
  overflow:hidden;
  background:var(--bg);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(44,40,36,.09) 1.1px,transparent 1.1px);
  background-size:22px 22px;
  opacity:.5;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  right:-140px;
  top:-120px;
  width:760px;
  height:420px;
  background:linear-gradient(105deg,rgba(240,98,30,.16),rgba(240,98,30,.02));
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
  transform:rotate(-7deg);
  pointer-events:none;
}
.hero__in{
  position:relative;
  z-index:1;
  max-width:var(--wrap);
  margin:0 auto;
  padding:58px 22px 66px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:46px;
  align-items:start;
}
.hero__ttl{
  font-size:40px;
  line-height:1.26;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.5px;
}
.lead{
  margin-top:18px;
  font-size:16.5px;
  color:var(--ink-l);
  max-width:34em;
}
.hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.cta-note{
  margin-top:14px;
  font-size:13.5px;
  color:var(--sub);
}
.hero__shot{
  max-width:312px;
  margin:0 auto;
  width:100%;
}
.hero__shot img{
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(44,40,36,.42);
}
.hero__shot figcaption{
  margin-top:12px;
  font-size:13px;
  color:var(--sub);
  text-align:center;
  line-height:1.6;
}

.stats{
  background:var(--ink);
  color:#F2EDE6;
  margin-top:-20px;
  position:relative;
  z-index:2;
}
.stats__in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:24px 18px;
  border-left:1px solid rgba(255,255,255,.14);
}
.stat:first-child{border-left:0}
.stat__n{
  font-size:27px;
  font-weight:700;
  color:var(--orange);
  line-height:1.2;
}
.stat__t{margin-top:4px;font-size:15px;font-weight:700;color:#F2EDE6}
.stat__d{margin-top:5px;font-size:13px;color:#A99F94;line-height:1.62}

.sec{padding:64px 0}
.sec--band{background:var(--band)}
.sec__hd{max-width:44em}
.sec__hd h2{
  font-size:27px;
  line-height:1.35;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.4px;
}
.sec__hd h2::after{
  content:"";
  display:block;
  width:44px;
  height:4px;
  margin-top:12px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-l));
}
.sub{
  margin-top:13px;
  font-size:15px;
  color:var(--sub);
  max-width:40em;
}
.sec__body{margin-top:34px}

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px 30px;
}
.card::after{
  content:"";
  position:absolute;
  right:13px;
  bottom:13px;
  width:16px;
  height:16px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  opacity:.92;
}
.card__ic{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--orange-l);
  color:var(--orange-d);
  font-size:15px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card__t{margin-top:16px;font-size:17.5px;font-weight:700;color:var(--ink)}
.card__d{margin-top:9px;font-size:14.5px;color:var(--sub);line-height:1.76}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards--2{grid-template-columns:repeat(2,1fr)}

.shots{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:start;
}
.fig{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px;
}
.fig img{width:100%;height:auto;border-radius:10px}
.fig figcaption{
  margin-top:11px;
  font-size:13.5px;
  color:var(--sub);
  line-height:1.66;
}
.shots__panel{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:250px 1fr;
  gap:24px;
  align-items:start;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--r);
  padding:24px 24px;
  color:#EFEAE3;
}
.shots__panel h3{font-size:17px;font-weight:700;color:#FFFFFF}
.shots__panel ul{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px 26px;
}
.shots__panel li{
  font-size:14px;
  line-height:1.7;
  color:#C6BDB2;
  padding-left:16px;
  position:relative;
  margin-top:9px;
}
.shots__panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--orange);
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.step{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 20px 24px;
  position:relative;
}
.step + .step::before{
  content:"";
  position:absolute;
  left:-18px;
  top:38px;
  width:18px;
  border-top:2px dashed var(--line-s);
}
.step__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--ink);
  color:var(--orange);
  font-size:14px;
  font-weight:700;
}
.step__t{margin-top:13px;font-size:16px;font-weight:700;color:var(--ink)}
.step__d{margin-top:8px;font-size:14px;color:var(--sub);line-height:1.72}

.entry{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px;
  position:relative;
}
.entry:hover{border-color:var(--orange);background:#FFFFFF}
.entry__k{
  font-size:12.5px;
  font-weight:700;
  color:var(--orange-d);
  letter-spacing:1.4px;
}
.entry__t{margin-top:10px;font-size:18px;font-weight:700;color:var(--ink)}
.entry__d{margin-top:9px;font-size:14.5px;color:var(--sub);line-height:1.76}
.entry__go{
  margin-top:15px;
  font-size:14px;
  font-weight:700;
  color:var(--orange-d);
}
.entry::after{
  content:"";
  position:absolute;
  right:18px;
  top:22px;
  width:12px;
  height:12px;
  border-radius:4px;
  background:var(--orange);
  opacity:.9;
}

.quote{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px 46px;
  position:relative;
}
.quote__p{font-size:15px;color:var(--ink-l);line-height:1.8}
.quote__m{
  margin-top:16px;
  font-size:13.5px;
  color:var(--sub);
}
.quote__m b{color:var(--ink);font-weight:700}
.stars{margin-top:10px;font-size:13px;color:var(--gold);letter-spacing:2px}
.quote::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:16px;
  height:16px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--orange),var(--orange-d));
  opacity:.92;
}

.faqs{display:grid;gap:12px}
.faqs details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:16px 20px;
}
.faqs summary{
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  line-height:1.66;
}
.faqs summary::marker{color:var(--orange)}
.faqs details[open]{border-color:var(--line-s)}
.faq__a{
  margin-top:11px;
  font-size:14.5px;
  color:var(--sub);
  line-height:1.8;
}

.cta{
  background:var(--ink-d);
  color:#F1ECE5;
  position:relative;
  overflow:hidden;
}
.cta::after{
  content:"";
  position:absolute;
  left:-120px;
  bottom:-180px;
  width:520px;
  height:360px;
  background:radial-gradient(circle,rgba(240,98,30,.26),transparent 68%);
  pointer-events:none;
}
.cta__in{
  position:relative;
  z-index:1;
  max-width:var(--wrap);
  margin:0 auto;
  padding:56px 22px 60px;
  text-align:center;
}
.cta__ttl{font-size:26px;font-weight:700;color:#FFFFFF;line-height:1.4}
.cta__d{margin-top:12px;font-size:15px;color:#B3A99E}
.cta__btns{margin-top:24px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.cta .btn{color:#FFFFFF}
.cta .btn--ghost{color:#F1ECE5;border-color:rgba(255,255,255,.34)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:var(--orange);color:#FFFFFF}

.foot{
  background:var(--ink);
  color:#B7AEA4;
  font-size:14px;
}
.foot__in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:52px 22px 26px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:32px;
}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot__brand img{width:36px;height:36px;border-radius:10px}
.foot__brand span{font-size:18px;font-weight:700;color:#FFFFFF}
.foot__p{line-height:1.8;color:#9C9389;max-width:30em}
.foot__h{
  font-size:15px;
  font-weight:700;
  color:#FFFFFF;
  margin-bottom:12px;
}
.foot__col a{
  display:block;
  padding:5px 0;
  color:#B7AEA4;
}
.foot__col a:hover{color:var(--orange)}
.foot .btn{display:inline-flex;color:#FFFFFF;padding:10px 20px;margin-top:12px}
.foot__bar{
  border-top:1px solid rgba(255,255,255,.12);
}
.foot__bar--in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:20px 22px 34px;
}
.foot__note{
  font-size:13px;
  color:#8E857C;
  line-height:1.78;
  margin-bottom:12px;
}
.foot__copy{font-size:13px;color:#7C736A}

.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--band);
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:"";
  position:absolute;
  right:-160px;
  top:-150px;
  width:620px;
  height:360px;
  background:linear-gradient(105deg,rgba(240,98,30,.2),rgba(240,98,30,.02));
  clip-path:polygon(36% 0,100% 0,100% 100%,0 100%);
  transform:rotate(-7deg);
  pointer-events:none;
}
.page-hero__in{
  position:relative;
  z-index:1;
  max-width:var(--wrap);
  margin:0 auto;
  padding:50px 22px 46px;
}
.page-hero__k{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1.6px;
  color:var(--orange-d);
}
.page-hero h1{
  margin-top:12px;
  font-size:33px;
  line-height:1.32;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.4px;
}
.page-hero .lead{max-width:44em}

.prose{max-width:820px}
.prose h3{
  margin-top:34px;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  line-height:1.5;
}
.prose h3:first-child{margin-top:0}
.prose p{margin-top:13px;font-size:15.5px;color:var(--ink-l);line-height:1.86}
.prose ul,.prose ol{margin-top:13px}
.prose li{
  position:relative;
  padding-left:20px;
  margin-top:9px;
  font-size:15.5px;
  color:var(--ink-l);
  line-height:1.82;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:11px;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--orange);
}
.prose ol{counter-reset:item}
.prose ol li::before{
  counter-increment:item;
  content:counter(item);
  position:absolute;
  left:0;
  top:0;
  color:var(--orange-d);
  font-weight:700;
  font-size:15px;
}
.prose ol li{padding-left:24px}
.tbl-cap{
  margin-top:22px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.tbl-note{
  margin-top:12px;
  font-size:13.5px;
  color:var(--sub);
  line-height:1.76;
}
.tbl-scroll{
  margin-top:12px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  font-size:14.5px;
}
th,td{
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.7;
}
th{background:var(--band);color:var(--ink);font-weight:700}
tr:last-child td{border-bottom:0}
td b{color:var(--ink)}

.prose figure{margin-top:26px}
.prose .fig--wide{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px;
}
.prose .fig--wide img{width:100%;max-width:400px;height:auto;margin:0 auto;border-radius:10px}
.prose .fig--wide figcaption{text-align:center}

.note{
  margin-top:24px;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-left:4px solid var(--orange);
  border-radius:10px;
  padding:18px 20px;
  font-size:14.5px;
  color:var(--ink-l);
  line-height:1.8;
}

.related{margin-top:52px}
.related h2{
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}
.related ul{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.related li{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
}
.related li a{font-size:15.5px;font-weight:700;color:var(--orange-d)}
.related li span{display:block;margin-top:6px;font-size:13.5px;color:var(--sub);line-height:1.7}

@keyframes pop{
  from{opacity:0;transform:scale(.97) translateY(10px)}
  to{opacity:1;transform:none}
}
.js-rise{animation:pop .52s cubic-bezier(.2,.7,.3,1) both}
.js-rise--2{animation-delay:.07s}

.faq-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid var(--line-s);
  background:var(--card);
  color:var(--ink);
  font-size:14.5px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
}
.faq-toggle:hover{border-color:var(--orange);color:var(--orange-d)}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:34px;padding:46px 22px 54px}
  .hero::after{width:520px;height:300px;right:-180px;top:-110px}
  .hero__shot{max-width:290px}
  .stats__in{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .stat:first-child,.stat:nth-child(2){border-top:0}
  .stat:nth-child(3){padding-left:0}
  .cards,.cards--2{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step + .step::before{display:none}
  .shots{grid-template-columns:repeat(2,1fr)}
  .shots__panel{grid-template-columns:1fr;gap:14px}
  .foot__in{grid-template-columns:repeat(2,1fr);gap:26px}
  .related ul{grid-template-columns:1fr}
  .sec{padding:54px 0}
  .page-hero h1{font-size:29px}
}

@media (max-width:620px){
  body{font-size:15.5px}
  .top__in{flex-wrap:wrap;padding:10px 22px 12px;gap:10px}
  .brand{order:1}
  .top .btn--top{order:2;margin-left:auto}
  .nav{
    order:3;
    flex:1 0 100%;
    margin-left:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:4px;
    font-size:12.5px;
    padding-bottom:2px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 8px;flex:0 0 auto}
  .brand__logo{width:34px;height:34px;border-radius:10px}
  .brand__name{font-size:17px}
  .hero__in{padding:38px 22px 48px}
  .hero::after{width:360px;height:230px;right:-170px;top:-90px}
  .hero__ttl{font-size:29px}
  .hero__shot{max-width:266px}
  .hero__cta .btn{width:100%}
  .stats__in{grid-template-columns:1fr}
  .stat{padding:20px 0;border-left:0}
  .stat:first-child{border-top:0}
  .stat:nth-child(2){border-top:1px solid rgba(255,255,255,.14)}
  .sec{padding:44px 0}
  .sec__hd h2{font-size:23px}
  .cards,.cards--2,.steps,.shots{grid-template-columns:1fr}
  .shots__panel ul{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr;gap:24px;padding:42px 22px 20px}
  .cta__in{padding:46px 22px 50px}
  .cta__ttl{font-size:22px}
  .cta__btns .btn{width:100%}
  .page-hero__in{padding:38px 22px 38px}
  .page-hero h1{font-size:25px}
  .prose h3{font-size:17.5px}
  .related ul{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .js-rise{animation:none}
}