* {
  box-sizing:border-box
}
body {
  margin:0;
  color:#fff;
  background:#171717;
  font-family:Inter,'Microsoft YaHei',Arial,sans-serif
}
main {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:url(background.webp) center/auto 100%;
  padding:38px 20px
}
main:before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.73)
}
.inner {
  position:relative;
  text-align:center;
  width:100%;
  max-width:630px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px
}
.brand {
  font-size:19px;
  font-weight:700;
  letter-spacing:5px;
  margin:0;
  color:#fff0e6
}
.brand span {
  color:#ff782e;
  letter-spacing:0;
  margin-right:9px
}
.portrait {
  width:320px;
  max-width:78vw;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center 10%;
  display:block
}
h1 {
  font-size:28px;
  line-height:1.4;
  margin:4px -10px 0;
  font-weight:800
}
.promise {
  margin:0;
  font-size:15px;
  color:#e0dcda
}
.cta {
  border:0;
  border-radius:12px;
  background:#ff5c02;
  color:white;
  min-height:70px;
  width:320px;
  max-width:100%;
  font-family:inherit;
  font-size:21px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center;
  transition:.2s
}
.cta:hover {
  background:#ff740d;
  transform:translateY(-2px)
}
.cta:focus-visible,footer button:focus-visible {
  outline:3px solid white;
  outline-offset:5px
}
.arrows {
  font-size:32px;
  font-weight:400;
  letter-spacing:-8px;
  padding-right:8px
}
.support {
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:#eee
}
.note {
  font-size:11px;
  color:#c1b9b5;
  margin:-16px 0 0
}
footer {
  display:flex;
  justify-content:center;
  gap:25px;
  padding:20px;
  background:#212527
}
footer button {
  border:0;
  background:none;
  color:#ccc;
  font-size:12px;
  cursor:pointer
}
dialog {
  max-width:440px;
  width:calc(100% - 40px);
  border:1px solid #53433b;
  border-radius:18px;
  padding:30px;
  color:#eee;
  background:#24201e;
  line-height:1.8
}
dialog::backdrop {
  background:#000b
}
dialog h2 {
  margin-top:0;
  font-size:23px
}
dialog button {
  border:0;
  background:#ff5c02;
  color:#fff;
  border-radius:8px;
  padding:12px 24px;
  cursor:pointer
}
dialog p {
  font-size:14px
}
@media(max-width:767px) {
  main {
    padding:28px 18px
  }
  .inner {
    gap:18px
  }
  .portrait {
    width:270px;
    max-height:44svh;
    width:auto;
    max-width:78vw
  }
  h1 {
    font-size:24px
  }
  .cta {
    min-height:60px
  }
  .support {
    font-size:14px
  }
  .brand {
    font-size:16px
  }
  .note {
    margin:-8px 0 0
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
.language-switcher {
  position:absolute;
  top:16px;
  right:20px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px
}
.language-switcher select {
  background:#24201e;
  color:#fff;
  border:1px solid #81766f;
  border-radius:6px;
  padding:8px;
  font:inherit
}
.cta {
  text-align:center;
  padding:14px 18px
}
.brand {
  letter-spacing:1px
}
.note {
  line-height:1.6
}
.cta .arrows {
  flex-shrink:0
}
main {
  padding-top:76px
}
.brand span[data-i18n]  {
  color: #fff;
  margin: 0;
}