/* ===== Root Font-Size ===== */
/* 桌面端：统一用 50px 基准（= 3840设计稿 100px 的 1/2，即 1920 设计稿）。
     所有元素已转为固定 px，不再随断点缩放；移动端会在媒体查询内单独用 vw 基准。 */
html {
    font-size: 50px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ===== Reset ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:
        "PingFang SC",
        "Microsoft YaHei",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background: #fafafa;
    color: #3d496c;
    overflow-x: hidden;
    line-height: 1.5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* ===== Page Shell ===== */
.page-wrapper {
    max-width: 3840px;
    /* 超宽屏居中，不拉伸 */
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Top Nav ===== */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 53px;
    /* 设计稿 106px → 1920: 53px */
    position: relative;
    z-index: 10;
    background: transparent;
}

.top-nav__logo {
    height: 28px;
    /* 56px → 28px */
    padding: 8px 10px 8px 30px;
    object-fit: contain;
}

.top-nav__links {
    display: flex;
    align-items: center;
    gap: 78.5px;
    /* 157px → 78.5px */
    padding: 8px 50px 8px 10px;
}

.top-nav__link {
    font-size: 14px;
    /* 28px → 14px */
    font-weight: 400;
    color: #3d496c;
    white-space: nowrap;
    cursor: default;
    transition: color 0.2s;
}

.top-nav__link:hover {
    color: #1890ff;
}

/* ===== Hero ===== */
.hero {
    width: 100%;
    /* background: url('../images/hero-bg.png') center/cover no-repeat; */

    background-image: url("../images/hero-bg.png");
    background-size: cover;
    /* 让图片覆盖容器，但会裁剪底部 */
    /* 或者 */
    background-size: 100% 100%;
    /* 强制拉伸填满，弧度会变形但不会消失 */
    background-position: center bottom;
    /* 重点：让底部对齐，确保弧线露出来 */
    background-repeat: no-repeat;
    position: relative;
    /* 防止装饰元素溢出 */
    min-height: 527px;
    /* 设计稿 1054px → 1920: 527px */
    /* max-width: 1920px; */
    margin: 0 auto;
}

.hero__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* max-width: 1920px;        */
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    min-height: 527px;
}

/* 文字区域 */
.hero__content {
    position: relative;
    /* left: auto; */
    /* top: auto; */
    width: auto;

    max-width: 799px;
    /* 15.98rem → 799px */
    margin-left: 15.7552vw;
    /* 6.05rem → 302.5px */
    margin-top: 45px;
    /* 0.9rem → 45px */
    padding: 0 0 34px 0;
    /* 0 0.48rem 0.68rem 0 → 0 24px 34px 0 */
    margin-right: 23px;
    box-sizing: border-box;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 45px;
    /* 0.9rem → 45px */
    flex: 0 1 auto;
    min-width: 0;
}

