:root{
  --bg:#FDFAF4;
  --bg2:#F6EEE0;
  --card:#FFFFFF;
  --line:#EADFCB;
  --ink:#2E1A0C;
  --txt:#4A2B16;
  --mut:#7A5B41;
  --aux:#7A2E37;
  --aux-d:#5A2028;
  --aux-l:#A8565F;
  --acc:#2E5FA3;
  --acc-d:#204674;
  --fonts:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--fonts);
  font-size:16px;
  line-height:1.7;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:700;font-family:var(--fonts);color:var(--ink);line-height:1.35}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  font-family:var(--fonts);
  font-size:15.5px;
  font-weight:700;
  line-height:1.2;
  color:#fff;
  text-decoration:none;
  border:0;
  border-radius:3px;
  background:linear-gradient(120deg,var(--acc),var(--acc-d));
  transition:background .22s ease;
}
.btn:hover{background:linear-gradient(120deg,var(--acc-d),#17335A)}
.btn--ghost{
  color:var(--txt);
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--ghost:hover{background:rgba(122,46,55,.07)}

.top{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(253,250,244,.95);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:1120px;
  margin:0 auto;
  padding:11px 22px;
  display:flex;
  align-items:center;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex:0 0 auto;
  text-decoration:none;
}
.brand__logo{width:42px;height:42px}
.brand__name{font-family:var(--fonts);font-size:21px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-wrap:wrap;
}
.nav a{
  display:block;
  padding:7px 11px;
  font-size:14.5px;
  color:var(--txt);
  text-decoration:none;
  border-radius:2px;
}
.nav a:hover{color:var(--aux);background:rgba(122,46,55,.07)}
.nav a[aria-current="page"]{color:var(--aux);box-shadow:inset 0 -2px 0 var(--aux)}
.top__in>.btn{flex:0 0 auto;padding:9px 16px;font-size:14.5px}

@keyframes unfurl{
  from{opacity:0;transform:scaleX(.88)}
  to{opacity:1;transform:none}
}
@keyframes fadein{
  from{opacity:0}
  to{opacity:1}
}

.hero{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px dashed var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:10px;
  background:linear-gradient(180deg,var(--aux),var(--ink));
}
.hero__in{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:44px;
  align-items:center;
  padding-top:58px;
  padding-bottom:66px;
}
.hero__copy{transform-origin:left center;animation:unfurl .6s cubic-bezier(.2,.7,.3,1) both}
.hero h1{font-size:40px;letter-spacing:.01em}
.lead{
  margin:18px 0 0;
  font-size:16px;
  line-height:2;
  color:var(--txt);
  max-width:560px;
}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.note{margin:16px 0 0;font-size:13.5px;line-height:1.8;color:var(--mut)}
.hero__shot{
  position:relative;
  margin:0;
  text-align:center;
  animation:fadein .8s ease both;
}
.hero__shot::before{
  content:"";
  position:absolute;
  right:2%;
  top:-6%;
  width:262px;
  height:262px;
  border:2px dashed rgba(46,95,163,.34);
  border-radius:50%;
}
.hero__shot img{
  position:relative;
  width:100%;
  max-width:320px;
  height:auto;
  margin:0 auto;
  box-shadow:0 0 0 1px var(--line);
}

.stats{background:linear-gradient(102deg,var(--aux-d),var(--aux) 58%,#8C3A43);color:#FDF7EE}
.stats__in{
  max-width:1120px;
  margin:0 auto;
  padding:0 22px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
}
.stat{
  padding:26px 14px 28px;
  border-left:1px dashed rgba(253,247,238,.24);
  animation:fadein .7s ease both;
}
.stat:first-child{border-left:0;padding-left:0}
.stat:nth-child(2){animation-delay:.05s}
.stat:nth-child(3){animation-delay:.1s}
.stat:nth-child(4){animation-delay:.15s}
.stat:nth-child(5){animation-delay:.2s}
.stat:nth-child(6){animation-delay:.25s}
.stat__n{display:block;font-family:var(--fonts);font-weight:700;font-size:21px;color:#FFF6E8;margin-bottom:5px}
.stat__t{display:block;font-size:13.5px;line-height:1.7;color:rgba(253,247,238,.84)}

.sec{padding:64px 0}
.sec--alt{background:var(--bg2)}
.sec__head{max-width:780px;transform-origin:left center;animation:unfurl .6s cubic-bezier(.2,.7,.3,1) both}
.sec h2,.prose h2,.cta__t{font-size:27px}
.sec h2{
  position:relative;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.sec h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:58px;
  height:3px;
  background:var(--acc);
}
.sec__sub{margin:14px 0 0;font-size:15px;line-height:1.9;color:var(--mut)}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.card{
  padding:24px 22px 26px;
  background:var(--card);
  border-top:3px solid var(--aux);
  box-shadow:0 0 0 1px var(--line);
  animation:fadein .6s ease both;
  transition:border-color .24s ease,transform .24s ease;
}
.card:hover{border-top-color:var(--acc);transform:translateY(-3px)}
.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.12s}
.card:nth-child(4){animation-delay:.18s}
.card:nth-child(5){animation-delay:.24s}
.card:nth-child(6){animation-delay:.3s}
.ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  color:var(--acc);
  background:rgba(46,95,163,.1);
  border-radius:6px;
}
.ic svg{width:21px;height:21px}
.card__t{font-size:19px;margin:16px 0 9px}
.card__d{margin:0;font-size:14.5px;line-height:1.9;color:var(--mut)}

.shots{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:22px;
  margin-top:32px;
  align-items:start;
}
.shot{margin:0;animation:fadein .6s ease both}
.shot:nth-child(2){animation-delay:.07s}
.shot:nth-child(3){animation-delay:.14s}
.shot:nth-child(4){animation-delay:.21s}
.shot:nth-child(5){animation-delay:.28s}
.shot__fig{padding:7px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.shot__fig img{width:100%;height:auto}
.shot__cap{margin-top:11px;font-size:13px;line-height:1.75;color:var(--mut)}

.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.door{
  display:flex;
  flex-direction:column;
  padding:24px 22px 20px;
  background:var(--card);
  border-bottom:3px solid var(--acc);
  box-shadow:0 0 0 1px var(--line);
  text-decoration:none;
  animation:fadein .6s ease both;
  transition:border-color .24s ease,background .24s ease;
}
.door:hover{border-bottom-color:var(--aux);background:#FFFCF6}
.door:nth-child(2){animation-delay:.07s}
.door:nth-child(3){animation-delay:.14s}
.door:nth-child(4){animation-delay:.21s}
.door__t{font-size:19px;margin-bottom:10px}
.door__d{margin:0;font-size:14.5px;line-height:1.9;color:var(--mut)}
.door__go{
  margin-top:18px;
  font-size:14px;
  font-weight:700;
  color:var(--acc);
}
.door__go::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-1px);
}
.door:hover .door__go{color:var(--aux)}

.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.voice{
  padding:24px 22px 20px;
  background:var(--card);
  box-shadow:0 0 0 1px var(--line);
  animation:fadein .6s ease both;
}
.voice:nth-child(2){animation-delay:.08s}
.voice:nth-child(3){animation-delay:.16s}
.voice__q{margin:0 0 11px;font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.6}
.voice__b{margin:0;font-size:14.5px;line-height:1.9;color:var(--mut)}
.voice__who{margin:16px 0 0;font-size:13px;color:var(--aux);letter-spacing:.02em}

.qa{display:grid;gap:12px;margin-top:22px}
.qa__item{
  background:var(--card);
  box-shadow:0 0 0 1px var(--line);
  border-left:3px solid var(--aux-l);
  animation:fadein .55s ease both;
}
.qa__item[open]{border-left-color:var(--acc)}
.qa__q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  font-size:15.5px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.qa__q::-webkit-details-marker{display:none}
.qa__q::after{content:"+";flex:0 0 auto;color:var(--acc);font-weight:700}
.qa__item[open] .qa__q::after{content:"–"}
.qa__a{
  margin:0;
  padding:0 22px 18px;
  font-size:14.5px;
  line-height:1.95;
  color:var(--mut);
}
.qa__a a{color:var(--acc);text-underline-offset:3px}

.page-hero{background:var(--bg2);border-bottom:1px dashed var(--line)}
.page-hero__in{
  max-width:1120px;
  margin:0 auto;
  padding:46px 22px 42px;
  transform-origin:left center;
  animation:unfurl .6s cubic-bezier(.2,.7,.3,1) both;
}
.page-hero h1{font-size:32px}
.page-hero__lead{
  margin:16px 0 0;
  max-width:820px;
  font-size:15.5px;
  line-height:2;
  color:var(--txt);
}

.prose{max-width:820px}
.prose h2{
  position:relative;
  margin:46px 0 14px;
  padding-bottom:11px;
  border-bottom:1px solid var(--line);
}
.prose h2:first-child{margin-top:0}
.prose h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:58px;
  height:3px;
  background:var(--acc);
}
.prose p{margin:0 0 15px;font-size:15.5px;line-height:2;color:var(--txt)}
.prose a{color:var(--acc);text-underline-offset:3px}

.fig{margin:26px auto;max-width:320px}
.fig img{
  width:100%;
  max-width:320px;
  height:auto;
  margin:0 auto;
  box-shadow:0 0 0 1px var(--line);
}
.fig figcaption{
  margin-top:11px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--mut);
  text-align:center;
}

.cta{background:linear-gradient(120deg,var(--ink),var(--aux) 72%,#8C3A43);text-align:center}
.cta__in{max-width:1120px;margin:0 auto;padding:58px 22px 62px}
.cta__t{color:#FDF7EE;animation:fadein .7s ease both}
.cta__p{
  max-width:640px;
  margin:14px auto 26px;
  font-size:15px;
  line-height:1.95;
  color:#F0DCCB;
}
.cta .btn{color:#FFFFFF;background:linear-gradient(120deg,#3C77C4,var(--acc));animation:fadein .7s ease both}
.cta .btn:hover{background:linear-gradient(120deg,var(--acc),var(--acc-d))}
.cta .btn--ghost{color:#FDF7EE;background:transparent;box-shadow:inset 0 0 0 1px rgba(253,247,238,.55)}
.cta .btn--ghost:hover{background:rgba(253,247,238,.12)}

.foot{background:var(--ink);color:#C7B3A0}
.foot__in{
  max-width:1120px;
  margin:0 auto;
  padding:50px 22px 30px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:28px;
}
.foot__brand{font-family:var(--fonts);font-weight:700;font-size:19px;color:#FBF4E9;margin-bottom:12px}
.foot__d{margin:0;font-size:14px;line-height:1.95;color:#C7B3A0}
.foot__h{margin:0 0 12px;font-size:14.5px;color:#F0E2D2;letter-spacing:.05em}
.foot__list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.foot__list a{color:#C7B3A0;font-size:14px;text-decoration:none}
.foot__list a:hover{color:#FDF7EE;text-decoration:underline}
.foot__list li{font-size:14px;line-height:1.7}
.foot__end{max-width:1120px;margin:0 auto;padding:20px 22px 36px;border-top:1px dashed rgba(199,179,160,.28)}
.foot__note{margin:0 0 9px;font-size:13px;line-height:1.85;color:#B39F8C}
.foot__copy{margin:0;font-size:13px;color:#B39F8C}

@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:34px;padding-top:44px;padding-bottom:50px}
  .hero h1{font-size:32px}
  .hero__shot::before{width:210px;height:210px;right:12%}
  .stats__in{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4){border-left:0;padding-left:0}
  .feat{grid-template-columns:repeat(2,1fr)}
  .doors{grid-template-columns:repeat(2,1fr)}
  .voices{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  .sec{padding:52px 0}
  .sec h2,.prose h2,.cta__t{font-size:24px}
  .page-hero h1{font-size:27px}
}

@media (max-width:620px){
  .top__in{flex-wrap:wrap;row-gap:8px}
  .brand{order:1}
  .top__in>.btn{order:2;margin-left:auto}
  .nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px}
  .nav a{padding:6px 9px;font-size:13.5px;white-space:nowrap}
  .hero__in{padding-top:34px;padding-bottom:40px}
  .hero h1{font-size:26px;line-height:1.4}
  .lead{font-size:15px;line-height:1.95}
  .hero__act{gap:10px}
  .hero__act .btn{flex:1 1 auto}
  .hero__shot img{max-width:280px}
  .hero__shot::before{width:160px;height:160px;right:6%;top:-4%}
  .stats__in{grid-template-columns:repeat(2,1fr)}
  .stat{padding:20px 12px 22px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .feat,.doors{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr);gap:16px}
  .sec{padding:42px 0}
  .sec h2,.prose h2,.cta__t{font-size:21px}
  .page-hero__in{padding:32px 22px 30px}
  .page-hero h1{font-size:23px}
  .prose p,.lead{font-size:15px}
  .qa__q{padding:14px 16px;font-size:15px}
  .qa__a{padding:0 17px 16px}
  .cta__in{padding:44px 22px 48px}
  .foot__in{grid-template-columns:1fr;gap:22px}
}

@media (prefers-reduced-motion:reduce){
  .hero__copy,.hero__shot,.sec__head,.page-hero__in,.card,.shot,.door,.voice,.qa__item,.stat,.cta__t,.cta__p,.cta .btn{
    animation:none;
    opacity:1;
    transform:none;
  }
}