@media screen and (max-width: 900px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    @keyframes twinkle {
        0% { opacity: 0.2; }
        50% { opacity: 0.8; }
        100% { opacity: 0.2; }
    }
    
    @keyframes float {
        0% { transform: translateY(0px) translateX(0px); }
        50% { transform: translateY(-15px) translateX(5px); }
        100% { transform: translateY(0px) translateX(0px); }
    }
    
    .star {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .star.small {
        width: 1px;
        height: 1px;
        box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .star.medium {
        width: 1.5px;
        height: 1.5px;
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
    }
    
    .star.large {
        width: 2px;
        height: 2px;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }
    
    .shooting-star {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg, 
            rgba(255,255,255,0) 0%, 
            rgba(255,255,255,0.2) 25%,
            rgba(255,255,255,0.8) 50%, 
            rgba(255,255,255,0.2) 75%,
            rgba(255,255,255,0) 100%);
        opacity: 0;
        transform-origin: right center;
    }
    
    .shooting-star.direction-1 {
        animation: shoot-1 8s linear infinite;
    }
    
    .shooting-star.direction-2 {
        animation: shoot-2 8s linear infinite;
    }
    
    .shooting-star.direction-3 {
        animation: shoot-3 8s linear infinite;
    }
    
    .shooting-star.direction-4 {
        animation: shoot-4 8s linear infinite;
    }
    
    .shooting-star.fast {
        width: 150px;
        animation-duration: 4s !important;
    }
    
    .shooting-star.medium {
        width: 100px;
        animation-duration: 6s !important;
    }
    
    .shooting-star.slow {
        width: 80px;
        animation-duration: 8s !important;
    }
    
    .shooting-star.extra-long {
        width: 200px;
        animation-duration: 6s !important;
    }
    
    .shooting-star.long {
        width: 150px;
        animation-duration: 5s !important;
    }
    
    .shooting-star.medium {
        width: 100px;
        animation-duration: 4s !important;
    }
    
    .shooting-star.short {
        width: 80px;
        animation-duration: 3s !important;
    }
    
    @keyframes shoot-1 {
        0% {
            transform: translateX(-150%) translateY(-50%) rotate(35deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(250%) translateY(-150%) rotate(35deg);
            opacity: 0;
        }
    }
    
    @keyframes shoot-2 {
        0% {
            transform: translateX(250%) translateY(-50%) rotate(-145deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(-150%) translateY(-150%) rotate(-145deg);
            opacity: 0;
        }
    }
    
    @keyframes shoot-3 {
        0% {
            transform: translateX(-100%) translateY(-150%) rotate(100deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(100%) translateY(250%) rotate(100deg);
            opacity: 0;
        }
    }
    
    @keyframes shoot-4 {
        0% {
            transform: translateX(100%) translateY(-150%) rotate(-100deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(-100%) translateY(250%) rotate(-100deg);
            opacity: 0;
        }
    }
    
    #starfield {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
    }
    
    .container {
        width: 100%;
        height: 100%;
        margin-bottom: 80px;
    }
    
    .header {
        width: 100%;
        height: 11.43vw;  /* 80px / 700px * 100 */
        display: flex;
        align-items: center;
        justify-content: center;  /* 添加居中对齐 */
    }
    
    img.Homepage_Navbar_Logo {
      width: 16.29vw;  /* 114px / 700px * 100 */
      height: 4.57vw;  /* 32px / 700px * 100 */
      margin-left: 0;  /* 移除左边距 */
    }
    
    .content {
        width: 100%;
        display: flex;
        position: relative;
        height: 265.71vw;  /* 2000px / 700px * 100 */
        overflow: hidden;
    }
    
    .mockup-container {
        position: absolute;
        right: 10vw;  /* 105px / 700px * 100 */
        top: 130.29vw;  /* 107px / 700px * 100 */
        width: 75.71vw;  /* 530px / 700px * 100 */
        height: 122.14vw;  /* 855px / 700px * 100 */
        margin: 7.14vw 3.43vw 0;  /* 50px 24px / 700px * 100 */
        object-fit: contain;
    }
    
    .mockup {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    img.Hero_bg {
      width: 100%;
      position: absolute;
      /* min-width: 1440px; */
    }
    
    .hero-content {
        position: absolute;
        top: 24vw;
        left: 10vw;  /* 减小左边距，让内容区域更宽 */
        width: 80vw; /* 控制整体宽度 */
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    
    .hero-content-title {
        height: auto;  /* 允许高度自适应 */
        width: 100%;  /* 让标题占满容器宽度 */
        flex-grow: 0;
        font-family: PingFangSC;
        font-size: 8vw;  /* 增大字体大小 */
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.2;  /* 调整行高 */
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-content-subtitle {
        margin-top: 3vw;  /* 增加上边距 */
        height: auto;  /* 允许高度自适应 */
        width: 100%;  /* 让副标题占满容器宽度 */
        flex-grow: 0;
        font-family: PingFangSC;
        font-size: 3.5vw;  /* 增大字体大小 */
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;  /* 调整行高 */
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-content-point {
        display: flex;
        flex-direction: column;
        margin-top: 8vw;  /* 增加上边距 */
        width: 100%;  /* 让特点列表占满容器宽度 */
    }
    
    .hero-content-point-item {
        height: auto;  /* 允许高度自适应 */
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 3vw;  /* 增加间距 */
        margin: 0 0 4vw;  /* 增加底部边距 */
        padding: 0;
    }
    
    .hero-content-point-item-p {
        width: 2vw;  /* 增大点的大小 */
        height: 2vw;
        flex-grow: 0;
        box-shadow: 0 0 5vw 0 rgba(74, 246, 205, 0.84);
        background-color: #4af6cd;
        border-radius: 2vw;
    }
    
    .hero-content-point0-item-img {
        width: 6vw;  /* 增大图标大小 */
        height: 6vw;
    }
    
    .hero-content-point-item-title {
        font-family: PingFangSC;
        font-size: 4vw;  /* 增大字体大小 */
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: normal;
        color: #fff;
    }
    
    .ButtonCTADownload {
        width: 45vw;  /* 增大按钮宽度 */
        height: 12vw;  /* 增大按钮高度 */
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 2vw 4vw;
        border-radius: 6vw;
        background-color: #1cb0f7;
        margin-top: 8vw;  /* 增加上边距 */
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .ButtonCTADownload::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
        animation: shine 3s infinite;
    }
    
    @keyframes shine {
        0% {
            left: -100%;
        }
        20% {
            left: 100%;
        }
        100% {
            left: 100%;
        }
    }
    
    .ButtonCTADownload:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(28, 176, 247, 0.4);
    }
    
    .ButtonCTADownload:active {
        transform: translateY(1px);
    }
    
    img.IconsiconsColorDownload {
        width: 7vw;  /* 增大下载图标大小 */
        height: 7vw;
        margin: 0 2vw 0 0;
        object-fit: contain;
    }
    
    .ButtonCTADownload-text {
        margin: 0;
        font-family: PingFangSC;
        font-size: 4.5vw;  /* 增大按钮文字大小 */
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-app-rate {
        display: flex;
        margin-top: 6vw;  /* 增加上边距 */
        align-items: center;
    }
    
    img.HomepageHerostar {
        width: 16vw;  /* 增大星星图标大小 */
        height: 3.2vw;
        margin: 0 2vw 0 0;
        object-fit: contain;
    }
    
    .hero-app-rate-text {
        margin: 0;
        font-family: Roboto;
        font-size: 3.5vw;  /* 增大评分文字大小 */
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-app-user-count {
        margin: 0 0 0 1vw;
        font-family: Roboto;
        font-size: 3.5vw;  /* 增大用户数量文字大小 */
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    img.HomepageSection {
      width: 100vw;
      object-fit: contain;
    }

    /* 在小屏幕下替换图片源为s-前缀版本 */
    img[src*="homepage-vpn.webp"] {
        content: url("assets/s-homepage-vpn.webp");
    }
    img[src*="homepage-video.webp"] {
        content: url("assets/s-homepage-video.webp");
    }
    img[src*="homepage-notes.webp"] {
        content: url("assets/s-homepage-notes.webp");
    }
    img[src*="homepage-news.webp"] {
        content: url("assets/s-homepage-news.webp");
    }
    img[src*="homepage-extensions.webp"] {
        content: url("assets/s-homepage-extensions.webp");
    }

    /* 处理2x和3x的情况 */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        img[src*="homepage-vpn.webp"] {
            content: url("assets/s-homepage-vpn@2x.webp");
        }
        img[src*="homepage-video.webp"] {
            content: url("assets/s-homepage-video@2x.webp");
        }
        img[src*="homepage-notes.webp"] {
            content: url("assets/s-homepage-notes@2x.webp");
        }
        img[src*="homepage-news.webp"] {
            content: url("assets/s-homepage-news@2x.webp");
        }
        img[src*="homepage-extensions.webp"] {
            content: url("assets/s-homepage-extensions@2x.webp");
        }
        img[src*="homepage-compare.webp"] {
            content: url("assets/s-homepage-compare@2x.webp");
        }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
        img[src*="homepage-vpn.webp"] {
            content: url("assets/s-homepage-vpn@3x.webp");
        }
        img[src*="homepage-video.webp"] {
            content: url("assets/s-homepage-video@3x.webp");
        }
        img[src*="homepage-notes.webp"] {
            content: url("assets/s-homepage-notes@3x.webp");
        }
        img[src*="homepage-news.webp"] {
            content: url("assets/s-homepage-news@3x.webp");
        }
        img[src*="homepage-extensions.webp"] {
            content: url("assets/s-homepage-extensions@3x.webp");
        }
        img[src*="homepage-compare.webp"] {
            content: url("assets/s-homepage-compare@3x.webp");
        }
    }

    .Hero_bg {
        width: 100vw;
        height: 265.71vw;
        padding: 94px 0 56px;
        border-radius: 45px;
        background-image: linear-gradient(to bottom, #0074ab, #005097 32%, #1c2974 69%, #1c2974);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}