:root { --ink: #17172a; --muted: #666575; --yellow: #ffd400; --paper: #fffdf8; --card: #f4f1eb; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
.site-header { height: 76px; padding: max(16px, env(safe-area-inset-top)) 22px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; background: rgba(255,253,248,.88); backdrop-filter: blur(16px); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 18px; font-weight: 900; background: linear-gradient(145deg, #ff623c, #ff9a27 62%, #ffd400); box-shadow: 0 5px 12px rgba(255,117,48,.28); }
.header-link { padding: 9px 13px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.hero { min-height: 728px; padding: 56px 24px 65px; overflow: hidden; position: relative; text-align: center; isolation: isolate; background: radial-gradient(circle at 94% 15%, #fff18d 0 13%, transparent 13.2%), radial-gradient(circle at -8% 65%, #ffd8cf 0 13%, transparent 13.2%); }
.hero-shape { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.hero-shape-one { width: 210px; height: 210px; right: -130px; top: 30px; background: #ffe23a; }
.hero-shape-two { width: 120px; height: 120px; left: -80px; bottom: 145px; background: #ffb4c7; opacity: .7; }
.eyebrow { margin: 0 0 9px; color: #8d8a8b; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .13em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(42px, 12vw, 58px); line-height: 1.08; letter-spacing: -.09em; }
.hero-slogan { margin-bottom: 10px; font-size: 25px; line-height: 1.3; font-weight: 800; letter-spacing: -.06em; }
.hero-copy { margin-bottom: 31px; color: var(--muted); font-size: 14px; }
.phones { height: 303px; position: relative; margin: 0 auto 32px; max-width: 390px; }
.phone { position: absolute; bottom: 0; padding: 8px; border: 5px solid #171723; border-radius: 27px; background: #171723; box-shadow: 0 21px 29px rgba(21,20,30,.22); }
.phone::before { content: ""; width: 41%; height: 7px; position: absolute; top: 8px; left: 29%; border-radius: 20px; background: #171723; z-index: 2; }
.phone-screen { height: 100%; overflow: hidden; border-radius: 16px; background: #fff; text-align: left; }
.phone-main { width: 179px; height: 295px; left: 50%; z-index: 3; transform: translateX(-50%); }
.phone-left, .phone-right { width: 127px; height: 214px; z-index: 1; }
.phone-left { left: 4px; transform: rotate(-7deg); transform-origin: bottom right; }.phone-right { right: 4px; transform: rotate(7deg); transform-origin: bottom left; }
.screen-main { padding: 13px 8px 7px; }.phone-status { display: flex; justify-content: space-between; padding: 0 3px 7px; font-size: 6px; font-weight: 700; }.mini-logo { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 5px; color: #fff; background: #fa593a; font-size: 10px; font-weight: 900; }.app-search { padding: 4px; display: flex; align-items: center; gap: 5px; border-radius: 7px; background: #f1f1f2; color: #93939c; font-size: 6px; }.game-banner { height: 60px; margin-top: 7px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; border-radius: 8px; color: #fff; background: linear-gradient(135deg,#3bb1f9,#4b64e9 65%,#ffdb32); font-size: 7px; }.game-banner b { font-size: 11px; }.game-tabs { display: flex; gap: 7px; margin: 8px 0; white-space: nowrap; font-size: 6px; }.game-tabs b { color: #ff5a49; }.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.game-grid i { display: block; height: 54px; border-radius: 6px; background: linear-gradient(150deg,#ffc5b0 15%,#ff785f 15% 50%,#ffe078 50%); }.game-grid i:nth-child(2) { background: linear-gradient(150deg,#8bcbff 15%,#5071e6 15% 50%,#fcdd75 50%); }.game-grid i:nth-child(3) { background: linear-gradient(150deg,#edc3ff 15%,#a664ea 15% 50%,#ffbdcc 50%); }.game-grid i:nth-child(4) { background: linear-gradient(150deg,#8de2cc 15%,#2cae8c 15% 50%,#c7e97b 50%); }.app-nav { margin-top: 8px; padding-top: 5px; display: flex; justify-content: space-around; border-top: 1px solid #eee; color: #6d6e75; font-size: 11px; }.app-nav .add { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; text-align: center; line-height: 13px; }.screen-left, .screen-right { padding: 22px 8px 7px; }.screen-left strong, .screen-right strong { display: block; margin: 9px 0 7px; font-size: 10px; }.screen-left .screen-banner, .screen-right .screen-banner { height: 39px; padding: 24px 5px 4px; border-radius: 6px; color: #fff; background: linear-gradient(135deg,#ff765e,#ffcb2e); font-size: 6px; }.screen-right .screen-banner { background: linear-gradient(135deg,#5a6be9,#b56be8); }.screen-lines { margin-top: 7px; }.screen-lines i { display: block; height: 24px; margin-bottom: 5px; border-radius: 4px; background: linear-gradient(90deg,#f4f4f5 35%,#e6e7ea 35%); }.floating-brand { position: absolute; right: 6px; bottom: -10px; z-index: 5; width: 94px; height: 94px; display: grid; place-content: center; border: 5px solid #ffbf00; border-radius: 25px; color: #fff; transform: rotate(9deg); background: radial-gradient(circle at 45% 27%,#ffdc60 0 4%,transparent 4.5%), linear-gradient(145deg,#ff8c21,#e93725 65%,#a81719); box-shadow: 0 13px 19px rgba(224,87,24,.25); }.floating-brand span { width: 32px; height: 32px; margin: 0 auto 1px; display: grid; place-items: center; border-radius: 50%; background: #ffe9ad; color: #e64b24; font-weight: 900; }.floating-brand b { font-size: 17px; letter-spacing: -.1em; }
.download-button { min-width: 218px; padding: 16px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 15px; color: var(--ink); background: linear-gradient(#ffe430,#ffd000); box-shadow: 0 13px 24px rgba(255,198,0,.25), inset 0 1px rgba(255,255,255,.62); font-size: 21px; font-weight: 800; }.download-button span, .cta-link span { font-size: 24px; line-height: 1; }
.site-footer { padding: 45px 24px calc(33px + env(safe-area-inset-bottom)); color: #eee; background: #17172a; }.footer-brand { margin-bottom: 26px; color: #fff; }.site-footer .brand-mark { background: linear-gradient(145deg, #ff623c, #ff9a27); }.site-footer p, .site-footer address, .footer-records { color: #a8a7b4; font-size: 12px; line-height: 1.9; font-style: normal; }.site-footer address { white-space: pre-line; }.footer-records { display: flex; flex-direction: column; margin-top: 12px; }.footer-records a:hover { color: #fff; }.copyright { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #303043; font-size: 11px !important; }

/* 首屏设备样机：不依赖人物、游戏截图等外部图片。 */
.phones { height: 342px; max-width: 400px; margin-bottom: 32px; perspective: 800px; }
.phones::before { content: ""; width: 92%; height: 42px; position: absolute; bottom: -8px; left: 4%; border-radius: 50%; background: radial-gradient(ellipse, rgba(23,23,42,.28), rgba(23,23,42,0) 68%); filter: blur(7px); }
.phones::after { content: ""; width: 57%; height: 9px; position: absolute; bottom: 0; left: 21.5%; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 35px 14px rgba(255,216,78,.32); }
.phone { overflow: visible; bottom: 10px; padding: 8px; border: 4px solid #080a11; border-radius: 32px; background: linear-gradient(125deg, #4d505c 0%, #11131b 15%, #050609 54%, #383b47 100%); box-shadow: -7px 7px 0 #08090f, 0 28px 32px rgba(18,19,34,.28), inset 1px 1px rgba(255,255,255,.35), inset -1px -1px rgba(0,0,0,.8); }
.phone::before { width: 44%; height: 12px; top: 8px; left: 28%; z-index: 5; border: 1px solid #20232e; background: #050609; box-shadow: inset 0 1px 1px rgba(255,255,255,.08); }
.phone::after { content: ""; position: absolute; inset: 5px 62% 8px 8px; z-index: 6; border-radius: 23px 0 0 23px; pointer-events: none; background: linear-gradient(110deg, rgba(255,255,255,.23), rgba(255,255,255,0)); }
.phone-screen { position: relative; border: 1px solid #373944; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.phone-main { width: 195px; height: 322px; z-index: 4; }
.phone-left, .phone-right { width: 140px; height: 230px; z-index: 2; opacity: .94; filter: saturate(.84) brightness(.79); }
.phone-left { left: -1px; transform: rotate(-9deg) translateY(7px); }.phone-right { right: -1px; transform: rotate(9deg) translateY(7px); }
.phone-left::before, .phone-right::before { height: 9px; top: 7px; }.phone-left::after, .phone-right::after { border-radius: 18px 0 0 18px; }
.device-button { position: absolute; z-index: -1; display: block; width: 4px; border-radius: 6px; background: linear-gradient(90deg, #050609, #676a75); box-shadow: 0 1px 2px rgba(255,255,255,.3); }.button-one { height: 34px; top: 70px; left: -7px; }.button-two { height: 48px; top: 117px; left: -7px; }
.screen-main { padding: 15px 9px 7px; background: linear-gradient(180deg, #fff 0%, #fbfbfa 72%, #f7f7f7); }.phone-status { padding-bottom: 8px; }.app-search { padding: 5px; }.mini-logo { box-shadow: 0 3px 5px rgba(250,89,58,.22); }
.game-banner { height: 67px; margin-top: 8px; padding: 11px; position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg,#ffb928,#ff7d46 49%,#ef5240); }.game-banner::after { content: ""; width: 72px; height: 72px; position: absolute; right: -22px; top: -30px; border: 12px solid rgba(255,255,255,.2); border-radius: 50%; }.game-banner b, .game-banner span { z-index: 1; }.game-tabs { margin: 9px 0; }.game-grid i { height: 58px; position: relative; overflow: hidden; border-radius: 7px; }.game-grid i::after { content: ""; width: 42px; height: 42px; position: absolute; right: -10px; bottom: -13px; border-radius: 50%; background: rgba(255,255,255,.28); }
.screen-left, .screen-right { padding: 25px 9px 7px; }.screen-topline { display: flex; align-items: center; justify-content: space-between; color: #91909a; font-size: 6px; }.screen-left strong, .screen-right strong { margin: 12px 0 8px; color: #222331; font-size: 11px; }.screen-left .screen-banner, .screen-right .screen-banner { height: 44px; padding: 27px 6px 5px; border-radius: 7px; }.screen-lines { margin-top: 8px; }.screen-lines i { height: 26px; border-radius: 5px; background: linear-gradient(90deg,#f0f0f2 38%,#e1e2e6 38% 74%,#f6f6f7 74%); }
@media (min-width: 680px) { body { max-width: 600px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.08); }.hero { min-height: 790px; }.phones { transform: scale(1.1); margin-top: 25px; margin-bottom: 55px; } }

/* 根据新版设计稿重构：首页采用白底、三机叠放与黄色信息区。 */
:root { --ink: #171725; --yellow: #ffd700; --paper: #fffef9; }
.site-header { height: 66px; padding: max(14px, env(safe-area-inset-top)) 22px 12px; position: relative; background: #fffef9; backdrop-filter: none; }
.site-header .brand { font-size: 18px; }.site-header .brand-mark { width: 29px; height: 29px; border-radius: 9px; font-size: 16px; }
.hero { min-height: 820px; padding: 56px 22px 52px; background: radial-gradient(circle at 105% 12%, #fff08e 0 16%, transparent 16.2%), radial-gradient(circle at -10% 76%, rgba(255,194,191,.42) 0 12%, transparent 12.2%), #fffef9; }
.hero-shape { display: none; }
.hero-brand-lockup { display: flex; justify-content: center; align-items: center; margin-bottom: 24px; }
.hero-main-logo { width: 132px; height: 132px; display: block; object-fit: contain; border: 0; border-radius: 28px; box-shadow: none; }
.hero-brand-name { margin: 0 0 13px; color: #171725; font-size: 35px; font-weight: 900; line-height: 1; letter-spacing: -.075em; }
.hero-brand-icon, .hero-app-icon, .footer-app-icon { display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 45% 27%, #ffd86a 0 8%, transparent 8.6%), linear-gradient(145deg, #ff9e18, #e82d1e 58%, #9d1819); box-shadow: inset 0 0 0 4px #ffb900, 0 13px 22px rgba(231,68,28,.22); }
.hero-brand-icon { width: 91px; height: 91px; border-radius: 24px; font-size: 33px; letter-spacing: -.1em; }
h1 { margin-bottom: 18px; font-size: clamp(48px, 13vw, 61px); letter-spacing: -.1em; }
.hero-slogan { margin-bottom: 48px; color: #171725; font-size: 24px; font-weight: 700; letter-spacing: -.05em; }
.hero-copy { display: none; }
.phones { height: 372px; max-width: 430px; margin-bottom: 34px; }
.phones::before { width: 91%; height: 42px; bottom: -4px; left: 4.5%; background: radial-gradient(ellipse, rgba(21,21,31,.32), rgba(21,21,31,0) 69%); }.phones::after { background: rgba(255,255,255,.65); box-shadow: 0 0 38px 16px rgba(255,224,104,.3); }
.phone { bottom: 10px; border-width: 6px; border-radius: 34px; background: #15151e; box-shadow: 0 26px 34px rgba(17,17,30,.27), inset 1px 1px rgba(255,255,255,.1); }
.phone::before { width: 39%; height: 8px; top: 10px; left: 30.5%; border: 0; background: #05050a; }.phone::after { display: none; }
.phone-screen { border: 0; border-radius: 22px; }
.phone-main { width: 205px; height: 350px; z-index: 4; }.phone-left, .phone-right { width: 145px; height: 252px; bottom: 18px; z-index: 2; opacity: 1; filter: brightness(.82); }.phone-left { left: 1px; transform: rotate(-5deg); }.phone-right { right: 1px; transform: rotate(5deg); }
.phone-left::before, .phone-right::before { top: 8px; }.device-button { display: none; }
.screen-main { padding: 15px 9px 7px; }.game-banner { height: 75px; border-radius: 9px; background: linear-gradient(135deg, #49c3f4, #4286ed 55%, #ffc729); }.game-grid i { height: 64px; }.app-nav { margin-top: 9px; }
.screen-left, .screen-right { padding-top: 25px; }.screen-left .screen-banner, .screen-right .screen-banner { height: 48px; background: linear-gradient(135deg, #4cc6f2, #3b75dc); }.screen-right .screen-banner { background: linear-gradient(135deg, #4cc6f2, #3b75dc); }
.hero-app-icon { width: 112px; height: 112px; position: absolute; right: 4px; bottom: 8px; z-index: 7; border-radius: 29px; transform: rotate(6deg); }.hero-app-icon span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #eb4c24; background: #ffe8a8; font-size: 20px; font-weight: 900; }.hero-app-icon b { position: absolute; bottom: 17px; font-size: 19px; letter-spacing: -.1em; }
.download-button { width: min(100%, 330px); min-width: 0; min-height: 76px; padding: 18px 28px; border-radius: 16px; color: #fff; background: linear-gradient(#f64435, #d90909); box-shadow: 0 16px 28px rgba(177,10,10,.34), inset 0 1px rgba(255,255,255,.33); font-size: 28px; letter-spacing: .02em; }
.site-footer { min-height: 590px; padding: 82px 28px calc(54px + env(safe-area-inset-bottom)); text-align: center; color: #252524; background: var(--yellow); }
.footer-brand { display: inline-flex; flex-direction: column; gap: 15px; margin-bottom: 46px; font-size: 20px; }.footer-app-icon { width: 82px; height: 82px; border-radius: 22px; font-size: 28px; }.site-footer .brand-mark { display: none; }
.site-footer p, .site-footer address, .footer-records { color: #292926; font-size: 16px; line-height: 2.1; font-weight: 700; }.site-footer address { margin: 15px 0 10px; }.footer-records { margin-top: 10px; }.footer-records a { color: #292926; }.copyright { margin-top: 31px; padding-top: 0; border: 0; font-size: 15px !important; }
@media (min-width: 680px) { .hero { min-height: 890px; }.phones { transform: scale(1.08); margin-top: 26px; margin-bottom: 59px; } }

/* 顶部使用实际 Logo，不添加描边、圆角卡片或外框。 */
.site-header .brand { gap: 10px; }
.site-header .brand-logo { width: 40px; height: 40px; display: block; object-fit: cover; object-position: center 13%; border: 0; border-radius: 0; box-shadow: none; }

/* 红金品牌页脚：以对称烟花和流线延续 Logo 的节庆游戏氛围。 */
.site-footer { overflow: hidden; position: relative; min-height: 610px; isolation: isolate; color: #fffaf0; background: radial-gradient(circle at 50% -12%, #ff4a23 0 12%, transparent 34%), linear-gradient(160deg, #e6170a 0%, #b90808 53%, #810303 100%); }
.site-footer::before, .site-footer::after { content: ""; width: 280px; height: 280px; position: absolute; top: 40px; z-index: -1; opacity: .58; background: repeating-conic-gradient(from 0deg, #ffd76a 0 2deg, transparent 2deg 17deg); mask: radial-gradient(circle, transparent 0 30%, #000 31% 32%, transparent 33%); }
.site-footer::before { left: -150px; }.site-footer::after { right: -150px; transform: scaleX(-1); }
.site-footer .footer-brand, .site-footer .footer-slogan, .site-footer #company-name, .site-footer address, .site-footer .footer-records { position: relative; z-index: 1; }
.footer-brand { gap: 11px; margin-bottom: 15px; color: #fff8df; text-shadow: 0 3px 10px rgba(73,0,0,.28); }.footer-logo { width: 96px; height: 96px; display: block; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }.footer-app-icon { display: none; }
.footer-slogan { margin: 0 0 39px; color: #fff !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: .05em; }
.site-footer p, .site-footer address, .footer-records { color: #fff7df; font-size: 15px; line-height: 2.2; font-weight: 600; }.site-footer address { margin: 16px 0 13px; }.footer-records { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,229,155,.38); }.footer-records a { color: #ffd86a; }

/* 下载按钮以下与首屏统一：暖白底、品牌红和少量金色点缀。 */
.site-footer { min-height: 500px; padding: 76px 28px calc(46px + env(safe-area-inset-bottom)); color: #25232b; background: radial-gradient(circle at 105% 0%, rgba(255,223,105,.72) 0 15%, transparent 15.3%), radial-gradient(circle at -12% 78%, rgba(255,188,181,.42) 0 15%, transparent 15.3%), #fffdf8; }
.site-footer::before, .site-footer::after { width: 190px; height: 190px; top: auto; bottom: -128px; opacity: 1; background: radial-gradient(circle, rgba(234,44,36,.13) 0 3%, transparent 3.5%); mask: none; }.site-footer::before { left: -92px; }.site-footer::after { right: -92px; transform: none; }
.site-footer .footer-slogan, .site-footer #company-name, .site-footer address, .site-footer .footer-records { position: relative; z-index: 1; }
.footer-slogan { margin: 0 0 42px; color: #d90909 !important; font-size: 23px !important; font-weight: 900 !important; line-height: 1.35 !important; letter-spacing: -.025em; text-shadow: none; }
.site-footer p, .site-footer address, .footer-records { color: #4c4a53; font-size: 14px; line-height: 2.15; font-weight: 600; }.site-footer #company-name { color: #22212a; font-size: 16px; font-weight: 800; }.site-footer address { margin: 15px 0 12px; }

/* 将备案号收拢成页脚底部的居中信息胶囊，和整体轻量风格保持一致。 */
.footer-records { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #f0dfd8; line-height: 1.5; }
.footer-records a { padding: 4px 11px; border: 1px solid rgba(189,29,27,.24); border-radius: 999px; color: #a91515; background: rgba(255,246,242,.86); font-size: 12px; font-weight: 700; }

/* 全站文字统一为轻盈、清晰的系统字体风格，优先使用苹果设备字体。 */
h1, h2, h3, p, a, address, button { font-family: inherit; }
.hero-brand-name { margin-bottom: 14px; font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -.045em; }
.hero-slogan { margin-bottom: 48px; font-size: 21px; font-weight: 500; line-height: 1.45; letter-spacing: .015em; }
.download-button { font-weight: 700; letter-spacing: .01em; }
.site-footer #company-name, .footer-slogan { letter-spacing: -.02em; }

/* 三台手机等宽、按真实长屏比例展示：中间仅比左右高 20px。 */
.phones { height: 470px; max-width: 460px; margin-bottom: 42px; }
.phone-main, .phone-left, .phone-right { width: 215px; }
.phone-left, .phone-right { height: 430px; bottom: 8px; filter: none; }
.phone-main { height: 450px; bottom: 8px; }
.phone { padding: 4px; border-width: 3px; border-radius: 25px; box-shadow: 0 16px 24px rgba(17,17,30,.22), inset 1px 1px rgba(255,255,255,.12); }
.phone::before { display: none; }.phone-screen { overflow: hidden; border-radius: 18px; background: #fff; }
.phone-left { left: -47px; transform: none; }.phone-right { right: -47px; transform: none; }
.phone-screenshot { width: 100%; height: 100%; display: block; object-fit: contain; object-position: top center; }

/* 苹果官网式视觉收束：保留品牌红色，减少装饰和强烈渐变，让内容成为视觉中心。 */
.hero { background: #fff; }
.phones::before { background: radial-gradient(ellipse, rgba(0,0,0,.16), rgba(0,0,0,0) 70%); filter: blur(10px); }
.phones::after { display: none; }
.phone { border-width: 2px; box-shadow: 0 18px 34px rgba(0,0,0,.14); }
.download-button { border-radius: 14px; background: #f00000; box-shadow: 0 10px 24px rgba(217,9,9,.18); }
.site-footer { min-height: 460px; background: #f5f5f7; }
.site-footer::before, .site-footer::after { display: none; }
.footer-slogan { color: #d90909 !important; }
.site-footer p, .site-footer address, .footer-records { color: #6e6e73; }
.site-footer #company-name { color: #1d1d1f; }
.footer-records { border-top-color: #d2d2d7; }
.footer-records a { border-color: rgba(217,9,9,.2); background: #fff; color: #a90808; }

/* 进一步收敛页脚：使用苹果官网常见的中性文字和细小备案信息。 */
.footer-slogan { color: #1d1d1f !important; font-size: 21px !important; font-weight: 600 !important; }
.site-footer p, .site-footer address, .footer-records { color: #6e6e73; }
.footer-records { gap: 4px; margin-top: 18px; padding-top: 0; border-top: 0; }
.footer-records a { padding: 0; border: 0; background: transparent; color: #6e6e73; font-size: 12px; font-weight: 400; }

/* 放大关键文字，确保安卓手机上也能清楚阅读。 */
.hero-brand-name { font-size: 39px; }
.hero-slogan { font-size: 24px; }
.footer-slogan { font-size: 23px !important; }
.site-footer #company-name { font-size: 17px; }
.site-footer address { font-size: 16px; }
.footer-records a { font-size: 13px; }

/* 为品牌口号增加轻量横线节奏，提升识别度但不破坏苹果式留白。 */
.hero-slogan { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; letter-spacing: .04em; }
.hero-slogan::before, .hero-slogan::after { content: ""; width: 24px; height: 2px; flex: 0 0 auto; border-radius: 999px; background: #f00000; }

/* 最终响应式布局：手机端完整展示三台设备，电脑端切换为左文右图。 */
.hero {
  min-height: 0;
  padding: 36px 16px 46px;
}
.hero-brand-lockup { margin-bottom: 14px; }
.hero-main-logo { width: 96px; height: 96px; border-radius: 22px; }
.hero-brand-name { margin-bottom: 11px; font-size: 32px; }
.hero-slogan { gap: 9px; margin-bottom: 28px; font-size: 19px; }
.hero-slogan::before, .hero-slogan::after { width: 18px; }
.phones {
  width: 100%;
  max-width: 390px;
  height: clamp(338px, 100vw, 390px);
  margin: 0 auto 30px;
  transform: none;
}
.phone {
  bottom: 8px;
  height: auto;
  aspect-ratio: 9 / 20;
}
.phone-main {
  width: clamp(148px, 44vw, 170px);
  height: auto;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
}
.phone-left, .phone-right {
  width: clamp(108px, 34vw, 132px);
  height: auto;
  bottom: 14px;
  opacity: .9;
  filter: saturate(.82) brightness(.92);
}
.phone-left { left: 0; transform: none; }
.phone-right { right: 0; transform: none; }
.phone-screenshot { object-fit: cover; }
.download-button {
  width: min(100%, 300px);
  min-height: 62px;
  padding: 14px 24px;
  font-size: 22px;
}

@media (min-width: 480px) {
  .hero { padding: 48px 28px 58px; }
  .hero-main-logo { width: 112px; height: 112px; }
  .hero-brand-name { font-size: 37px; }
  .hero-slogan { margin-bottom: 34px; font-size: 22px; }
  .phones { max-width: 460px; height: 430px; margin-bottom: 36px; }
  .phone-main { width: 188px; }
  .phone-left, .phone-right { width: 146px; }
  .phone-left { left: 10px; }
  .phone-right { right: 10px; }
  .download-button { width: 330px; min-height: 68px; font-size: 24px; }
}

@media (min-width: 680px) {
  body { max-width: none; margin: 0; box-shadow: none; }
  .hero { min-height: 0; }
  .phones { transform: none; margin-top: 0; }
}

@media (min-width: 900px) {
  .hero {
    min-height: 720px;
    padding: 70px clamp(44px, 7vw, 112px);
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(480px, 620px);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "brand phones"
      "name phones"
      "slogan phones"
      "download phones";
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: clamp(48px, 7vw, 110px);
    text-align: left;
  }
  .hero-brand-lockup { grid-area: brand; justify-content: flex-start; margin-bottom: 24px; }
  .hero-main-logo { width: 124px; height: 124px; }
  .hero-brand-name { grid-area: name; margin-bottom: 16px; font-size: 46px; }
  .hero-slogan { grid-area: slogan; justify-content: flex-start; margin-bottom: 42px; font-size: 24px; }
  .phones { grid-area: phones; width: 100%; max-width: 620px; height: 480px; margin: 0; }
  .phone-main { width: 208px; }
  .phone-left, .phone-right { width: 166px; bottom: 22px; }
  .phone-left { left: 8%; }
  .phone-right { right: 8%; }
  .download-button { grid-area: download; width: 300px; margin: 0; }
}

@media (max-width: 359px) {
  .hero { padding-right: 12px; padding-left: 12px; }
  .hero-slogan { gap: 7px; font-size: 17px; }
  .hero-slogan::before, .hero-slogan::after { width: 14px; }
  .phones { height: 326px; }
  .phone-main { width: 142px; }
  .phone-left, .phone-right { width: 104px; }
}