* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: auto; font-family: sans-serif; overflow-x: hidden; }
.bg-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a2f4f; z-index: 0; }
.bg-image { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 100%; background-image: url('https://webcdn.pics/20260422/36a2ea76369545ca9662e58316c68cad.jpg'); background-size: cover; background-position: center; z-index: 1; }
.h5-container { position: relative; z-index: 10; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 20px; overflow-y: auto; }
.top-banner { width: 100%; border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 12px; margin-bottom: 30px; }
.banner-img { width: 100%; display: block; }
.brand-title-section { text-align: center; margin-bottom: 30px; color: #fff; }
.entrance-btn { display: block; text-align: center; padding: 14px; background: #ffa500; color: #fff; font-weight: bold; border-radius: 8px; text-decoration: none; margin-bottom: 30px; }

/* 品牌卡片新风格 */
.brand-card-wrapper { text-decoration: none; display: block; width: 100%; margin-bottom: 20px; }
.brand-card { position: relative; display: flex; align-items: center; background: rgba(10, 20, 40, 0.3); border: 3px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 16px 70px 16px 16px; backdrop-filter: blur(10px); }
.brand-card-inner { display: flex; gap: 16px; flex: 1; align-items: center; }
.brand-logo-box { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; }
.brand-logo { width: 100%; height: 100%; object-fit: cover; }
.brand-name { color: #fff; font-size: 16px; margin-bottom: 5px; }
.brand-description { color: #b0b8c8; font-size: 12px; }
.card-entrance-overlay { position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: rgba(43, 49, 57, 0.6); display: flex; align-items: center; justify-content: center; border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.entrance-arrow { width: 12px; height: 12px; border-top: 2px solid #a0a9b9; border-right: 2px solid #a0a9b9; transform: rotate(45deg); }
.meteors-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 100%; pointer-events: none; z-index: 2; overflow: hidden; }
.meteor { position: absolute; width: 1.5px; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); opacity: 0; filter: drop-shadow(0 0 4px white); }
@keyframes meteorfall { 0% { transform: translateY(0) translateX(0) rotate(45deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(100vh) translateX(-500px) rotate(45deg); opacity: 0; } }