.hero__title {
    color: #fff;
    font-family: Inter;
    font-size: 48px;
    /* 0.96rem → 48px */
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.hero__desc {
    color: #fff;
    font-family: Inter;
    font-size: 18px;
    /* 0.36rem → 18px */
    font-style: normal;
    font-weight: 400;
    line-height: 27.5px;
    /* 0.55rem → 27.5px */
    letter-spacing: 0.54px;
}

.hero__env {
    color: #fff;
    font-family: Inter;
    font-size: 12px;
    /* 0.24rem → 12px */
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    /* 0.42rem → 21px */
    letter-spacing: 0.24px;
}

.hero__overlay {
    /* position: relative; */
    margin-right: 292px;

    width: 28.07%;
    /* 10.78rem / 38.4 → 28.07%（占 hero 宽度百分比） */
    min-width: 378px;
    /* 设计稿最小宽度 */
    min-height: 206.53px;
    /* 设计稿最小高度 */
    /* margin-right: 15.21%;      */
    margin-top: 76px;
    /* 1.52rem → 76px */
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    max-width: 539px;
}

.hero__overlay img {
    width: 100%;
    height: auto;
}

/* 装饰元素——定位用百分比（占 3840 设计稿宽 / 1054 设计稿高），大小用固定 px（= 原 rem × 50） */
.hero__deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hero__deco--airplane {
    left: 45.05%;
    top: 44.5%;
    width: 125.83px;
}

/* 原 left:17.32rem top:4.69rem width:2.5166rem */
.hero__deco--circle {
    right: 92.98%;
    top: 45.92%;
    width: 409.5px;
    height: 409.5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

/* 原 right:35.72rem top:4.84rem w/h:8.19rem */
.hero__deco--block-top {
    left: 92.79%;
    top: 25.43%;
    width: 183.14px;
    height: 246.67px;
    transform: rotate(-0.977deg);
}

/* 原 left:35.63rem top:2.68rem width:3.66273rem */
.hero__deco--block-bottom {
    left: 91.72%;
    top: 14.8%;
    width: 183.14px;
    height: 246.67px;
    transform: rotate(-0.977deg);
}

/* 原 left:35.22rem top:1.56rem width:3.66273rem */
.hero__deco--cloud {
    left: 4.22%;
    top: 10.03%;
    width: 115.04px;
}

/* 原 left:1.62rem top:1.69rem width:2.30085rem */
.hero__deco--trail {
    left: 49.05%;
    top: 60.39%;
    width: 147.62px;
}

/* 原 left:18.8334rem top:6.3649rem width:2.95241rem */

.hero__mobile-illust {
    display: none;
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
}

.content-inner {
    /* 不需要额外的 padding 或 max-width */
}

.main-card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 72.865%;
    /* 27.98rem(1399px) / 1920 → 固定百分比，微信式自适应宽度 */
    height: auto;
    /* 高度自适应 */
    margin: -121.5px auto 0;
    /* -2.43rem → -121.5px，左右自动居中 */
    background: #fff;
    border-radius: 20px;
    /* 0.4rem → 20px */
    padding: 32px 42px 50px 42px;
    /* 0.64rem 1.2rem 1rem 0.84rem → 32px 60px 50px 42px（左右统一 42px 最小边距） */
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
    /* 0 0.04rem 0.4rem 0 → 0 2px 20px 0 */
    z-index: 2;
    max-width: 1399px;
}

/* ===== Download Section ===== */
.download-section {
    position: static;
    /* margin-bottom: 56px;      */
}

.download-section__title {
    font-size: 32px;
    /* 0.64rem → 32px */
    font-weight: 500;
    color: #3d496c;
    margin-bottom: 24px;
    /* 0.48rem → 24px */
}

#tab-container {
    display: flex;
    align-items: center;
    gap: 19.5px;
    /* 0.39rem → 19.5px */
    margin-bottom: 47px;
    /* 0.94rem → 47px */
    flex-wrap: wrap;
}

/* 胶囊外壳 */
.tab-switch {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 37.5px;
    /* 0.75rem → 37.5px */
    padding: 1px;
    /* 0.02rem → 1px */
    flex-shrink: 0;
    /* 允许在被白色区域挤压时缩小 */
    width: 299.5px;
    /* 5.99rem → 299.5px（1920 定值） */
    max-width: calc(100% - 84px);
    /* 与白色区域左右各留 ≥42px 时优先级更高 */
    height: 54px;
    /* 1.08rem → 54px */
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: "PingFang SC";
}

/* 未激活按钮 */
.tab-switch__btn {
    flex: 1;
    height: 100%;
    font-size: 20px;
    /* 0.4rem → 20px */
    font-weight: 400;
    color: #3d496c;
    border-radius: 35.5px;
    /* 0.71rem → 35.5px */
    cursor: pointer;

    border: none;
    background: transparent;
    font-family: "PingFang SC";
    line-height: 1;
}

/* 激活按钮 */
.tab-switch__btn--active {
    background: #4591fe;
    color: #fff;
    border-radius: 35.5px;
    /* 0.71rem → 35.5px */
    box-shadow: 0 2px 8px rgba(29, 101, 221, 0.25);
    /* 0 0.04rem 0.16rem → 0 2px 8px */
    flex: none;
    width: 154px;
    /* 3.08rem → 154px */
}

.download-section__desc {
    position: static;
    color: rgba(61, 73, 108, 0.6);
    font-family: "PingFang SC";
    font-size: 16px;
    /* 0.32rem → 16px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 407px;
    /* 8.14rem → 407px */
}

