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

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

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

/* 背景舞台：尺寸等效 object-fit:cover 的 16:9 画布，背景与人物共用坐标系 */
.bgStage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 177.78vh;
    z-index: 0;
}

@media (min-aspect-ratio: 16/9) {
    .bgStage {
        width: 100vw;
        height: 56.25vw;
    }
}

.bgImg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 人物三人组：占右半屏，脚踩底部特性条上沿（设计稿 1920 画布内约 x890-1910 / 底 y942） */
.heroImg {
    position: absolute;
    right: 0.3%;
    bottom: 12.6%;
    width: 49%;
}

.content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2.5vh 5.5vw 0;
}

/* ============ 顶部导航：半透明通栏色条（负 margin 抵掉 content 内边距），底部浅色分割线 ============ */
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    margin: -2.5vh -5.5vw 0;
    padding: 1.8vh 5.5vw;
    background: rgba(10, 14, 38, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.logo {
    height: 9vh;
    width: auto;
}

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

/* 间距用 margin 不用 flex gap：Chromium<84 不支持 flex gap */
.navBtn + .navBtn {
    margin-left: 1.4vw;
}

.navBtn {
    /* 设计 208x60；先写 vh 兜底：Chromium<79 不认 clamp() */
    height: 5vh;
    height: clamp(38px, 5vh, 60px);
    width: auto;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.navBtn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* 左侧标题整图（勾选行白色文字已烤入图内）；
   max-height 防超宽屏（>2.15:1）时图底烤入的 CTA 按钮压进底部特性条 */
.titleImg {
    margin-top: 6.5vh;
    width: 41vw;
    max-height: 62vh;
    object-fit: contain;
    object-position: left top;
}

/* 扫码卡片：右下绝对定位，叠在人物腿部之上 */
.qrArea {
    position: absolute;
    right: 6.2vw;
    bottom: 20.5vh;
    width: 32vw;
    z-index: 3;
}

.qrPic {
    display: block;
    width: 100%;
}

/* 二维码盖住卡片图内烤死的假码（假码区约 x4.9% y11.7% w20.3% h56.6%） */
.qrBox {
    position: absolute;
    left: 4.9%;
    top: 11.7%;
    width: 20.3%;
    height: 56.6%;
    background: #fff;
    border-radius: 8%/10%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1%;
}

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

/* 底部特性条：全宽贴底，与头部同色的半透明底带 */
.bottomStrip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    background: rgba(10, 14, 38, 0.6);
}