* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; color: #333; background: #fff; line-height: 1.6; padding: 64px 20px 20px; max-width: 800px; margin: 0 auto; }

.top-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; border-bottom: 1px solid #e5e5e5; }
.top-nav-inner { max-width: 800px; margin: 0 auto; padding: 14px 20px; text-align: center; font-size: 13px; }
.top-nav-inner a { display: inline-block; color: #999; text-decoration: none; margin: 0 14px; padding: 4px 0; transition: color 0.2s; }
.top-nav-inner a:hover { color: #000; }
.top-nav-inner a.active { color: #000; font-weight: 600; }
@media (max-width: 480px) {
    .top-nav-inner { padding: 12px 10px; font-size: 12px; }
    .top-nav-inner a { margin: 0 8px; }
}
h1 { text-align: center; padding: 30px 0; font-size: 24px; }
.divider { border: none; border-top: 1px solid #ccc; margin: 0; }
.content { padding: 20px 0; font-size: 14px; white-space: pre-line; }
.footer { text-align: center; padding: 30px 0 20px; border-top: 1px solid #eee; margin-top: 20px; }
.footer-info { font-size: 13px; color: #888; line-height: 1.9; }
.footer-info a { color: #888; }
.icon-wrap { text-align: center; padding-top: 20px; }
.icon-wrap img { width: 88px; height: 88px; border-radius: 18px; }
.screenshots { display: flex; gap: 16px; justify-content: center; align-items: flex-start; padding: 16px 0 4px; flex-wrap: wrap; }
.screenshot-item { width: 220px; text-align: center; }
.screenshot-item img { width: 100%; border: 1px solid #ddd; border-radius: 8px; }
.screenshot-title { padding-top: 8px; font-size: 13px; color: #666; }
.nav { text-align: center; padding: 18px 0; font-size: 14px; }
.nav a { color: #333; text-decoration: none; margin: 0 10px; }
.nav a.active { text-decoration: underline; }
.hero-subtitle { text-align: center; padding-bottom: 22px; font-size: 14px; color: #777; letter-spacing: 0.5px; }
.shop-more { text-align: right; padding: 14px 4px 4px; font-size: 13px; }
.shop-more a { color: #4D6BFE; text-decoration: none; }
.shop-more a:hover { text-decoration: underline; }

.shop-intro { padding: 16px 0 6px; font-size: 14px; color: #555; line-height: 1.8; }
.shop-section { padding: 18px 0 4px; }
.shop-section-title { font-size: 16px; font-weight: 700; padding-left: 10px; border-left: 4px solid #8C79FF; margin-bottom: 14px; line-height: 1.2; }
.shop-section.coins .shop-section-title { border-left-color: #45B79A; }
.shop-section.eggs .shop-section-title { border-left-color: #6F8BFF; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shop-card { background: #FAFAFA; border: 1px solid #EEE; border-radius: 12px; padding: 14px 10px; text-align: center; }
.shop-card.diamond { background: linear-gradient(180deg, #F4F0FF, #EFF1FF); border-color: #DCD3FF; }
.shop-card.egg { background: linear-gradient(180deg, #F0F2FF, #F5F5FF); border-color: #D8DCF0; }
.shop-card.coin { background: linear-gradient(180deg, #EFFBF7, #EAF7F2); border-color: #C8EBDD; }
.shop-card img { width: 64px; height: 64px; object-fit: contain; }
.shop-card-name { font-size: 13px; color: #555; padding-top: 6px; }
.shop-card-amount { font-size: 15px; font-weight: 700; color: #333; padding-top: 4px; }
.shop-card-price { font-size: 16px; font-weight: 700; color: #C13838; padding-top: 8px; }
.shop-buy-btn { margin-top: 12px; padding: 6px 18px; font-size: 13px; background: #4D6BFE; color: #fff; border: none; border-radius: 16px; cursor: pointer; font-family: inherit; }
.shop-buy-btn:hover { background: #3856E0; }

.shop-notice { padding: 18px 0; font-size: 13px; color: #666; line-height: 1.9; }
.shop-notice strong { color: #333; }

.app-showcase { padding: 26px 0 10px; }
.app-section-title { font-size: 18px; font-weight: 800; color: #1d1d1f; padding: 8px 0 12px; }
.app-section-title.secondary { padding-top: 26px; }
.app-desc { font-size: 14px; color: #555; line-height: 1.85; padding-bottom: 18px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 8px; }
.feature-card { background: #FAFAFA; border: 1px solid #EEE; border-radius: 12px; padding: 14px 12px; text-align: center; }
.feature-icon { font-size: 24px; line-height: 1; padding-bottom: 8px; }
.feature-title { font-size: 14px; font-weight: 700; color: #333; padding-bottom: 4px; }
.feature-desc { font-size: 12px; color: #777; line-height: 1.6; }
.screens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-bottom: 8px; }
.screen-item { margin: 0; text-align: center; }
.screen-item img { width: 100%; border: 1px solid #e3e3e3; border-radius: 8px; display: block; }
.screen-item figcaption { padding-top: 6px; font-size: 12px; color: #777; }

.product-info { background: #FAFAFA; border: 1px solid #EEE; border-radius: 10px; padding: 14px 16px; margin-top: 14px; font-size: 13px; color: #555; line-height: 1.85; }
.product-info strong { color: #333; }

.get-app { padding: 26px 0 6px; }
.get-app-body { background: #F6F8FE; border: 1px solid #DDE3F2; border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: #455; line-height: 1.9; }
.get-app-body strong { color: #1d1d1f; }

.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 8px; }
.flow-step { background: #FAFAFA; border: 1px solid #EEE; border-radius: 12px; padding: 16px 14px; }
.flow-num { width: 30px; height: 30px; border-radius: 50%; background: #4D6BFE; color: #fff; text-align: center; line-height: 30px; font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.flow-title { font-size: 14px; font-weight: 700; color: #1d1d1f; padding-bottom: 6px; }
.flow-desc { font-size: 12.5px; color: #666; line-height: 1.7; }

.faq { padding: 26px 0 6px; }
.faq-item { background: #FAFAFA; border: 1px solid #EEE; border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.faq-q { font-size: 14px; font-weight: 700; color: #1d1d1f; padding-bottom: 6px; }
.faq-a { font-size: 13px; color: #555; line-height: 1.8; }

.modal-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal-mask.show { display: flex; }
.modal-box { background: #fff; border-radius: 14px; padding: 22px 22px 18px; max-width: 320px; width: 100%; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.modal-title { font-size: 16px; font-weight: 700; padding-bottom: 10px; color: #333; }
.modal-body { font-size: 14px; color: #555; padding-bottom: 18px; line-height: 1.7; }
.modal-close { padding: 8px 28px; background: #4D6BFE; color: #fff; border: none; border-radius: 18px; cursor: pointer; font-size: 14px; font-family: inherit; }

@media (max-width: 560px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-card { padding: 12px 8px; }
    .shop-card img { width: 56px; height: 56px; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .screens-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-grid { grid-template-columns: 1fr; }
}