/* ==========================================
           1. 全局重置与极简版面控制 (Global Reset)
           ========================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            user-select: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #0f0a06; /* 深邃奢华暗底，防止边缘穿帮 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* ==========================================
           2. 移动端流式主容器 (Mobile Container)
           ========================================== */
        .page-container {
            width: 100%;
            max-width: 420px;
            height: 100vh;
            position: relative;
            overflow: hidden;
            /* 奢华爱马仕橙流体渐变背景 */
            background: radial-gradient(circle at 50% 10%, #3a1500 0%, #150600 70%, #080200 100%);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 0 40px rgba(255, 81, 0, 0.3);
        }

        /* ==========================================
           3. 动态液态高级特效背景 (Liquid Effect)
           ========================================== */
        .liquid-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }

        .liquid-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(50px);
            mix-blend-mode: screen;
            opacity: 0.45;
            animation: liquidMove 12s infinite alternate ease-in-out;
        }

        .orb-1 {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, #ff5100 0%, rgba(255, 81, 0, 0) 70%);
            top: -50px;
            left: -50px;
        }

        .orb-2 {
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, #ff9500 0%, rgba(255, 149, 0, 0) 70%);
            bottom: 50px;
            right: -50px;
            animation-duration: 8s;
            animation-delay: -2s;
        }

        @keyframes liquidMove {
            0% { transform: translate(0, 0) scale(1) rotate(0deg); }
            50% { transform: translate(40px, 60px) scale(1.2) rotate(120deg); }
            100% { transform: translate(-20px, -30px) scale(0.9) rotate(360deg); }
        }

        /* 极光流光线条 */
        .fluid-line {
            position: absolute;
            width: 200%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255,81,0,0) 0%, rgba(255,81,0,0.1) 50%, rgba(255,81,0,0) 100%);
            transform: rotate(-30deg);
            top: -50%;
            left: -50%;
            animation: flowLine 6s infinite linear;
            z-index: 1;
        }

        @keyframes flowLine {
            0% { transform: translate(-30%, -30%) rotate(-30deg); }
            100% { transform: translate(30%, 30%) rotate(-30deg); }
        }

        /* ==========================================
           4. 各组件模块排版 (Components)
           ========================================== */
        /* 头部与首个下载入口 */
        .header {
            width: 100%;
            height: 8vh;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(10px);
            background: rgba(15, 10, 6, 0.6);
            border-bottom: 1px solid rgba(255, 81, 0, 0.15);
            z-index: 10;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .logo-icon {
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #ff7a00, #ff2300);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            box-shadow: 0 0 12px rgba(255, 81, 0, 0.6);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-title {
            color: #ffffff;
            font-size: 14px;
            font-weight: 900;
            letter-spacing: 1px;
            text-shadow: 0 0 8px rgba(255,255,255,0.2);
        }

        .logo-sub {
            color: #ff7a00;
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        /* 顶部下载按钮 */
        .top-btn {
            background: linear-gradient(90deg, #ff5100, #ff8c00);
            border: none;
            border-radius: 20px;
            color: #ffffff;
            font-size: 12px;
            font-weight: bold;
            padding: 6px 16px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(255, 81, 0, 0.4);
            animation: pulse-mini 1.5s infinite alternate;
        }

        @keyframes pulse-mini {
            0% { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 81, 0, 0.4); }
            100% { transform: scale(1.05); box-shadow: 0 4px 15px rgba(255, 81, 0, 0.8); }
        }

        /* 文案区 (Copywriting) */
        .copy-section {
            width: 100%;
            height: 14vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
            z-index: 5;
        }

        .slogan-tag {
            background: rgba(255, 81, 0, 0.15);
            border: 1px solid rgba(255, 81, 0, 0.4);
            color: #ff9500;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 10px;
            border-radius: 10px;
            margin-bottom: 6px;
            letter-spacing: 1.5px;
        }

        .slogan-main {
            color: #ffffff;
            font-size: 24px;
            font-weight: 900;
            letter-spacing: 2px;
            line-height: 1.2;
            text-shadow: 0 2px 10px rgba(0,0,0,0.8);
        }

        .slogan-main span {
            color: #ff5100;
            background: linear-gradient(to right, #ff9500, #ff3c00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .slogan-sub {
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            margin-top: 4px;
            letter-spacing: 1px;
        }

        /* 核心视觉展示区: 3D 叠层预览卡片 */
        .visual-section {
            width: 100%;
            height: 48vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 5;
        }

        .card-3d-wrap {
            position: relative;
            width: 85%;
            height: 90%;
            perspective: 1000px;
        }

        /* 3D 浮动卡片通用样式 */
        .preview-card {
            position: absolute;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.6);
            transition: all 0.5s ease-in-out;
            border: 1.5px solid rgba(255, 255, 255, 0.1);
        }

        .preview-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 精细化的卡片玻璃质感饰物与角标 */
        .card-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 81, 0, 0.85);
            color: white;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 6px;
            backdrop-filter: blur(5px);
            z-index: 2;
        }

        .play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 12px;
            z-index: 1;
        }

        .play-btn-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 81, 0, 0.9);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 20px rgba(255, 81, 0, 0.8);
            border: 2px solid #ffffff;
            animation: pulse-glow 2s infinite;
        }

        .play-btn-icon::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8px 0 8px 14px;
            border-color: transparent transparent transparent #ffffff;
            margin-left: 4px;
        }

        @keyframes pulse-glow {
            0% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 15px rgba(255, 81, 0, 0.6); }
            50% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 25px rgba(255, 81, 0, 1); }
            100% { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 15px rgba(255, 81, 0, 0.6); }
        }

        /* 3D 空间堆叠排版设计 */
        /* 1号卡片 (主图：竖图，黄金中心位) */
        .card-main {
            width: 68%;
            height: 100%;
            left: 16%;
            z-index: 4;
            transform: rotateY(0deg) translateZ(20px);
            border: 2px solid rgba(255, 81, 0, 0.5);
        }

        /* 2号卡片 (左侧辅图，向后折叠) */
        .card-left {
            width: 52%;
            height: 80%;
            left: -5%;
            top: 10%;
            z-index: 2;
            transform: rotateY(25deg) translateZ(-50px);
            opacity: 0.65;
            filter: blur(1px);
        }

        /* 3号卡片 (右侧辅图，向后折叠) */
        .card-right {
            width: 52%;
            height: 80%;
            right: -5%;
            top: 10%;
            z-index: 2;
            transform: rotateY(-25deg) translateZ(-50px);
            opacity: 0.65;
            filter: blur(1px);
        }

        /* 卡片底部诱惑文案 */
        .card-title-text {
            color: #ffffff;
            font-size: 13px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .card-desc-text {
            color: #ff9500;
            font-size: 10px;
            margin-top: 2px;
        }

        /* 动态滚动跑马灯 & 诱导弹幕 (Notification ticker) */
        .ticker-section {
            width: 100%;
            height: 6vh;
            background: rgba(255, 81, 0, 0.05);
            border-top: 1px solid rgba(255, 81, 0, 0.1);
            border-bottom: 1px solid rgba(255, 81, 0, 0.1);
            display: flex;
            align-items: center;
            overflow: hidden;
            z-index: 5;
        }

        .ticker-container {
            display: flex;
            white-space: nowrap;
            animation: tickerFlow 15s linear infinite;
        }

        .ticker-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,0.8);
            font-size: 11px;
            padding: 0 20px;
        }

        .ticker-item span {
            color: #ff7a00;
            font-weight: bold;
        }

        .badge-live {
            background: #ff2300;
            color: #fff;
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 9px;
            font-weight: bold;
            animation: flash 1s infinite;
        }

        @keyframes tickerFlow {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        /* ==========================================
           5. 强力行动召唤区 (CTA Panel - Bottom)
           ========================================== */
        .cta-section {
            width: 100%;
            height: 24vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 16px;
            z-index: 5;
            background: linear-gradient(0deg, rgba(8,2,0,1) 0%, rgba(15,10,6,0.8) 100%);
        }

        /* 倒计时与安全提示 */
        .countdown-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
        }

        .countdown-time {
            color: #ff3c00;
            font-weight: bold;
            background: rgba(255, 60, 0, 0.15);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(255, 60, 0, 0.3);
        }

        /* 极强冲击力CTA按钮 */
        .cta-button {
            width: 100%;
            height: 58px;
            background: linear-gradient(90deg, #ff5100 0%, #ff8c00 50%, #ff2300 100%);
            background-size: 200% auto;
            border: none;
            border-radius: 29px;
            color: #ffffff;
            font-size: 23px;
            font-weight: 900;
            letter-spacing: 5px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            outline: none;
            position: relative;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            box-shadow: 0 8px 25px rgba(255, 81, 0, 0.5), 
                        0 0 0 4px rgba(255, 81, 0, 0.2),
                        inset 0 2px 4px rgba(255,255,255,0.4);
            animation: floatBtn 2.5s infinite ease-in-out, gradientBg 3s infinite linear;
            transition: all 0.2s ease-in-out;
        }

        /* 炫酷流光划过效果 */
        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            animation: shine 2s infinite ease-in-out;
        }

        @keyframes shine {
            0% { left: -150%; }
            50% { left: 150%; }
            100% { left: 150%; }
        }

        @keyframes floatBtn {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-4px) scale(1.02); }
        }

        @keyframes gradientBg {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .cta-button:active {
            transform: scale(0.96) translateY(0);
            box-shadow: 0 4px 10px rgba(255, 81, 0, 0.4);
        }

        /* 隐私防追踪保证文案 */
        .privacy-hint {
            margin-top: 10px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .privacy-icon {
            display: inline-block;
            width: 11px;
            height: 11px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff9500"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
        }