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

/* 统一缩放因子：1920×1080 基准（1.78 = 1920/1080），超宽屏按高度封顶，防止元素放大溢出 */
:root {
    --dw: min(1vw, 1.78vh);
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    width: 100%;
    height: 100%;
}

.desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #05070d;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ============ 顶栏：logo + 官方群组/商务渠道/官方客服 三胶囊 ============ */
.header {
    position: absolute;
    top: calc(1.6 * var(--dw));
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(14.5 * var(--dw));
    gap: 2vw;
}

.logo {
    height: calc(3.9 * var(--dw));
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.contact {
    display: flex;
    align-items: center;
    gap: calc(3.5 * var(--dw));
}

.nav-btn {
    height: calc(2.3 * var(--dw));
    width: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.nav-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

/* ============ 左侧主标题（艺术字+红条+白色副标语烧在图内） ============ */
.title-img {
    position: absolute;
    left: calc(14.9 * var(--dw));
    top: calc(12.8 * var(--dw));
    z-index: 3;
    width: calc(33.4 * var(--dw));
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

/* ============ 左下二维码整块（qrpic 1320×316 @2x，白盒区 x29-297/y29-297） ============ */
.qr-panel {
    position: absolute;
    left: calc(14.9 * var(--dw));
    bottom: calc(14 * var(--dw));
    z-index: 4;
    width: calc(33.4 * var(--dw));
    aspect-ratio: 1320 / 316;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 动态二维码盖在图内印刷二维码上：坐标 = 图内白盒位置 × (57.5/1320) */
.qr-panel #qrcode {
    position: absolute;
    left: calc(0.73 * var(--dw));
    top: calc(0.73 * var(--dw));
    width: calc(6.78 * var(--dw));
    height: calc(6.78 * var(--dw));
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-panel #qrcode img,
.qr-panel #qrcode canvas {
    width: 94% !important;
    height: 94% !important;
    display: block;
}

/* ============ 底部整条（背景+三个红按钮烧在 bottompic 里），热区接点击 ============ */
.bottom-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 4;
}

.bottom-pic {
    display: block;
    width: 100%;
    height: auto;
}

/* 按钮在图内的实测范围（图宽 3840）：1093-1563 / 1661-2131 / 2229-2747，y 74-165（图高 240），热区各向外放 0.5% */
.hot {
    position: absolute;
    top: 26%;
    height: 48%;
    cursor: pointer;
}

.hot-1 {
    left: 27.9%;
    width: 13.2%;
}

.hot-2 {
    left: 42.7%;
    width: 13.2%;
}

.hot-3 {
    left: 57.5%;
    width: 14.5%;
}