* {
    padding: 0;
    margin: 0;
    -webkit-user-drag: none;
    user-select: none;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0a0408;
}

.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: #fff;
}

/* ============ 背景 ============ */
.desktop>.bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ============ 内容层 ============ */
.overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ============ 顶部导航 ============ */
.top {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.4vh 3vw;
}

.logo {
    height: 7vh;
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.contact {
    display: flex;
    align-items: center;
    gap: 0.8vw;
}

.nav-btn {
    height: clamp(38px, 5vh, 56px);
    width: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.nav-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ============ 主体：左标题+扫码 / 右人物 ============ */
.main {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5vw;
    padding: 0 3vw 2vh;
}

.main-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1vh 0 1.5vh;
    max-width: 52vw;
}

.title-img {
    width: 100%;
    max-width: clamp(460px, 40vw, 720px);
    height: auto;
    /* 不再卡 max-height —— 短屏下也按 40vw 宽度等比缩放，比例与右侧人物图协调 */
    margin-top: clamp(20px, 4vw, 60px);
    object-fit: contain;
    filter: drop-shadow(0 8px 22px rgba(120, 50, 180, 0.45));
}

/* ============ 扫码区域：QR + tip 图（tip 自带描述文字 + 扫码下载按钮） ============ */
.qr-area {
    display: flex;
    align-items: center;
    gap: clamp(18px, 1.6vw, 30px);
    margin-left: 3vw;
}

.qrcode-box {
    width: clamp(150px, 11vw, 200px);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: #fff;
    padding: clamp(6px, 0.6vw, 10px);
    border-radius: clamp(8px, 0.8vw, 12px);
    border: 2px solid #c63ad9;
    box-shadow:
        0 0 0 1px rgba(255, 120, 220, 0.35),
        0 0 16px rgba(198, 58, 217, 0.55),
        0 0 32px rgba(198, 58, 217, 0.35),
        0 6px 18px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

#qrcode {
    width: 100%;
    height: 100%;
}

#qrcode img,
#qrcode canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.tip-img {
    flex-shrink: 0;
    height: clamp(150px, 11vw, 200px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(220, 60, 200, 0.35));
}

/* ============ 右侧：人物图（作为下载点击区） ============ */
.renwu-img {
    flex: 0 0 auto;
    width: clamp(520px, 52vw, 880px);
    height: auto;
    max-height: 96vh;
    object-fit: contain;
    cursor: pointer;
    align-self: center;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}

/* ============ 响应式 ============ */
@media (max-height: 820px) {
    .title-img {
        margin-top: clamp(12px, 2vw, 36px);
    }

    .qrcode-box {
        width: clamp(120px, 9vw, 170px);
    }

    .tip-img {
        height: clamp(120px, 9vw, 170px);
    }

    .renwu-img {
        max-height: 88vh;
    }
}

@media (max-width: 1200px) {
    .main-left {
        max-width: 50vw;
    }

    .qrcode-box {
        width: clamp(130px, 11vw, 170px);
    }

    .tip-img {
        height: clamp(130px, 11vw, 170px);
    }

    .renwu-img {
        width: clamp(440px, 48vw, 640px);
    }
}

@media (max-width: 980px) {
    .main {
        padding: 0 2.5vw 1.5vh;
        gap: 1vw;
    }

    .main-left {
        max-width: 56vw;
    }

    .qrcode-box {
        width: clamp(110px, 11vw, 150px);
    }

    .tip-img {
        height: clamp(110px, 11vw, 150px);
    }
}