:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #041954; color: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #041954; }
body { margin: 0; min-width: 320px; background: #03184d; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page { width: min(100%, 1672px); margin: auto; overflow: hidden; background: #064cb8; box-shadow: 0 0 70px rgba(0,0,0,.6); }
.hero { position: relative; aspect-ratio: 1672/1083; min-height: 610px; isolation: isolate; overflow: hidden; background: url("images/main_bg.png") center top/100% 100% no-repeat; }
.hero::after { content: ""; position: absolute; z-index: 4; inset: auto 0 0; height: 23%; pointer-events: none; background: linear-gradient(0deg, #064da8 0%, rgba(6,77,168,.88) 31%, transparent 100%); }
.logo { position: absolute; z-index: 5; top: 3.2%; left: 3%; width: 24%; filter: drop-shadow(0 8px 5px rgba(0,43,121,.55)); }
.character { position: absolute; z-index: 2; width: 48%; right: 5.5%; bottom: 11%; filter: drop-shadow(0 12px 12px rgba(0,46,115,.55)); animation: float 4s ease-in-out infinite; }
.main-icons { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.main-icon { position: absolute; width: 6.1%; filter: drop-shadow(0 5px 4px rgba(0,42,112,.55)); animation: icon-bob 3.2s ease-in-out infinite; }
.main-icon-zd { left: 13.5%; top: 38.5%; }
.main-icon-ds { left: 31.5%; top: 33%; animation-delay: -.8s; }
.main-icon-lq { left: 24%; top: 49%; animation-delay: -1.6s; }
.main-icon-pb { left: 42%; top: 45.5%; animation-delay: -2.4s; }
.download-area { position: absolute; z-index: 7; left: 5%; bottom: 17%; width: 40%; display: flex; align-items: center; gap: 4%; }
.launch-notice { width: 100%; padding: .35em .8em; border: 3px solid #ffdf62; border-radius: 16px; background: linear-gradient(135deg, #0c6cbe, #07428e); box-shadow: inset 0 0 20px #0a9af2, 0 7px 12px rgba(0,37,101,.55); color: #fff9c8; font-size: clamp(20px, 2.6vw, 42px); font-weight: 900; letter-spacing: .08em; text-align: center; text-shadow: 0 3px 4px #07508d; }
.cta { width: 67%; transition: transform .18s ease, filter .18s ease; }
.cta img { width: 100%; animation: pulse 2.2s ease-in-out infinite; }
.cta:hover,.cta:focus-visible { transform: translateY(-5px) scale(1.02); filter: brightness(1.08); outline: none; }
.qr { width: 28%; border-radius: 10%; transition: transform .18s ease; filter: drop-shadow(0 7px 8px rgba(0,37,101,.55)); }
.qr:hover,.qr:focus-visible { transform: translateY(-4px) scale(1.025); outline: 3px solid #ffe74e; }
.hero-tab { position: absolute; z-index: 8; left: 8%; right: 8%; bottom: calc(1% - 80px); }
.hero-tab img { width: 100%; filter: drop-shadow(0 7px 7px rgba(0,27,89,.55)); }
.spark { position: absolute; z-index: 3; width: 12px; height: 20px; border-radius: 80% 10% 80% 20%; pointer-events: none; background: linear-gradient(135deg,#fffbd6,#ffe03b 48%,#ff8d00); box-shadow: 0 0 12px #ffef52; animation: drift 7s linear forwards; }
.content-section { position: relative; z-index: 2; margin-top: -1px; padding: 3% 4% 4.5%; isolation: isolate; background: #0750b8; }
.content-section::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("images/middle_bg.png") center top/cover no-repeat; }
.features,.showcase { position: relative; }
.title-board { width: 43%; margin: 0 auto -7.1%; filter: drop-shadow(0 4px 5px rgba(0,54,161,.65)); }
h2 { position: relative; z-index: 3; margin: 0 0 3.2%; color: #fff; font-size: clamp(26px, 3vw, 48px); line-height: 1; text-align: center; letter-spacing: .12em; text-shadow: 0 3px 2px #1560c5, 0 0 7px #fff; transform: translateY(-10px); }
.feature-board { position: relative; min-height: 520px; }
.board-bg { position: absolute; top: -90px; right: 0; bottom: auto; left: 0; width: 100%; height: 115%; object-fit: fill; }
.feature-copy { position: relative; z-index: 2; width: 67%; padding: 8% 0 7% 5%; transform: translateY(-40px); }
.feature-copy article { display: grid; grid-template-columns: 68px 190px 1fr; align-items: center; gap: 15px; min-height: 68px; border-bottom: 2px solid rgba(73,143,207,.18); }
.feature-copy article:last-child { border: 0; }
.feature-copy img { width: 56px; max-height: 62px; object-fit: contain; margin: auto; }
.feature-copy h3 { margin: 0; font-size: clamp(18px,1.7vw,28px); color: #157fc8; letter-spacing: .08em; }
.feature-copy article:nth-child(2) h3 { color: #358525; }
.feature-copy article:nth-child(3) h3 { color: #e15724; }
.feature-copy article:nth-child(4) h3 { color: #403ec1; }
.feature-copy article:nth-child(5) h3 { color: #e27414; }
.feature-copy p { margin: 0; color: #283748; font-size: clamp(13px,1.25vw,20px); font-weight: 650; line-height: 1.5; }
.feature-figure { position: absolute; z-index: 2; right: 3%; bottom: calc(1% + 100px); width: 28%; opacity: .62; filter: drop-shadow(0 0 15px #c9e5ff); }
.showcase { margin-top: calc(2.5% - 50px); }
.screenshots { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.1%; }
.screenshots figure { position: relative; aspect-ratio: 293/524; margin: 0; padding: 3.1%; filter: drop-shadow(0 8px 8px rgba(0,35,97,.7)); }
.screenshots figure::after { content: ""; position: absolute; z-index: 2; inset: 0; background: url("images/frame.png") center/100% 100% no-repeat; pointer-events: none; }
.screenshots img { width: 100%; height: 100%; object-fit: cover; border-radius: 7%; }
footer { position: relative; min-height: 415px; margin: 4.5% -4% -4.5%; display: grid; place-items: center; background: url("images/bottom_bg.png") center bottom/cover no-repeat; }
.footer-slogan { width: 76%; margin-top: 2%; filter: drop-shadow(0 8px 5px rgba(0,32,105,.65)); }
@keyframes pulse { 0%,100% { transform: scale(1); filter: brightness(1) drop-shadow(0 5px 7px rgba(0,44,120,.55)); } 50% { transform: scale(1.035); filter: brightness(1.12) drop-shadow(0 0 18px #fff075); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes icon-bob { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.035); } }
@keyframes drift { from { opacity: 0; transform: translate3d(0,-30px,0) rotate(0deg); } 12% { opacity: .95; } to { opacity: 0; transform: translate3d(var(--dx),420px,0) rotate(290deg); } }
@media (max-width: 760px) {
  .hero { aspect-ratio: auto; height: 760px; }
  .logo { width: 49%; top: 3%; left: 2%; }
  .character { width: 94%; right: -18%; bottom: 20%; }
  .main-icon { width: 11%; }
  .main-icon-zd { left: 5%; top: 34%; }
  .main-icon-ds { left: 25%; top: 29%; }
  .main-icon-lq { left: 10%; top: 46%; }
  .main-icon-pb { left: 31%; top: 42%; }
  .download-area { left: 4%; bottom: 10%; width: 70%; }
  .launch-notice { font-size: clamp(20px, 5.2vw, 30px); }
  .hero-tab { left: 1%; right: 1%; bottom: 1%; }
  .content-section { padding: 8% 4% 9%; }
  .content-section::before { background-size: cover; background-position: center top; }
  .title-board { width: 76%; margin-bottom: -12.5%; }
  h2 { margin-bottom: 7%; }
  .feature-board { min-height: 590px; }
  .feature-copy { width: 100%; padding: 10% 7% 8%; }
  .feature-copy article { grid-template-columns: 48px 1fr; gap: 10px; min-height: 96px; }
  .feature-copy img { width: 44px; grid-row: span 2; }
  .feature-copy h3 { align-self: end; }
  .feature-copy p { align-self: start; }
  .feature-figure { display: none; }
  .showcase { margin-top: calc(8% - 50px); }
  .screenshots { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .screenshots figure { flex: 0 0 58vw; scroll-snap-align: center; }
  footer { min-height: 225px; margin: 9% -4% -9%; }
  .footer-slogan { width: 94%; }
}
@media (max-width: 420px) { .hero { height: 650px; } .character { bottom: 22%; } .download-area { width: 76%; } .feature-board { min-height: 620px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .character,.main-icon,.cta img,.spark { animation: none; } .sky-sparks { display: none; } }