/* ===== Platform Cards（下载中心：flex 居中） ===== */
.platform-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 发送端 5 卡正好填满=左右各 42px；接收端 4 卡整体居中 */
    align-items: center;
    gap: 20px;
    /* 0.4rem → 20px */
}

.platform-card {
    width: 247px;
    /* 4.94rem → 247px（固定 px） */
    height: 129px;
    /* 2.58rem → 129px */
    flex-shrink: 0;
    background: linear-gradient(160deg, #6197ff 0%, #1d65dd 100%);
    border-radius: 10px;
    /* 0.2rem → 10px */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

#cards-receiver .platform-card,
#cards-sender .platform-card {
    flex: none;
    width: 247px;
    height: 129px;
}

.platform-card__content {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: opacity 0.25s ease;
}

.platform-card__icon {
    width: 50px;
    /* 1rem → 50px */
    height: 50px;
    /* 1rem → 50px */
    flex-shrink: 0;
    margin-right: 14px;
    /* 0.28rem → 14px */
}

.platform-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.platform-card__info {
    display: flex;
    flex-direction: column;
    gap: 9.25px;
    /* 0.185rem → 9.25px */
    padding-top: 2px;
    /* 0.04rem → 2px */
}

.platform-card__name {
    font-size: 18px;
    /* 0.36rem → 18px */
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    font-family: "PingFang SC";
    line-height: 1;
    height: 23px;
    align-items: center;
    display: flex;
}

.platform-card__action {
    display: flex;
    align-items: center;
    gap: 1.75px;
    /* 0.035rem → 1.75px */
}

.platform-card__action-text {
    font-size: 12px;
    /* 0.24rem → 12px */
    font-weight: 400;
    color: #fff;
    line-height: 1;
    font-family: "PingFang SC";
    height: 14px;
    align-items: center;
    display: flex;
}

.platform-card__action-arrow {
    width: 14px;
    /* 0.28rem → 14px */
    height: 14px;
    /* 0.28rem → 14px */
    flex-shrink: 0;
}

.platform-card__action-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-left: 5px;
}

/* Hover */
.platform-card__hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .platform-card:hover .platform-card__hover {
        opacity: 1;
        pointer-events: auto;
    }

    .platform-card:hover .platform-card__content {
        opacity: 0;
    }

    .platform-card:active .platform-card__hover {
        opacity: 1;
        pointer-events: auto;
    }

    .platform-card:active .platform-card__content {
        opacity: 0;
    }
}

.hover-single {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    text-align: center;
    padding-top: 18px;
    /* 0.36rem → 18px */
}

.hover-single__icon-wrap {
    width: 50px;
    /* 1rem → 50px */
    height: 50px;
    /* 1rem → 50px */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 0 10px 0;
    /* 0 0 0.2rem 0 → 0 0 10px 0 */
}

.hover-single__icon {
    width: 31px;
    /* 0.62rem → 31px */
    height: 31px;
    /* 0.62rem → 31px */
    display: block;
}

.hover-single__text {
    color: #fff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 12px;
    /* 0.24rem → 12px */
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 4px 0;
    /* 0 0 0.08rem 0 → 0 0 4px 0 */
    flex-shrink: 0;
    height: 19px;
    align-items: center;
    display: flex;
}

.hover-single__version {
    color: #fff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 7px;
    /* 0.14rem → 7px */
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
    height: 14px;
    align-items: center;
    display: flex;
}

.hover-dual {
    display: flex;
    gap: 7px;
    /* 0.14rem → 7px */
    width: 100%;
    height: 100%;
    padding: 8px;
    /* 0.16rem → 8px */
    align-items: stretch;
}

.hover-dual__section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    /* 0.2rem → 10px */
    cursor: pointer;
    padding-top: 10px;
    /* 0.2rem → 10px */
    transition: background 0.1s;
}

.hover-dual__section:active {
    background: rgba(0, 0, 0, 0.16);
}

.hover-dual__icon {
    width: 31px;
    /* 0.62rem → 31px */
    height: 31px;
    /* 0.62rem → 31px */
    display: block;
}

