html, body, .top-wrap, .footer, .content, .global, .pop {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "PingFang TC", "Hiragino Sans GB",
    "Microsoft YaHei", "Microsoft JhengHei", "Noto Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}

/* ---------- Header: floating glass bar ---------- */
.top-wrap {
  top: 0.16rem !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: calc(100% - 0.48rem) !important;
  max-width: 17.6rem;
  min-width: 1150px !important;
  height: 0.74rem !important;
  padding: 0 0.14rem 0 0.1rem;
  box-sizing: border-box;
  border-radius: 0.37rem;
  background: linear-gradient(180deg, rgba(30, 27, 20, 0.72), rgba(14, 13, 10, 0.78)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(223, 172, 73, 0.28);
  box-shadow: 0 0.12rem 0.36rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 236, 190, 0.08);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.top-wrap::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 128, 0.85), transparent);
  background-size: 200% 100%;
  animation: pvHairline 6s linear infinite;
  pointer-events: none;
}
html.pv-scrolled .top-wrap {
  background: linear-gradient(180deg, rgba(24, 22, 16, 0.94), rgba(10, 9, 7, 0.96)) !important;
  border-color: rgba(223, 172, 73, 0.42);
  box-shadow: 0 0.14rem 0.4rem rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 236, 190, 0.1);
}
@keyframes pvHairline {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Logo: floating, glowing, with a light sweep */
.top-wrap .logo {
  position: relative;
  flex: none;
  width: 1.62rem !important;
  height: 0.6rem !important;
  margin: 0 0 0 0.16rem !important;
  background: url(/static/pv/logo.png) left center / contain no-repeat !important;
  cursor: pointer;
  animation: pvFloat 4.5s ease-in-out infinite, pvGlow 4.5s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.top-wrap .logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 225, 0.9) 50%, transparent 65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url(/static/pv/logo.png) left center / contain no-repeat;
  mask: url(/static/pv/logo.png) left center / contain no-repeat;
  animation: pvShine 5s ease-in-out infinite;
  pointer-events: none;
}
.top-wrap .logo:hover { transform: scale(1.06); }
@keyframes pvFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.03rem; }
}
@keyframes pvGlow {
  0%, 100% { filter: drop-shadow(0 0 0.02rem rgba(255, 196, 90, 0.25)); }
  50% { filter: drop-shadow(0 0 0.1rem rgba(255, 196, 90, 0.6)); }
}
@keyframes pvShine {
  0%, 55% { background-position: 150% 0; }
  85%, 100% { background-position: -60% 0; }
}

