body {
  padding: 0;
  margin: 0;
  background-color: #130d0a;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #fff;
}

#hero {
  height: 800px;
  overflow: hidden;
  position: relative;
  background: #130d0a url("../images/full-illustration.png") no-repeat center bottom/cover;
}

#content { background-color: #130d0a; }

.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px;
  position: fixed;
  z-index: -1;
}

#hero-mobile {
  display: none;
  background: #130d0a url("../images/full-illustration.png") no-repeat center bottom/cover;
  height: 320px;
}

.container { width: min(1180px, calc(100% - 64px)); padding: 0; }
.first-section { padding: 90px 0 110px; }
.text-header { font-size: 50px; text-align: center; }
h1 {
  margin: 0;
  font-family: "Playfair Display", "Songti SC", "STSong", serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
}
p { margin: 0; color: #d8cec6; font-size: 17px; line-height: 1.9; }
.content-heading {
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.content-kicker {
  margin-bottom: 18px;
  color: #a99b8e;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 12px;
  font-weight: 600;
}
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 80px;
  padding-top: 42px;
  align-items: start;
}
.content-intro { max-width: 720px; }
.content-intro p + p { margin-top: 14px; }
.content-actions { padding-top: 3px; }

#hero,
.layer {
  min-height: 800px;
  max-width: 1900px;
  margin: 0 auto;
  overflow: hidden;
}

.layer-bg {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_bg.jpg");
}
.layer-1 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_03.png");
  background-position: left bottom;
}
.layer-2 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_02.png");
}
.layer-3 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_man.png");
  background-position: right bottom;
}
.layer-4 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_01.png");
}
.layer-overlay {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_overlay.png");
}

.epay-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 12px;
}
.epay-button {
  display: inline-flex;
  min-height: 46px;
  padding: 11px 20px;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.epay-button:hover,
.epay-button:focus { color: #130d0a; background: #ede0d5; text-decoration: none; }
.epay-button-primary { color: #130d0a; background: #ede0d5; }
.epay-button-primary:hover,
.epay-button-primary:focus { background: #fff; }
.epay-text-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  color: #c9beb5;
  border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: 14px;
  text-decoration: none;
}
.epay-text-link:hover,
.epay-text-link:focus { color: #fff; border-color: rgba(255,255,255,.6); text-decoration: none; }

@media only screen and (max-width: 991px) {
  .container { width: min(820px, calc(100% - 48px)); }
  .first-section { padding: 68px 0 84px; }
  .content-layout { grid-template-columns: 1fr; gap: 34px; }
  .content-actions { max-width: 440px; }
}

@media only screen and (max-width: 768px) {
  #hero { display: none; }
  #hero-mobile { display: block; }
  .container { width: calc(100% - 36px); }
  .first-section { padding: 44px 0 64px; }
  .content-heading { padding-bottom: 26px; }
  .content-kicker { margin-bottom: 12px; font-size: 11px; }
  h1 { font-size: 36px; overflow-wrap: anywhere; }
  .content-layout { gap: 30px; padding-top: 28px; }
  p { font-size: 15px; line-height: 1.8; }
  .content-actions { max-width: none; }
  .epay-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .epay-button { min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .epay-text-link { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer { transform: none !important; }
}