.hover-dual__icon-wrap {
    width: 50px;
    /* 1rem → 50px */
    height: 50px;
    /* 1rem → 50px */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 9px;
    /* 0.18rem → 9px */
}

.hover-dual__arch {
    color: #fff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 12px;
    /* 0.24rem → 12px */
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 5px;
    /* 0.1rem → 5px */
    flex-shrink: 0;
    height: 19px;
    align-items: center;
    display: flex;
}

.hover-dual__version {
    color: #fff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 7px;
    /* 0.14rem → 7px */
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    height: 10px;
    align-items: center;
    display: flex;
}

.hover-qr {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 19.5px 0 19.5px 33.5px;
    /* 0.39rem 0 0.39rem 0.67rem → 19.5px 0 19.5px 33.5px */
}

.hover-qr__code {
    width: 90px;
    /* 1.8rem → 90px */
    height: 90px;
    /* 1.8rem → 90px */
    border-radius: 6px;
    /* 0.12rem → 6px */
    flex-shrink: 0;
    margin-right: 14px;
    /* 0.28rem → 14px */
}

.hover-qr__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 0.28rem → 14px */
    padding-top: 23px;
    /* 0.46rem → 23px */
}

.hover-qr__text {
    color: #fff;
    font-family: "PingFang SC";
    font-size: 12px;
    /* 0.24rem → 12px */
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    height: 16px;
    align-items: center;
    display: flex;
}

.hover-qr__version {
    color: #fff;
    font-family: "PingFang SC";
    font-size: 7px;
    /* 0.14rem → 7px */
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    height: 14px;
    align-items: center;
    display: flex;
}

/* ===== Feature Section（白色区域内，固定 px + grid 响应式） ===== */
.feature-section {
    margin: 66.75px 0 0 0;
    /* 1.335rem → 66.75px */
    padding: 0;
}

.feature-section__title {
    color: #3d496c;
    text-align: left;
    font-family: Inter;
    font-size: 24px;
    /* 0.48rem → 24px */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(5,
            247px);
    /* 4.94rem → 247px，1920 下 5 列 */
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    /* 0.4rem → 20px */
    margin: 24px auto 0;
    /* 0.48rem → 24px */
    padding-top: 12px;
    /* 0.24rem → 12px */
}

.feature-card {
    width: 247px;
    /* 4.94rem → 247px（固定 px） */
    height: 110px;
    /* 2.2rem → 110px */
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid rgba(61, 73, 108, 0.2);
    /* 0.03rem → 1.5px */
    border-radius: 9px;
    /* 0.18rem → 9px */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 33.5px 0 33.5px 57px;
    /* 0.67rem 0 0.67rem 1.14rem → 33.5px 0 33.5px 57px */
    gap: 16px;
    /* 0.32rem → 16px */
    cursor: default;
    transition: box-shadow 0.2s;
}

.feature-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* 0 0.08rem 0.32rem → 0 4px 16px */
.feature-card__icon {
    width: 43px;
    /* 0.86rem → 43px */
    height: 43px;
    /* 0.86rem → 43px */
    flex-shrink: 0;
}

.feature-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card__label {
    font-size: 18px;
    /* 0.36rem → 18px */
    font-weight: 400;
    color: #3d496c;
    white-space: nowrap;

    font-family: "PingFang SC";
    width: 74px;
    text-align: center;

    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.feature-section--outside {
    display: none;
    flex-shrink: 0;
}

/* ===== Footer ===== */
.bottom-bar {
    margin-top: 44px;
    width: 100%;
    background: #fff;
    flex-shrink: 0;
}

/* =================================================================== */
#download-guide {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7024);
    z-index: 9999;
}

#section_one {
    display: flex;
    position: absolute;
    align-items: center;

    top: 254px;
    gap: 4.98px;
    left: 83.41px;
}

#section_one_image {
    width: 18.657px;
    height: 18.657px;
}

#section_one_text {
    color: #fff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 17.413px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#section_two {
    position: absolute;
    /* 作为子元素定位参照 */
    top: 323.99px;
    left: 18.74px;
}

#section_two_top_image {
    width: 310.945px;
    height: 16.584px;
    z-index: 1;
}

