* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--kb-stage-bg, #0a080c);
}

body.btnText {
    background-color: var(--kb-stage-bg, #0a080c);
}

/* 全页中文主字体（未单独指定的文案继承此栈） */
:root {
    --kb-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "WenQuanYi Micro Hei", "Heiti SC", "STHeiti", sans-serif;
    /* 与主视觉底接近，fade 时中间不留白 */
    --kb-stage-bg: #0a080c;
}

.desktop {
    font-family: var(--kb-font-zh);
    --pc-header-h: 90px;
    /* 左右与屏边的留白，主内容区不再为右下二维码让位 */
    --pc-h-pad: clamp(32px, 5vw, 64px);
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100%;
    color: #fff;
    overflow: hidden;
    background: var(--kb-stage-bg, #0a080c);
}

/* ==================== 全屏轮播（暗底 + GPU，减轻 fade 白闪） ==================== */
.kb-swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--kb-stage-bg, #0a080c);
}

.kb-swiper .swiper-wrapper,
.kb-swiper .swiper-slide {
    background-color: var(--kb-stage-bg, #0a080c);
}

.kb-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--kb-stage-bg, #0a080c);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.kb-slide .slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

/* 中间区：左 title、右 main（二维码改至左下角色块，absolute 不占用本区） */
.kb-slide-inner {
    position: absolute;
    z-index: 2;
    top: var(--pc-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 40vw) minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: min(2vw, 24px);
    align-items: end;
    padding: 0 var(--pc-h-pad) max(3vh, 24px) var(--pc-h-pad);
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
}

.kb-slide .slide-title {
    position: relative;
    align-self: start;
    width: 100%;
    max-width: min(760px, 38vw);
    max-height: min(50vh, 100%);
    margin-top: min(2vh, 20px);
    object-fit: contain;
    object-position: left top;
    z-index: 3;
    pointer-events: none;
    justify-self: start;
}

.kb-slide .slide-main {
    position: relative;
    width: 100%;
    max-width: min(56vw, 900px);
    max-height: min(88vh, 980px);
    height: min(88vh, 980px);
    min-height: 0;
    object-fit: contain;
    object-position: right bottom;
    z-index: 2;
    pointer-events: none;
    justify-self: end;
    align-self: end;
}

/* ==================== 顶栏（与移动端同系渐变） ==================== */
.top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--pc-header-h);
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    background: linear-gradient(180deg,
            rgba(183, 0, 0, 0.3) 0%,
            rgba(154, 33, 33, 0) 100%);
    pointer-events: none;
    box-sizing: border-box;
}

.top * {
    pointer-events: auto;
}

.logo-box .logo {
    height: 56px;
    object-fit: contain;
}

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

.contact .btn {
    height: 44px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.contact .btn:hover {
    transform: translateY(-2px);
}

/* ==================== 左下：网格 — 左上留白 | 左下 扫码+码 | 右侧 tip 整图跨两行（上为按钮、下为说明） ==================== */
.downloadArea {
    position: absolute;
    left: 6vw;
    right: auto;
    bottom: 8vh;
    max-width: min(92vw, 1200px);
    z-index: 10;
    display: grid;
    grid-template-columns: auto minmax(200px, min(44vw, 480px));
    grid-template-rows: 1fr auto;
    column-gap: clamp(14px, 1.6vw, 24px);
    row-gap: 0;
    align-items: end;
    pointer-events: none;
}

.downloadArea * {
    pointer-events: auto;
}

/* 上排左：预留给「二维码上留白」，与图二一致 */
.downloadSpacer {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
}

/* 下排左：竖排字 + 二维码 */
.downloadQr {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.scan-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.2;
    user-select: none;
    font-family: var(--kb-font-zh);
    -webkit-font-smoothing: antialiased;
}

.tip-img {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 100%;
    height: auto;
    max-height: min(18vh, 250px);
    object-fit: contain;
    object-position: right bottom;
    align-self: end;
}

.qrcode-box {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    background: #fff;
    border: 2px solid #e02020;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

#qrcode img {
    width: 100% !important;
    height: 100% !important;
    visibility: visible !important;
}

/* ==================== 响应式：笔记本 / 矮屏 / 小宽度 ==================== */
@media (max-width: 1366px) {
    .desktop {
        --pc-header-h: 72px;
    }

    .top {
        padding: 0 32px;
    }

    .logo-box .logo {
        height: 44px;
    }

    .contact .btn {
        height: 38px;
    }

    .contact {
        gap: 14px;
    }

    .kb-slide .slide-title {
        max-width: min(600px, 42vw);
    }

    .kb-slide .slide-main {
        max-width: min(60vw, 720px);
        max-height: min(82vh, 880px);
        height: min(82vh, 880px);
    }

    .qrcode-box {
        width: 130px;
        height: 130px;
    }

    .downloadArea {
        grid-template-columns: auto minmax(200px, min(42vw, 440px));
    }

    .tip-img {
        max-height: min(26vh, 220px);
    }
}

@media (max-height: 760px) {
    .kb-slide .slide-title {
        max-height: min(45vh, 100%);
    }

    .kb-slide .slide-main {
        max-height: min(78vh, 800px);
        height: min(78vh, 800px);
    }

    .downloadArea {
        bottom: 5vh;
        grid-template-columns: auto minmax(200px, min(46vw, 400px));
        column-gap: 12px;
    }

    .tip-img {
        max-height: min(22vh, 180px);
    }
}

@media (min-width: 1920px) {
    .kb-slide .slide-title {
        max-width: 720px;
    }

    .kb-slide .slide-main {
        max-width: 900px;
        max-height: 880px;
        height: 880px;
    }

    .qrcode-box {
        width: 170px;
        height: 170px;
    }

    .tip-img {
        max-width: min(480px, 40vw);
        max-height: min(28vh, 260px);
    }
}