/* Nav */
.top-wrap .nav {
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.top-wrap .nav span,
.top-wrap .nav a {
  display: inline-block !important;
  padding: 0.08rem 0.04rem;
  color: #d8d2b4;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.top-wrap .nav span::before,
.top-wrap .nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.06rem;
  width: 0;
  height: 0.02rem;
  border-radius: 0.02rem;
  background: linear-gradient(90deg, transparent, #f0c46a, transparent);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.top-wrap .nav span:hover,
.top-wrap .nav a:hover {
  color: #f3d58f;
  text-shadow: 0 0 0.12rem rgba(240, 196, 106, 0.45);
}
.top-wrap .nav span:hover::before,
.top-wrap .nav a:hover::before { width: 0.4rem; }
.top-wrap .nav span.act,
.top-wrap .nav a.act {
  color: #f0c46a;
  text-shadow: 0 0 0.14rem rgba(240, 196, 106, 0.5);
}
.top-wrap .nav span.act::after,
.top-wrap .nav a.act::after {
  content: "";
  position: absolute;
  bottom: -0.06rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.4rem;
  border-bottom: 0.02rem solid #f0c46a;
}
.top-wrap .nav em {
  margin: 0 0.18rem !important;
  color: rgba(210, 214, 185, 0.22);
}
.top-wrap .top-right { gap: 0.14rem; }
.top-wrap .global { margin-right: 0 !important; }
.top-wrap .btns a.pv-x, .top-wrap .btns a.pv-fb, .top-wrap .btns a.pv-dc { transition: transform 0.25s ease, filter 0.25s ease; }
.top-wrap .btns a.pv-x:hover, .top-wrap .btns a.pv-fb:hover, .top-wrap .btns a.pv-dc:hover { transform: translateY(-0.02rem); filter: brightness(1.25); }

/* Language menu on inner pages */
.pv-global ul li { cursor: pointer; }
.pv-global ul li.on { color: #f0c46a; }

/* ---------- Footer ---------- */
.footer.pv-footer {
  height: auto !important;
  display: block !important;
  padding: 0.55rem 0 0.3rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(223, 172, 73, 0.12), transparent 60%),
    linear-gradient(180deg, #0e0d0a 0%, #050504 100%) !important;
  border-top: 1px solid rgba(223, 172, 73, 0.22);
  color: #a9a288;
  font-size: 0.14rem;
}
.footer.pv-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 6rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #f0c46a, transparent);
}
.pv-f-inner {
  width: 12.5rem;
  margin: 0 auto;
}
.pv-f-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 0.4rem;
}
.pv-f-brand { width: 3.6rem; }
.pv-f-logo {
  width: 1.9rem;
  height: 0.72rem;
  background: url(/static/pv/logo.png) left center / contain no-repeat;
  filter: drop-shadow(0 0 0.1rem rgba(255, 196, 90, 0.3));
}
.pv-f-brand p {
  margin-top: 0.16rem;
  line-height: 0.24rem;
  color: #8e8871;
}
.pv-f-col { min-width: 1.8rem; }
.pv-f-col h4 {
  font-size: 0.14rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  color: #e8c77e;
  margin-bottom: 0.18rem;
}
.pv-f-col a {
  display: block;
  color: #a9a288;
  line-height: 0.34rem;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.pv-f-col a:hover { color: #f0c46a; transform: translateX(0.04rem); }
.pv-f-social {
  display: flex !important;
  align-items: center;
  gap: 0.1rem;
}
.pv-f-social + .pv-f-social { margin-top: 0.1rem; }
.pv-f-social i {
  display: inline-flex;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  border: 1px solid rgba(223, 172, 73, 0.4);
  align-items: center;
  justify-content: center;
}
.pv-f-social svg { width: 0.14rem; height: 0.14rem; fill: currentColor; }
.pv-f-social svg path[d^="M13.5"] { transform: scale(1.25); transform-origin: center; }
.pv-f-stores { display: flex; flex-direction: column; gap: 0.1rem; }
.pv-f-store {
  display: flex !important;
  align-items: center;
  gap: 0.1rem;
  width: 2rem;
  padding: 0.07rem 0.14rem;
  line-height: 0.2rem !important;
  border-radius: 0.1rem;
  border: 1px solid rgba(223, 172, 73, 0.25);
  background: rgba(255, 255, 255, 0.02);
}
.pv-f-store svg { width: 0.2rem; height: 0.2rem; fill: currentColor; flex: none; }
.pv-f-store small { display: block; font-size: 0.11rem; color: #7b765f; }
.pv-f-store.live { border-color: rgba(240, 196, 106, 0.6); color: #f0d79a; }
.pv-f-store.soon { opacity: 0.6; pointer-events: none; }
.pv-f-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 0.24rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.12rem;
  color: #6f6a56;
}
.page5 { height: calc(100vh + 3.3rem) !important; }
.content .cont-box { margin-bottom: 4.2rem !important; }

/* ---------- Inner pages (download / litepaper) ---------- */
.content.pv-page { overflow: clip !important; display: flow-root; }
.pv-page .cont-box {
  min-height: 0 !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(26, 24, 18, 0.96), rgba(16, 15, 11, 0.97)) !important;
  border: 1px solid rgba(223, 172, 73, 0.3) !important;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
}
.pv-page .cont-type {
  text-shadow: 0 0 0.2rem rgba(210, 162, 69, 0.35);
}

/* Download */
.pv-dl { padding: 0.5rem 0.7rem 0.6rem; color: #efe6c6; }
.pv-dl-hero { text-align: center; margin-bottom: 0.45rem; }
.pv-dl-hero h1 {
  font-size: 0.4rem;
  color: #f4e7bd;
  letter-spacing: 0.01rem;
}
.pv-dl-hero p { margin-top: 0.12rem; font-size: 0.17rem; color: #a59e82; }
.pv-dl-cards {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 0.28rem;
  align-items: stretch;
}
.pv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.42rem 0.3rem 0.36rem;
  border-radius: 0.2rem;
  border: 1px solid rgba(223, 172, 73, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pv-card:hover { transform: translateY(-0.04rem); }
.pv-card .pv-ic {
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.22rem;
}
.pv-card .pv-ic svg { width: 0.44rem; height: 0.44rem; fill: #cfc8ad; }
.pv-card h3 { font-size: 0.26rem; color: #f4e7bd; }
.pv-card p { margin-top: 0.08rem; font-size: 0.15rem; color: #948d73; min-height: 0.44rem; line-height: 0.22rem; }
.pv-badge {
  margin-top: auto;
  display: inline-block;
  padding: 0.08rem 0.26rem;
  border-radius: 0.4rem;
  font-size: 0.14rem;
  letter-spacing: 0.01rem;
  color: #bdb597;
  border: 1px dashed rgba(223, 172, 73, 0.4);
  background: rgba(223, 172, 73, 0.06);
}
.pv-card.soon .pv-ic svg { fill: #8b8570; }
.pv-card.primary {
  border-color: rgba(240, 196, 106, 0.65);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240, 196, 106, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(60, 48, 22, 0.55), rgba(24, 20, 12, 0.6));
  box-shadow: 0 0 0.4rem rgba(240, 196, 106, 0.18), inset 0 1px 0 rgba(255, 230, 170, 0.15);
  animation: pvPulse 3.2s ease-in-out infinite;
}
.pv-card.primary .pv-ic {
  background: radial-gradient(circle, rgba(164, 198, 57, 0.28), rgba(164, 198, 57, 0.06));
  border-color: rgba(164, 198, 57, 0.5);
}
.pv-card.primary .pv-ic svg { fill: #b8d65a; }
.pv-card.primary .pv-rec {
  position: absolute;
  top: -0.14rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.04rem 0.18rem;
  border-radius: 0.3rem;
  font-size: 0.12rem;
  font-weight: bold;
  color: #2a1f08;
  background: linear-gradient(180deg, #ffe39a, #e1a93f);
  white-space: nowrap;
}
@keyframes pvPulse {
  0%, 100% { box-shadow: 0 0 0.3rem rgba(240, 196, 106, 0.14), inset 0 1px 0 rgba(255, 230, 170, 0.15); }
  50% { box-shadow: 0 0 0.6rem rgba(240, 196, 106, 0.32), inset 0 1px 0 rgba(255, 230, 170, 0.15); }
}
.pv-btn {
  position: relative;
  overflow: hidden;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  height: 0.62rem;
  border-radius: 0.14rem;
  font-size: 0.2rem;
  font-weight: bold;
  color: #2a1f08 !important;
  text-decoration: none;
  background: linear-gradient(180deg, #ffe7a6 0%, #f2bf57 45%, #d99a2b 100%);
  box-shadow: 0 0.08rem 0.24rem rgba(217, 154, 43, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.pv-btn svg { width: 0.22rem; height: 0.22rem; fill: currentColor; }
.pv-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg);
  animation: pvBtnShine 3.2s ease-in-out infinite;
}
.pv-btn:hover { transform: translateY(-0.02rem); filter: brightness(1.06); }
@keyframes pvBtnShine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}
.pv-meta { margin-top: 0.14rem; font-size: 0.13rem; color: #8d866c; }
.pv-auto { margin-top: 0.1rem; font-size: 0.13rem; color: #f0c46a; display: none; }
.pv-steps {
  margin-top: 0.5rem;
  padding: 0.36rem 0.4rem;
  border-radius: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
}
.pv-steps h2 { font-size: 0.22rem; color: #e8c77e; margin-bottom: 0.26rem; }
.pv-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.pv-steps li { display: flex; gap: 0.16rem; align-items: flex-start; }
.pv-steps li p b { color: #f0c46a; font-weight: bold; }
.pv-steps li > b {
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.18rem;
  color: #2a1f08;
  background: linear-gradient(180deg, #ffe39a, #d99a2b);
  box-shadow: 0 0 0.16rem rgba(240, 196, 106, 0.3);
}
.pv-steps li p { font-size: 0.15rem; line-height: 0.24rem; color: #cfc6a6; }

/* Litepaper */
.pv-lite-head { text-align: center; padding: 0.5rem 0.8rem 0.36rem; border-bottom: 1px solid rgba(223, 172, 73, 0.18); }
.pv-lite-head .pv-chip {
  display: inline-block;
  padding: 0.05rem 0.2rem;
  border-radius: 0.3rem;
  font-size: 0.13rem;
  letter-spacing: 0.02rem;
  color: #f0c46a;
  border: 1px solid rgba(240, 196, 106, 0.45);
  background: rgba(240, 196, 106, 0.07);
}
.pv-lite-head h1 { margin-top: 0.18rem; font-size: 0.42rem; color: #f4e7bd; line-height: 0.56rem; }
.pv-lite-head p { margin-top: 0.1rem; font-size: 0.18rem; color: #a59e82; font-style: italic; }
.pv-lite-body { display: flex; gap: 0.5rem; padding: 0.45rem 0.7rem 0.7rem; }
.pv-toc {
  flex: none;
  width: 2.7rem;
  position: sticky;
  top: 1.2rem;
  align-self: flex-start;
  padding: 0.24rem 0.2rem;
  border-radius: 0.16rem;
  border: 1px solid rgba(223, 172, 73, 0.18);
  background: rgba(0, 0, 0, 0.25);
}
.pv-toc h4 { font-size: 0.13rem; letter-spacing: 0.03rem; text-transform: uppercase; color: #e8c77e; margin-bottom: 0.12rem; }
.pv-toc a {
  display: block;
  padding: 0.06rem 0.12rem;
  border-left: 0.02rem solid transparent;
  font-size: 0.14rem;
  line-height: 0.22rem;
  color: #9b947a;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pv-toc a:hover { color: #f0d79a; }
.pv-toc a.on { color: #f0c46a; border-left-color: #f0c46a; background: linear-gradient(90deg, rgba(240, 196, 106, 0.12), transparent); }
.pv-lite-cont { flex: 1; min-width: 0; font-size: 0.17rem; line-height: 0.34rem; color: #e6ddbd; }
.pv-lite-cont h2 {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  margin: 0.5rem 0 0.2rem;
  padding-bottom: 0.14rem;
  font-size: 0.28rem;
  color: #f0c46a;
  border-bottom: 1px solid rgba(223, 172, 73, 0.18);
  scroll-margin-top: 1.2rem;
}
.pv-lite-cont h2:first-child { margin-top: 0; }
.pv-lite-cont h2::before {
  content: "";
  flex: none;
  width: 0.12rem;
  height: 0.12rem;
  background: #f0c46a;
  transform: rotate(45deg);
  box-shadow: 0 0 0.12rem rgba(240, 196, 106, 0.6);
}
.pv-lite-cont h3 { margin: 0.3rem 0 0.08rem; font-size: 0.2rem; color: #f4e7bd; }
.pv-lite-cont p { margin: 0 0 0.18rem; }
.pv-lite-cont ul { margin: 0.1rem 0 0.2rem; }
.pv-lite-cont li {
  position: relative;
  margin-bottom: 0.12rem;
  padding: 0.12rem 0.2rem 0.12rem 0.44rem;
  border-radius: 0.1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.pv-lite-cont li::before {
  content: "";
  position: absolute;
  left: 0.18rem;
  top: 0.26rem;
  width: 0.08rem;
  height: 0.08rem;
  background: #f0c46a;
  transform: rotate(45deg);
}
.pv-lite-cont blockquote {
  margin: 0.26rem 0;
  padding: 0.26rem 0.34rem;
  border-left: 0.04rem solid #f0c46a;
  border-radius: 0 0.14rem 0.14rem 0;
  background: linear-gradient(90deg, rgba(240, 196, 106, 0.14), rgba(240, 196, 106, 0.02));
  font-size: 0.2rem;
  line-height: 0.36rem;
  color: #f7e5b0;
}
.pv-lite-cont blockquote p { margin: 0; }
.pv-lite-cont .pv-lead { font-size: 0.18rem; color: #efe4c0; }
.pv-loading { padding: 1rem 0; text-align: center; color: #8d866c; }

/* hero store buttons */
.page1 .pv-hero-dl {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 0.22rem;
}
.page1 .pv-hero-dl .pv-hbtn { width: 2.5rem; }
.pv-hbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  height: 0.74rem;
  padding: 0 0.24rem;
  box-sizing: border-box;
  border-radius: 0.14rem;
  border: 2px solid #f6cf7a;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 238, 190, 0.38), transparent 62%),
    linear-gradient(180deg, #e6ae46 0%, #d29b37 52%, #b77f29 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 72, 12, 0.55),
    inset 0 2px 0 rgba(255, 242, 205, 0.5),
    inset 0 -3px 0 rgba(112, 62, 6, 0.35),
    0 0.06rem 0.22rem rgba(0, 0, 0, 0.45);
  color: #fff;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.pv-hbtn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(0.74rem * 1.55);
  height: calc(0.74rem * 1.55);
  transform: translate(-50%, -50%) rotate(-12deg);
  background: url(/static/pv/coin.png) center / contain no-repeat;
  filter: sepia(1) saturate(0.5) brightness(1.35);
  mix-blend-mode: soft-light;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.pv-hbtn svg { width: 0.32rem; height: 0.32rem; fill: #fff; flex: none; filter: drop-shadow(0 1px 1px rgba(90, 50, 5, 0.55)); }
.pv-hbtn span { display: flex; flex-direction: column; line-height: 1.15; }
.pv-hbtn small { font-size: 0.12rem; letter-spacing: 0.01rem; text-transform: uppercase; color: rgba(255, 248, 230, 0.88); text-shadow: 0 1px 1px rgba(90, 50, 5, 0.5); }
.pv-hbtn b { font-size: 0.22rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(90, 50, 5, 0.6); }
.pv-hbtn.soon { cursor: default; filter: saturate(0.88) brightness(0.88); }
.pv-hbtn.soon:hover { filter: saturate(0.95) brightness(0.95); }
.pv-hbtn.live { animation: pvHbPulse 2.6s ease-in-out infinite; }
.pv-hbtn.live:hover { transform: translateY(-0.03rem); filter: brightness(1.07); }
.pv-hbtn.live::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: pvHbShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pvHbPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(122, 72, 12, 0.55), inset 0 2px 0 rgba(255, 242, 205, 0.5), inset 0 -3px 0 rgba(112, 62, 6, 0.35), 0 0 0.16rem rgba(240, 196, 106, 0.35); }
  50% { box-shadow: inset 0 0 0 1px rgba(122, 72, 12, 0.55), inset 0 2px 0 rgba(255, 242, 205, 0.5), inset 0 -3px 0 rgba(112, 62, 6, 0.35), 0 0 0.42rem rgba(240, 196, 106, 0.7); }
}
@keyframes pvHbShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* hero headline */
.page1 .pv-hero-copy {
  position: absolute;
  left: 50%;
  bottom: 2.72rem;
  transform: translateX(-50%);
  z-index: 5;
  width: 17rem;
  text-align: center;
  pointer-events: none;
  animation: pvHeroIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.pv-hero-title {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-family: "Permanent Marker", "Ma Shan Zheng", cursive;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.15;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  color: #f6f3eb;
  text-shadow:
    0.03rem 0 0 #22201d, -0.03rem 0 0 #22201d, 0 0.03rem 0 #22201d, 0 -0.03rem 0 #22201d,
    0.02rem 0.02rem 0 #22201d, -0.02rem 0.02rem 0 #22201d, 0.02rem -0.02rem 0 #22201d, -0.02rem -0.02rem 0 #22201d,
    0 0.07rem 0.04rem rgba(0, 0, 0, 0.55), 0 0.1rem 0.4rem rgba(0, 0, 0, 0.55);
}
.pv-hero-title span { white-space: nowrap; }
html.pv-lang-zh .pv-hero-title { font-family: "Ma Shan Zheng", cursive; font-size: 1.06rem; letter-spacing: 0.04rem; gap: 0.6rem; }
html.pv-lang-zh-tw .pv-hero-title { font-family: "Yuji Boku", serif; font-size: 0.98rem; letter-spacing: 0.02rem; gap: 0.6rem; }
html.pv-lang-th .pv-hero-title { font-family: "Sriracha", cursive; font-size: 0.84rem; text-transform: none; }
.pv-hero-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  margin-top: 0.12rem;
  padding: 0.07rem 0.34rem;
  font-family: Georgia, "Times New Roman", "PingFang SC", "Microsoft YaHei", serif;
  font-style: italic;
  font-size: 0.2rem;
  letter-spacing: 0.01rem;
  color: #f3e7cf;
  background: linear-gradient(90deg, transparent, rgba(74, 30, 26, 0.88) 12%, rgba(74, 30, 26, 0.88) 88%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pv-hero-sub i {
  width: 0.09rem;
  height: 0.09rem;
  background: #f0c46a;
  transform: rotate(45deg);
  box-shadow: 0 0 0.1rem rgba(240, 196, 106, 0.8);
  animation: pvDiamond 2.4s ease-in-out infinite;
}
@keyframes pvHeroIn { from { opacity: 0; transform: translate(-50%, 0.3rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pvDiamond { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* download page button: gold battle style */
.pv-btn {
  color: #fff !important;
  border: 2px solid #f6cf7a;
  box-sizing: border-box;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 238, 190, 0.38), transparent 62%),
    linear-gradient(180deg, #e6ae46 0%, #d29b37 52%, #b77f29 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 72, 12, 0.55),
    inset 0 2px 0 rgba(255, 242, 205, 0.5),
    inset 0 -3px 0 rgba(112, 62, 6, 0.35),
    0 0.06rem 0.22rem rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(90, 50, 5, 0.6);
  isolation: isolate;
  animation: pvHbPulse 2.6s ease-in-out infinite;
}
.pv-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180%;
  aspect-ratio: 1;
  max-width: 1.6rem;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: url(/static/pv/coin.png) center / contain no-repeat;
  filter: sepia(1) saturate(0.5) brightness(1.35);
  mix-blend-mode: soft-light;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.pv-btn svg { fill: #fff; filter: drop-shadow(0 1px 1px rgba(90, 50, 5, 0.55)); }

.pv-online {
  display: inline-flex;
  align-items: center;
  gap: 0.07rem;
  height: 0.36rem;
  padding: 0 0.14rem 0 0.12rem;
  margin-right: 0.16rem;
  border-radius: 0.18rem;
  border: 1px solid rgba(240, 196, 106, 0.45);
  background: linear-gradient(180deg, rgba(40, 30, 12, 0.85), rgba(14, 11, 5, 0.85));
  box-shadow: inset 0 0 0.12rem rgba(240, 196, 106, 0.12), 0 0 0.1rem rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}
.pv-on-dot {
  position: relative;
  width: 0.08rem;
  height: 0.08rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0.06rem #4ade80;
}
.pv-on-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4ade80;
  animation: pvOnPing 1.8s ease-out infinite;
}
@keyframes pvOnPing { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.8); opacity: 0; } }
.pv-on-lab {
  font-size: 0.12rem;
  letter-spacing: 0.01rem;
  color: #cfc6a6;
}
.pv-on-num {
  min-width: 0.3rem;
  font-size: 0.17rem;
  font-weight: 700;
  color: #f6cf7a;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.08rem rgba(246, 207, 122, 0.45);
}
.pv-on-tick { animation: pvOnTick 0.6s ease; }
@keyframes pvOnTick { 0% { color: #fff6d8; transform: translateY(-0.03rem); } 100% { color: #f6cf7a; transform: none; } }