#section_two_bottom_image {
    width: 310.945px;
    height: 36.692px;
    z-index: 1;
}

#section_two_image {
    z-index: 2;
    height: 85.822px;

    width: 87.682px;
}

#section_two_image_container {
    position: absolute;
    left: 238.81px;
    /* 距 section_two 左边 238.81px */
    top: 50%;
    transform: translateY(-50%);
    /* 垂直居中 */
    width: 112.562px;
    height: 112.562px;
    background-color: #f2f2f2;
    background: url("../static/image.png") #f2f2f2 right 24.87px center / auto 85.821px no-repeat;
    filter: drop-shadow(0 0 14.925px rgba(0, 0, 0, 0.12));
    border-radius: 50%;
    z-index: 3;
}

#section_three {
    display: flex;
    position: absolute;
    align-items: center;
    top: 440.57px;
    left: 83.41px;

    gap: 4.98px;
}

#section_three_image {
    width: 18.657px;
    height: 18.657px;
}

#section_three_text {
    color: #fff;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 17.413px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#section_four {
    position: absolute;
    top: 487.86px;
    left: 140.07px;
}

/* ==================================================================== */
.bottom-bar__inner {
    max-width: 1399px;
    /* 27.98rem → 1399px */
    margin: 0 auto;
    padding: 20px 40px;
    /* 0.4rem 0.8rem → 20px 40px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom-bar__text {
    font-size: 10px;
    /* 0.22rem → 11px */
    font-family: "PingFang SC";
    text-align: center;
    font-weight: 400;
    line-height: normal;
    color: #898989;
    font-style: normal;
}

/* ===== 电脑图片：宽度 < 800px 直接隐藏 ===== */
@media (max-width: 1850px) {
    .hero__overlay {
        width: 378px;
        margin-right: 1.24vw;
    }
}

@media (max-width: 1064px) {
    .hero {
        min-height: 577.5px;
    }
}

@media (max-width: 898px) {
    .hero__overlay {
        display: none;
    }

    .hero__content {
        margin-left: 8.96vw;
        margin-right: 8.96vw;
    }
}

/* ===== 卡片响应式 =====
     下载中心（.platform-cards）：flex 居中——发送端 5 卡在 1920 下填满（左右各 42px），
       接收端 4 卡整体居中；拉窄时固定 247px 卡片自动换行，永不溢出、边距始终 ≥42px。
     核心投屏能力（.feature-cards）：grid 布局——固定 247px 卡片，列数随视口收缩
       （5→4→3→2→1），缩小时及时减列避免溢出，左右边距始终保持 ≥42px。 */
@media (max-width: 1919px) {
    .feature-cards {
        grid-template-columns: repeat(4, 247px);
    }
}

@media (max-width: 1552px) {
    .feature-cards {
        grid-template-columns: repeat(3, 247px);
    }
}

@media (max-width: 1186px) {
    .feature-cards {
        grid-template-columns: repeat(2, 247px);
    }
}

@media (max-width: 820px) {
    .feature-cards {
        grid-template-columns: repeat(1, 247px);
    }
}

@media (max-width: 560px) {
    .tab-switch {
        width: 74.7352%;
        /* 5.99rem → 299.5px（1920 定值） */
        max-width: calc(100% - 84px);
        /* 与白色区域左右各留 ≥42px 时优先级更高 */
        height: 54px;
        /* 1.08rem → 54px */
    }
}

