:root {
  color-scheme: light;
  --paper: #f5f3ee;
  --ink: #282b28;
  --quiet: #646963;
  --accent: #a38060;
  --line: rgba(47, 51, 45, .17);
  --serif-cn: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --sans: "Inter", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; overflow-x: hidden; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; border-radius: 2px; }
.page-shell { width: min(1440px, calc(100% - clamp(42px, 11vw, 172px))); min-height: 100vh; min-height: 100svh; margin-inline: auto; display: flex; flex-direction: column; }
.masthead { padding-block: clamp(27px, 4.1vh, 49px); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.home-mark { display: inline-flex; width: 49px; height: 49px; align-items: center; justify-content: center; }
.home-mark img { width: 45px; height: 45px; display: block; }
.nav-contact { display: inline-flex; align-items: center; gap: 19px; font-size: 13px; font-weight: 500; letter-spacing: .08em; padding-block: 7px; transition: color .2s ease; }
.nav-contact:hover, .footer a:hover { color: var(--accent); }
.arrow { font-family: Georgia, serif; font-size: 20px; line-height: .6; font-weight: 400; transform: translateY(-2px); }
.main-content { flex: 1; display: flex; flex-direction: column; }
.brand-stage { flex: 1; min-height: clamp(465px, 60vh, 710px); position: relative; display: flex; align-items: center; isolation: isolate; }
.orbit { width: min(68vw, 800px); aspect-ratio: 1; position: absolute; right: max(-16vw, -185px); top: 50%; transform: translateY(-52%); z-index: -1; color: #c8b8a2; opacity: .72; pointer-events: none; }
.orbit svg { display: block; width: 100%; height: 100%; }
.hero-lockup { position: relative; margin-top: -20px; z-index: 1; }
.decor-line { display: block; width: 37px; height: 1.5px; background: var(--accent); margin-bottom: clamp(31px, 4.3vw, 59px); }
.chinese-logo { margin: 0; display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; font-family: var(--serif-cn); font-weight: 500; font-size: clamp(65px, 8.1vw, 125px); line-height: 1.23; letter-spacing: -.025em; color: #202421; }
.chinese-logo span:not(:last-child) { margin-right: .12em; }
.english-logo { margin: 21px 0 0 6px; font: italic 400 clamp(26px, 2.9vw, 39px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: .038em; color: var(--ink); }
.product-strip { width: 100%; padding: 23px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); }
.product-identity { display: flex; align-items: center; min-width: 0; gap: 18px; }
.product-logo { width: 54px; height: 54px; display: block; object-fit: contain; flex: 0 0 auto; border-radius: 13px; }
.product-copy { display: flex; align-items: baseline; gap: clamp(23px, 3vw, 50px); min-width: 0; }
.product-name { margin: 0; font-size: clamp(21px, 2vw, 27px); font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.product-tagline { margin: 0; color: var(--quiet); font-family: var(--serif-cn); font-size: clamp(15px, 1.5vw, 18px); letter-spacing: .055em; white-space: nowrap; }
.site-qr-link { display: flex; align-items: center; gap: 19px; flex: 0 0 auto; }
.site-qr-link:hover .site-qr-img { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(23, 31, 23, .08); }
.site-qr-caption { color: var(--quiet); font-size: 12px; text-align: right; letter-spacing: .08em; line-height: 1.7; }
.site-qr-caption span { display: block; color: #8b8d85; font-size: 9px; letter-spacing: .1em; }
.site-qr-img { display: block; width: 94px; height: 94px; padding: 7px; background: #fff; border: 1px solid rgba(45, 49, 40, .08); transition: transform .2s ease, box-shadow .2s ease; }
.footer { border-top: 1px solid var(--line); padding: 23px 0 30px; display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; color: #74766f; font-size: 11px; line-height: 1.8; }
.legal-name { font-size: inherit; line-height: inherit; letter-spacing: .015em; }
.footer-links { display: flex; gap: clamp(19px, 3vw, 44px); flex-wrap: wrap; justify-content: flex-end; }
.footer a { transition: color .2s ease; }

/* A genuine support URL can be supplied in app-store metadata without a fabricated privacy policy. */
.support-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 100px 145px; }
.support-main h1 { font: 500 clamp(56px, 8vw, 112px)/1.2 var(--serif-cn); letter-spacing: .045em; margin: 0; }
.support-main p { margin: 0; font-size: clamp(18px, 2.3vw, 28px); }
.support-main a { border-bottom: 1px solid var(--accent); padding-bottom: 9px; }

@media (min-width: 1600px) {
  .chinese-logo { font-size: 140px; }
  .brand-stage { min-height: 650px; }
}
@media (max-width: 860px) {
  .page-shell { width: calc(100% - 66px); }
  .chinese-logo { font-size: clamp(57px, 10vw, 86px); }
  .orbit { width: 84vw; right: -25vw; opacity: .51; }
  .brand-stage { min-height: 530px; }
  .product-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .product-logo { width: 50px; height: 50px; }
  .site-qr-link { gap: 12px; }
  .site-qr-caption { font-size: 10px; }
  .site-qr-caption span { font-size: 8px; }
  .footer { flex-direction: column; gap: 8px; }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 540px) {
  .page-shell { width: calc(100% - 44px); }
  .masthead { padding-block: 23px 18px; }
  .home-mark { width: 42px; height: 42px; }
  .home-mark img { width: 40px; height: 40px; }
  .nav-contact { font-size: 12px; gap: 12px; }
  .brand-stage { min-height: 450px; align-items: center; }
  .hero-lockup { margin-top: -10px; width: 100%; }
  .decor-line { margin-bottom: 36px; width: 29px; }
  .chinese-logo { font-size: clamp(43px, 12vw, 65px); line-height: 1.22; letter-spacing: -.05em; }
  .chinese-logo span:not(:last-child) { margin-right: .055em; }
  .english-logo { font-size: 29px; margin-top: 20px; margin-left: 2px; }
  .orbit { width: 133vw; max-width: none; right: -73vw; top: 51%; transform: translateY(-50%); opacity: .38; }
  .product-strip { align-items: center; flex-direction: row; gap: 10px; padding: 21px 0 21px; }
  .product-identity { gap: 10px; }
  .product-logo { width: 40px; height: 40px; border-radius: 9px; }
  .product-copy { gap: 5px; }
  .product-name { font-size: clamp(17px, 4.9vw, 22px); }
  .product-tagline { font-size: 13px; letter-spacing: .03em; }
  .site-qr-link { gap: 0; }
  .site-qr-caption { display: none; }
  .site-qr-img { width: 81px; height: 81px; padding: 4px; }
  .footer { font-size: 11px; padding: 20px 0 25px; gap: 8px; }
  .footer-links { gap: 3px 18px; }
  .support-main { padding-block: 90px 120px; }
}
@media (max-width: 350px) {
  .chinese-logo { font-size: 41px; }
  .english-logo { font-size: 26px; }
  .product-name { font-size: 16px; }
  .product-tagline { font-size: 12px; }
  .product-logo { width: 35px; height: 35px; }
  .site-qr-img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-lockup { animation: arrive .65s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
