:root{
  --bg:#F6F3EE;
  --bg2:#EAE6DE;
  --card:#FFFFFF;
  --ink:#12211F;
  --ink2:#1E3A36;
  --pri:#1E8F7E;
  --pri-d:#146B5E;
  --acc:#D4663C;
  --sand:#E0A83C;
  --txt:#2A2B28;
  --mut:#6E6B62;
  --line:#DDD7CB;
  --wrap:1120px;
  --r:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(135deg,rgba(30,143,126,.05) 0 1px,transparent 1px 15px);
  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,ul,ol,dl,dd,figure,figcaption,blockquote,table{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--pri-d)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:3px;border:1px solid transparent;
  font-size:15.5px;font-weight:600;text-decoration:none;line-height:1.2;
  transition:background .25s,color .25s,border-color .25s;
}
.btn--pri{background:linear-gradient(135deg,var(--acc),#BE552D);color:#fff}
.btn--pri:hover{background:linear-gradient(135deg,#BE552D,#9E4620)}
.btn--ghost{background:transparent;color:var(--txt);border-color:#C6BFB1}
.btn--ghost:hover{border-color:var(--pri);color:var(--pri-d);background:rgba(30,143,126,.07)}

.top{position:sticky;top:0;z-index:60;background:rgba(246,243,238,.95);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:18px;padding:11px 22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand__ico{width:42px;height:42px;border-radius:5px}
.brand__txt{font-size:19px;font-weight:700;letter-spacing:1px}
.nav{display:flex;align-items:center;gap:6px;flex:1 1 auto;flex-wrap:wrap}
.nav a{padding:6px 12px;border-radius:3px;color:#4B4A44;text-decoration:none;font-size:15px;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{color:var(--pri-d);background:rgba(30,143,126,.09)}
.nav a[aria-current="page"]{color:#fff;background:var(--pri-d)}
.top .btn{color:#fff;flex:0 0 auto}

.hero{padding:52px 0 58px;background:linear-gradient(180deg,rgba(30,143,126,.08),rgba(224,168,60,.05) 70%,rgba(246,243,238,0))}
.hero__in{display:grid;grid-template-columns:1fr 340px;gap:46px;align-items:center}
.kicker{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:2px;
  color:#8A5A12;background:rgba(224,168,60,.22);border-radius:2px;padding:5px 12px;margin-bottom:16px;
}
.hero h1{font-size:40px;line-height:1.28;letter-spacing:.5px;color:var(--ink);margin-bottom:16px}
.lead{font-size:16.5px;color:#454640;margin-bottom:24px;max-width:600px}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.cta-note{font-size:13.5px;color:var(--mut)}
.hero__shot{margin:0}
.hero__board{position:relative;background:var(--ink);border-radius:6px;padding:18px}
.hero__board::before{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:23px 23px;
}
.hero__board img{position:relative;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:3px}

.stats{background:var(--ink);color:#EFEDE7}
.stats__in{padding-top:40px;padding-bottom:40px}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats__cell{padding:0 20px;border-left:1px solid rgba(255,255,255,.14);text-align:center}
.stats__cell:first-child{border-left:0}
.stats__n{display:block;font-size:29px;font-weight:700;color:var(--sand);letter-spacing:.5px}
.stats__t{display:block;font-size:13.5px;color:rgba(239,237,231,.72);margin-top:4px}

.sec{padding:70px 0}
.sec--alt{background:var(--bg2)}
.sec h2{position:relative;padding-left:22px;font-size:29px;line-height:1.4;color:var(--ink);letter-spacing:.5px}
.sec h2::before{
  content:"";position:absolute;left:0;top:.2em;width:9px;height:1.1em;
  background:linear-gradient(180deg,var(--pri),var(--sand));transform:skewX(-14deg);
}
.sub{color:var(--mut);font-size:15px;margin:8px 0 30px}
.sec h2+.duo,.sec h2+.strip,.sec h2+.deep,.sec h2+.voice,.sec h2+.qas,.sec h2+.prose{margin-top:30px}

.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.duo__item{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.duo__ico{
  flex:0 0 48px;height:48px;border-radius:3px;background:var(--ink2);color:var(--sand);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:1px;
}
.duo__item h3{font-size:17.5px;color:var(--ink);margin-bottom:6px}
.duo__item p{font-size:14.8px;color:var(--mut);line-height:1.75}

.strip{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 16px;scroll-snap-type:x mandatory;cursor:grab}
.strip__item{flex:0 0 186px;scroll-snap-align:start}
.strip__item img{width:100%;height:auto;border-radius:3px;box-shadow:0 0 0 1px var(--line),0 10px 22px rgba(18,33,31,.11)}
.strip__item figcaption{font-size:13.2px;color:var(--mut);line-height:1.6;margin-top:10px}

.deep{display:grid;gap:13px}
.deep__item{
  display:grid;grid-template-columns:76px 1fr 22px;align-items:center;gap:18px;
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--pri);
  border-radius:var(--r);padding:21px 24px;text-decoration:none;color:var(--txt);
  transition:border-color .25s,box-shadow .25s;
}
.deep__item:hover{border-left-color:var(--acc);box-shadow:0 8px 20px rgba(18,33,31,.08)}
.deep__no{font-size:34px;font-weight:700;line-height:1;color:var(--pri);opacity:.42;letter-spacing:1px}
.deep__body strong{display:block;font-size:18px;color:var(--ink);margin-bottom:5px}
.deep__body em{display:block;font-style:normal;font-size:14.6px;color:var(--mut);line-height:1.7}
.deep__arw{font-size:24px;color:var(--acc);text-align:right}

.voice{display:grid;gap:20px}
.voice__item{border-left:3px solid var(--sand);padding:2px 0 2px 20px}
.voice__item p{font-size:16.4px;color:#35362F;margin-bottom:8px}
.voice__item cite{font-style:normal;font-size:13.8px;color:var(--mut)}

.qas{display:grid;gap:11px}
.qas details,.qa details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 20px}
.qas details[open],.qa details[open]{border-color:#C6BFB1}
summary{cursor:pointer;list-style:none;font-weight:600;font-size:16px;color:var(--ink);padding:16px 34px 16px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:13px;font-size:21px;font-weight:700;color:var(--acc)}
details[open]>summary::after{content:"-"}
.qas details p,.qa details p{font-size:14.9px;color:var(--mut);line-height:1.8;padding-bottom:18px;margin:0}

.cta{background:linear-gradient(135deg,var(--ink),var(--ink2));color:#F2F0EA;padding:54px 0}
.cta__in{text-align:center}
.cta h2{font-size:28px;color:#fff;margin-bottom:10px;letter-spacing:.5px}
.cta__note{color:rgba(242,240,234,.74);font-size:14.8px;margin-bottom:24px}
.cta .btn{color:#fff}
.cta .btn--ghost{color:#F2F0EA;border-color:rgba(242,240,234,.48);background:transparent}
.cta .btn--ghost:hover{color:#fff;border-color:var(--sand);background:rgba(255,255,255,.09)}

.phead{padding:44px 0 34px;background:linear-gradient(180deg,rgba(30,143,126,.10),rgba(30,143,126,0)),var(--bg);border-bottom:1px solid var(--line)}
.phead h1{font-size:34px;line-height:1.32;color:var(--ink);margin-bottom:12px;letter-spacing:.5px}
.crumb{font-size:13.5px;color:var(--mut);margin-bottom:14px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--pri-d)}

.prose p{font-size:16.2px;color:#3C3D36;margin-bottom:18px}
.prose h3{font-size:20px;color:var(--ink);margin:34px 0 12px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{font-size:15.8px;color:#3C3D36;margin-bottom:9px}
.prose a{color:var(--pri-d);text-decoration:underline;text-underline-offset:3px}

.steps{counter-reset:st;list-style:none;padding:0;margin:0;display:grid;gap:13px}
.steps li{counter-increment:st;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:19px 22px 19px 76px}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:22px;top:17px;font-size:22px;font-weight:700;color:var(--acc);letter-spacing:1px}
.steps b{display:block;color:var(--ink);font-size:16.6px;margin-bottom:5px}
.steps span{display:block;font-size:14.9px;color:var(--mut);line-height:1.75}

.kv{display:grid;grid-template-columns:170px 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 22px}
.kv dt{background:var(--bg2);padding:13px 16px;font-size:15px;font-weight:600;color:var(--ink)}
.kv dd{background:var(--card);padding:13px 16px;font-size:14.9px;color:var(--mut);line-height:1.7}

.note{background:#FFF7E6;border:1px solid #EBD8AC;border-left:4px solid var(--sand);border-radius:var(--r);padding:16px 20px;margin:0 0 24px;font-size:15.2px;color:#5B4A22;line-height:1.78}

.wide{margin:0 auto 26px;width:100%;max-width:400px}
.wide img{width:100%;height:auto;border-radius:3px;box-shadow:0 0 0 1px var(--line),0 12px 26px rgba(18,33,31,.12)}
.wide figcaption{font-size:13.4px;color:var(--mut);line-height:1.65;margin-top:10px;text-align:center}

.foot{background:var(--ink);color:rgba(239,237,231,.78);padding:46px 0 30px;font-size:14.4px}
.foot__top{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px}
.foot__brand{display:flex;align-items:center;gap:9px;color:#fff;font-size:17px;font-weight:700;letter-spacing:1px}
.foot__brand img{width:34px;height:34px;border-radius:4px}
.foot__desc{max-width:640px;font-size:14px;line-height:1.8}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot__nav a{color:rgba(239,237,231,.78);text-decoration:none}
.foot__nav a:hover{color:var(--sand)}
.foot__dis{background:rgba(255,255,255,.06);border-left:3px solid var(--sand);padding:12px 16px;margin-bottom:16px;font-size:13.4px;line-height:1.75}
.foot__cr{color:rgba(239,237,231,.55);font-size:12.8px}

.wipe{animation:wipe .62s cubic-bezier(.22,.72,.28,1) both}
@keyframes wipe{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.duo__item:nth-child(2),.deep__item:nth-child(2){animation-delay:.07s}
.duo__item:nth-child(3),.deep__item:nth-child(3){animation-delay:.14s}
.duo__item:nth-child(4){animation-delay:.21s}
.duo__item:nth-child(5){animation-delay:.28s}
.duo__item:nth-child(6){animation-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .wipe{animation:none;opacity:1;clip-path:none}
}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:33px}
  .hero__shot{max-width:340px;margin:0 auto}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stats__cell{padding:14px 16px;border-left:0}
  .stats__cell:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
  .duo{grid-template-columns:1fr}
  .sec{padding:56px 0}
  .sec h2{font-size:25px}
  .deep__item{grid-template-columns:60px 1fr 18px;gap:14px;padding:18px 18px}
  .deep__no{font-size:28px}
  .phead h1{font-size:29px}
}

@media (max-width:620px){
  .top__in{flex-wrap:wrap;gap:8px 12px;padding:10px 18px}
  .brand{order:1}
  .top .btn{order:2;margin-left:auto;padding:9px 16px;font-size:14.5px}
  .nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:4px}
  .nav a{padding:5px 8px;font-size:13.5px}
  .wrap{padding:0 18px}
  .hero{padding:36px 0 44px}
  .hero h1{font-size:27px}
  .lead{font-size:15.6px}
  .hero__board{padding:14px}
  .hero__shot{max-width:290px}
  .sec{padding:44px 0}
  .sec h2{font-size:22px;padding-left:16px}
  .sec h2::before{width:7px}
  .sub{margin:8px 0 22px;font-size:14.2px}
  .strip__item{flex:0 0 154px}
  .deep__item{grid-template-columns:1fr 16px;gap:10px;padding:16px 16px}
  .deep__no{grid-column:1/-1;font-size:22px}
  .kv{grid-template-columns:1fr}
  .steps li{padding:17px 18px 17px 62px}
  .steps li::before{left:18px;font-size:19px}
  .cta h2{font-size:23px}
  .voice__item{padding-left:15px}
  .voice__item p{font-size:15.6px}
  .wide{max-width:300px}
}