/* ===== 移动端（≤768px，纯宽度触发，桌面拖到 375 也可验证；仅发送端；375 逐像素还原）===== */
@media (pointer: coarse) and (max-width: 768px) {
    html {
        font-size: calc(100vw / 3.75);
    }

    /* 375 设计稿：1rem = 100px */

    /* ===== 隐藏 ===== */
    .top-nav,
    .hero__overlay,
    .hero__mobile-illust,
    #tab-container,
    .download-section__desc,
    #cards-receiver,
    #feature-outside {
        display: none;
    }

    /* ===== 显示发送端卡片 ===== */
    #cards-sender {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.15rem;

        padding: 0 0.18rem;
    }

    /* ===== Hero ===== */
    .hero {
        width: 100%;
        min-height: 2.96rem;
        background-image: url("../images/hero-bg.png");
        background-size: cover;
        /* 让图片覆盖容器，但会裁剪底部 */
        /* 或者 */
        background-size: 100% 100%;
        /* 强制拉伸填满，弧度会变形但不会消失 */
        background-position: center bottom;
        /* 重点：让底部对齐，确保弧线露出来 */
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
    }

    .hero__inner {
        flex-direction: column;
        align-items: center;
        padding: 0.18rem 0.16rem 0;
        min-height: 1.96rem;
        max-width: 100%;
        margin: 0;
    }

    .hero__content {
        flex: none;
        width: auto;
        margin: 0 auto;
        padding: 0;
        gap: 0.14rem;
        text-align: left;
        align-items: flex-start;
        position: static;
        display: flex;
        flex-direction: column;
        max-width: none;
    }

    .hero__title {
        color: #fff;
        font-family: Inter;
        font-size: 0.24rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin: 0;
    }

    .hero__desc {
        color: #fff;
        font-family: Inter;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        /* 140% */
        letter-spacing: 0.3px;
        max-width: 339px;
    }

    .hero__env {
        color: #fff;
        font-family: Inter;
        font-size: 0.06rem;
        font-style: normal;
        font-weight: 500;
        line-height: 0.1rem;
        letter-spacing: 0.0012rem;
        margin: 0;
        white-space: pre-line;
    }

    /* 装饰元素（用 rem + vw 基准 = 固定百分比） */
    .hero__deco {
        display: block;
    }

    .hero__deco--circle {
        width: 0.80191rem;
        height: 0.80191rem;
        right: 3.4981rem;
        top: 0.4781rem;
        left: auto;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .hero__deco--cloud {
        width: 0.22528rem;
        height: 0.15753rem;
        left: 0.1481rem;
        top: 0.0561rem;
    }

    .hero__deco--airplane {
        width: 0.65842rem;
        height: 48.082px;
        left: 241px;
        top: 122px;
    }

    .hero__deco--trail {
        width: 0.77244rem;
        height: 0.39122rem;
        left: 2.8059rem;
        top: 1.6582rem;
    }

    .hero__deco--block-top {
        width: 0.35863rem;
        height: 0.48306rem;
        left: 3.4781rem;
        top: 0.2666rem;
        transform: rotate(-0.977deg);
    }

    .hero__deco--block-bottom {
        width: 0.35863rem;
        height: 0.48306rem;
        left: 3.438rem;
        top: 0.1569rem;
        transform: rotate(-0.977deg);
    }

    /* ===== 白色卡片 ===== */
    .main-content {
        margin-top: -112px;
        padding: 0;
        flex: none !important;
    }

    .content-inner {
        max-width: 100%;
        padding: 0;
    }

    .main-card {
        width: 3.39rem;
        height: 5.02rem;
        margin: 0 auto;
        padding: 0.18rem 0 0 0;
        border-radius: 0.2rem;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2) !important;
    }

    /* ===== 下载中心标题 ===== */
    .download-section {
        margin: 0 !important;
        padding: 0 !important;
    }

    .download-section__title {
        color: #3d496c;
        text-align: center;
        font-family: Inter;
        font-size: 0.16rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0 0 0.14rem 0;
        padding: 0 0.18rem;
    }

    /* ===== 发送端卡片 ===== */
    .platform-card {
        width: 1.44rem !important;
        height: 0.76rem !important;
        flex: none !important;
        min-height: auto !important;
        aspect-ratio: auto !important;
        background: linear-gradient(145deg, #6197ff 23.42%, #1d65dd 85.23%);
        border-radius: 0.0583rem;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .platform-card__action-arrow {
        width: 0.09432rem !important;
        height: 0.0814rem !important;
        flex-shrink: 0;
    }

    .platform-card__action-arrow img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin-left: 0;
    }

    .platform-card__icon {
        width: 0.2915rem !important;
        height: 0.2915rem !important;
        margin: 0.0117rem 0.0816rem 0 0 !important;
        flex-shrink: 0;
    }

    .platform-card__info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.0539rem !important;
        padding: 0.0117rem 0 0 0 !important;
        align-items: flex-start;
    }

    .platform-card__name {
        font-size: 0.10494rem !important;
        color: #fff;
        font-family: "PingFang SC";
        font-weight: 400;
        white-space: nowrap;
        line-height: normal;
        display: flex;

        height: 13.409px;
        flex-direction: column;
        justify-content: center;
    }

    .platform-card__action {
        display: flex !important;
        align-items: center;
        gap: 0.0579rem;
    }

    .platform-card__action-text {
        color: #fff;
        font-family: "PingFang SC";
        font-size: 0.06996rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        /* width: 29.15px; */
        width: 7.773vw;
        height: 8.162px;
        flex-direction: column;
        justify-content: center;
    }

    .platform-card__action-arrow {
        width: 0.09432rem;
        height: 0.0814rem;
    }

    .platform-card__hover {
        display: none !important;
    }

    .platform-card--mobile-active .platform-card__content {
        opacity: 0 !important;
        pointer-events: none;
    }

    .platform-card--mobile-active .platform-card__hover {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .platform-card--mobile-active .hover-single {
        padding-top: 0.08rem;
    }

    .platform-card--mobile-active .hover-single__icon-wrap,
    .platform-card--mobile-active .hover-dual__icon-wrap {
        width: 0.28rem;
        height: 0.28rem;
        margin: 0 0 0.04rem 0;
    }

    .platform-card--mobile-active .hover-single__icon,
    .platform-card--mobile-active .hover-dual__icon {
        width: 0.16rem;
        height: 0.16rem;
    }

    .platform-card--mobile-active .hover-single__text,
    .platform-card--mobile-active .hover-dual__arch,
    .platform-card--mobile-active .hover-qr__text {
        font-size: 0.07rem;
        height: auto;
        margin: 0 0 0.02rem 0;
    }

    .platform-card--mobile-active .hover-single__version,
    .platform-card--mobile-active .hover-dual__version,
    .platform-card--mobile-active .hover-qr__version {
        font-size: 0.05rem;
        height: auto;
    }

    .platform-card--mobile-active .hover-dual {
        gap: 0.03rem;
        padding: 0.04rem;
    }

    .platform-card--mobile-active .hover-dual__section {
        padding-top: 0.07rem;
    }

    .platform-card--mobile-active .hover-qr {
        padding: 0.08rem 0.06rem;
        align-items: center;
    }

    .platform-card--mobile-active .hover-qr__code {
        width: 0.34rem;
        height: 0.34rem;
        margin-right: 0.05rem;
    }

    .platform-card--mobile-active .hover-qr__info {
        gap: 0.03rem;
        padding-top: 0;
    }

    /* ===== 核心投屏能力 ===== */
    #feature-inside {
        display: block !important;
        margin-top: 0.14rem !important;
        padding: 0;
    }

    .feature-section__title {
        color: #3d496c;
        text-align: center;
        font-family: Inter;
        font-size: 0.16rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0 0 0.14rem 0 !important;
    }

    .feature-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.14rem 0.076rem;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .feature-card {
        width: 0.96rem;
        height: 0.43rem;
        flex: none;
        background: #fff;
        border: 0.00587rem solid rgba(61, 73, 108, 0.2);
        border-radius: 0.03525rem;
        display: flex;
        align-items: flex-start;
        padding: 0.1304rem 0 0 0.2189rem;
        gap: 0.0627rem;
        min-height: auto;
        aspect-ratio: auto !important;
    }

    .feature-card__icon {
        width: 0.1684rem;
        height: 0.1684rem;
        flex-shrink: 0;
        margin-top: 0;
    }

    .feature-card__label {
        color: #3d496c;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 0.07049rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-top: 0.0352rem;
        width: 28.981px;
    }

    /* ===== 页脚 ===== */
    .bottom-bar {
        margin-top: 30px;
        font-size: 5px;
    }

    .bottom-bar__inner {
        max-width: 100%;
        padding: 0;
        text-align: center;
        justify-content: center;
        height: 28px;
        line-height: normal;
        gap: 0;
    }

    .bottom-bar__text {
        font-size: 0.05rem;
        line-height: 1.4;
    }
}