/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom color variables */
:root {
    --primary-blue: #0078FF;
    --primary-dark: #003CF1;
    --secondary-blue: #0A82FF;
    --background-dark: #0A0E27;
    --text-white: #FFFFFF;
    --text-gray: #666666;
    --text-light: #A2A2A2;
    --gradient-start: #0A82FF;
    --gradient-end: #133CE9;
}
a{


    text-decoration: none;

}
/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
    font-family: 'PingFang SC Regular';
    background-color: #000212;
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* 流星背景效果 */
.background-visuals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

.background-visuals.meteor-background {
    background: transparent;
}

#meteorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* 主容器 - 限制最大宽度并居中 */
.main-container {
    position: relative;
    max-width: 1414px;
    margin: 0 auto;
    width: 100%;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* Banner Section - 等比例缩放: 1414px宽度对应900px总高度（包括header的80px） */
.banner-section {
    position: relative;
    width: 100%;
    /* 使用padding-bottom实现等比例缩放: (900-80)/1414 = 820/1414 = 58.00% */
    padding-bottom: 58.00%;
    background: #000;
    overflow: hidden;
    padding-top: min(80px, calc(80 / 1414 * 100vw));
    z-index: 1;
    box-sizing: border-box;
}

/* Banner 流星效果容器 */
.banner-meteor-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

#bannerMeteorCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.banner-scroll-icon {
    position: absolute;
    bottom: min(63px, calc(63 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: min(30px, calc(30 / 1414 * 100vw));
    height: min(33px, calc(33 / 1414 * 100vw));
    z-index: 20;
    cursor: pointer;
}

.banner-scroll-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: min(1414px, calc(1414 / 1414 * 100vw));
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.3);
    transform-origin: top center;
    z-index: 5;
}

.glow-effect {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    left: 0;
    top: 0;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 130, 255, 0.20) 0%, rgba(168, 55, 255, 0) 100%);
    border-radius: 9999px;
    z-index: 0;
    pointer-events: none;
}

.glow-effect-right {
    position: absolute;
    width: min(1142px, calc(1142 / 1414 * 100vw));
    height: min(1142px, calc(1142 / 1414 * 100vw));
    right: min(-350px, calc(-350 / 1414 * 100vw));
    top: min(353px, calc(353 / 1414 * 100vw));
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(168.41, 55.17, 255, 0.20) 0%, rgba(168, 55, 255, 0) 100%);
    border-radius: 9999px;
    z-index: 0;
    pointer-events: none;
}

.bg-decoration {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.bg-decoration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.water-wave {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0.5;
}

.water-wave img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    filter: url(#waterRipple);
    opacity: 0.7;
}

.banner-content {
    position: absolute;
    top: min(80px, calc(80 / 1414 * 100vw));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    max-width: 1414px;
    margin: 0 auto;
    padding: 0 min(40px, calc(40 / 1414 * 100vw));
    display: flex;
    justify-content: space-between;
}

/* 顶部覆盖背景图 - 位于banner-content后面，背景视频前面 */
.banner-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: min(1414px, calc(1414 / 1414 * 100vw));
    height: min(398px, calc(398 / 1414 * 100vw));
    z-index: 15;
    pointer-events: none;
}

.banner-overlay-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.banner-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* 1414px设计稿：top: 150px, left: 125px */
    /* banner-content top: 80px, padding: 0 40px */
    /* padding-top: 150px - 80px = 70px */
    /* margin-left: 125px - 40px = 85px */
    padding-top: min(70px, calc(70 / 1414 * 100vw));
    margin-left: min(85px, calc(85 / 1414 * 100vw));
}

.banner-title {
    font-family: 'PingFang SC Semibold';
    /* 等比缩放：45px / 1414px * 100vw = 3.18vw，最大45px */
    font-size: min(45px, calc(45 / 1414 * 100vw));
    /*font-weight: 600;*/
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 0%, rgba(255, 255, 255, 1) 66.83%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-align: left;
    margin-bottom: min(23px, calc(23 / 1414 * 100vw)); /* 第一个和第二个间距23px */
}

.banner-subtitle {
    font-family: 'PingFang SC Regular';
    /* 等比缩放：25px / 1414px * 100vw = 1.77vw，最大25px */
    font-size: min(25px, calc(25 / 1414 * 100vw));
    /*font-weight: 600;*/
    background: linear-gradient(90deg, rgba(31, 128, 255, 1) 0%, rgba(255, 255, 255, 1) 51.44%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    text-align: left;
    margin-top: 0;
    margin-bottom: min(38px, calc(38 / 1414 * 100vw)); /* 第二个和第三个间距34px */
}

.contact-float {
    margin-top: 0;
}

.contact-btn {
    /* 等比缩放按钮尺寸 */
    width: min(98px, calc(98 / 1414 * 100vw));
    height: min(31px, calc(31 / 1414 * 100vw));
    background: linear-gradient(180deg, #0A82FF 0%, #133CE9 100%);
    border-radius: calc(73.71 / 1414 * 100vw);
    /* 等比缩放字体：12px / 1414px * 100vw = 0.85vw，最大12px */
    font-size: min(12px, calc(12 / 1414 * 100vw));
    /* font-weight: 400; */
    color: var(--text-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: "pingfangsc-light";
    font-weight: 100;
}

.contact-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(10, 130, 255, 0.4);
}

.banner-right {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 100%;
    padding-top: min(280px, calc(280 / 1414 * 100vw)); /* 530px - banner-content的top:80px = 450px */
    padding-right: min(230px, calc(230 / 1414 * 100vw)); /* 距离右侧边界330px */
}

.ip-character {
    position: relative;
    width: min(180px, calc(180 / 1414 * 100vw));
    height: min(180px, calc(180 / 1414 * 100vw));
}

.ip-character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Video Section */
.video-section {
    height: min(898px, calc(898 / 1414 * 100vw));
    padding: 0 0 min(76px, calc(76 / 1414 * 100vw));
    position: relative;
    overflow: visible;
    z-index: 1;
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-card-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.video-content-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #081744;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 视频切换动画 */
.video-thumbnail.slide-out-left {
    animation: slideOutLeft 0.6s ease forwards;
}

.video-thumbnail.slide-out-right {
    animation: slideOutRight 0.6s ease forwards;
}

.video-thumbnail.slide-in-left {
    animation: slideInLeft 0.6s ease forwards;
}

.video-thumbnail.slide-in-right {
    animation: slideInRight 0.6s ease forwards;
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.video-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: transparent;
}

.video-title {
    position: absolute;
    top: min(31px, calc(31 / 1414 * 100vw));
    left: min(115px, calc(115 / 1414 * 100vw));
    z-index: 10;
}

.title-en {
    font-size: min(60px, calc(60 / 1414 * 100vw));
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-white);
    line-height: 1;
}

.title-cn {
    font-size: min(40px, calc(40 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-white);
    /* margin-top: 10px; */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(10px, calc(10 / 1414 * 100vw));
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button img {
    width: min(62px, calc(62 / 1414 * 100vw));
    height: min(62px, calc(62 / 1414 * 100vw));
}

.play-button-text {
    position: absolute;
    top: calc(50% + min(35px, calc(35 / 1414 * 100vw)));
    left: 50%;
    transform: translateX(-50%);
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-white);
    /* text-transform: uppercase; */
    letter-spacing: min(2px, calc(2 / 1414 * 100vw));
    z-index: 10;
    pointer-events: none;
}

.about-overlay {
    position: absolute;
    bottom: min(60px, calc(60 / 1414 * 100vw));
    left: min(115px, calc(115 / 1414 * 100vw));
    width: min(365px, calc(365 / 1414 * 100vw));
    border-radius: min(15px, calc(15 / 1414 * 100vw));
    padding: min(20px, calc(20 / 1414 * 100vw));
    z-index: 10;
}

.about-icon {
    display: block;
    width: min(53px, calc(53 / 1414 * 100vw));
    height: min(53px, calc(53 / 1414 * 100vw));
    margin-bottom: min(12px, calc(12 / 1414 * 100vw));
    margin-left: 0;
}

.about-text {
    font-family: 'PingFang SC Medium';
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.1;
    margin: 0;
}

.contact-glass-card {
    position: absolute;
    bottom: min(143px, calc(143 / 1414 * 100vw));
    right: min(140px, calc(140 / 1414 * 100vw));
    width: min(296px, calc(296 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(min(15px, calc(15 / 1414 * 100vw)));
    border-radius: min(15px, calc(15 / 1414 * 100vw));
    padding: min(20px, calc(20 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: min(20px, calc(20 / 1414 * 100vw));
    z-index: 10;
}

.learn-more-btn-container {
    position: absolute;
    bottom: min(80px, calc(80 / 1414 * 100vw));
    right: min(171px, calc(171 / 1414 * 100vw));
    width: min(200px, calc(200 / 1414 * 100vw));
    display: flex;
    justify-content: center;
    z-index: 10;
}


/* Video Section 中的 Contact 样式 */
.contact-glass-card .contact-item {
    display: flex;
    gap: min(15px, calc(15 / 1414 * 100vw));
    align-items: flex-start;
    padding-left: min(20px, calc(20 / 1414 * 100vw));
    padding-right: min(20px, calc(20 / 1414 * 100vw));
}

.contact-glass-card .contact-info {
    display: flex;
    flex-direction: column;
    gap: min(8px, calc(8 / 1414 * 100vw));
}

/* 联系信息行 - 图标+文字 */
.contact-glass-card .contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: min(10px, calc(10 / 1414 * 100vw));
}

.contact-glass-card .contact-info-icon {
    width: min(25px, calc(25 / 1414 * 100vw));
    height: min(25px, calc(25 / 1414 * 100vw));
    flex-shrink: 0;
    margin-top: min(3px, calc(3 / 1414 * 100vw));
}

.contact-glass-card .contact-info-icon.phone-icon {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    margin-left: min(5px, calc(5 / 1414 * 100vw));
}

.contact-glass-card .contact-location {
    font-family: 'PingFang SC Regular';
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

.contact-glass-card .contact-phone {
    font-family: 'PingFang SC Medium';
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.5;
}

.contact-glass-card .contact-qr {
    display: flex;
    justify-content: center;
}

.contact-glass-card .contact-qr img {
    width: min(228px, calc(228 / 1414 * 100vw));
    height: min(148px, calc(148 / 1414 * 100vw));
    border-radius: min(10px, calc(10 / 1414 * 100vw));
}

.learn-more-btn {
    font-family: 'PingFang SC Medium';
    width: min(200px, calc(200 / 1414 * 100vw));
    height: min(45px, calc(45 / 1414 * 100vw));
    background: radial-gradient(ellipse 202.21% 953.83% at 116.99% -22.22%, #0A82FF 0%, #003CF1 100%);
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(27px, calc(27 / 1414 * 100vw));
    font-size: min(20px, calc(20 / 1414 * 100vw));
    /* font-family: 'PingFang SC', sans-serif; */
    font-weight: 400;
    color: var(--text-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    z-index: 10;
}

.learn-more-btn:hover {
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
    box-shadow: 0 min(10px, calc(10 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw)) rgba(10, 130, 255, 0.3);
}

.learn-more-btn img {
    width: min(18px, calc(18 / 1414 * 100vw));
    height: min(15px, calc(15 / 1414 * 100vw));
}






.video-indicators {
    position: absolute;
    bottom: min(38px, calc(38 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: min(31px, calc(31 / 1414 * 100vw));
    z-index: 10;
}

.indicator {
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: var(--primary-blue);
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    border-radius: 0;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.video-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    background: #FFFFFF;
    border: min(1px, calc(1 / 1414 * 100vw)) solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}

.video-arrow:hover {
    background: #006BFF;
    border-color: #FFFFFF;
    transform: translateY(-50%);
}

.video-arrow img {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    object-fit: contain;
}

/* 左箭头 - 默认图标 - 背景样式已移至 cdn_assets.html */
.arrow-left img {
    /* content在cdn_assets.html中定义 */
    width: min(29px, calc(29 / 1414 * 100vw));
    height: min(27px, calc(27 / 1414 * 100vw));
}

/* 右箭头 - 默认图标 */
.arrow-right img {
    /* content在cdn_assets.html中定义 */
    width: min(29px, calc(29 / 1414 * 100vw));
    height: min(27px, calc(27 / 1414 * 100vw));
}

/* 左箭头 - hover图标 */
.arrow-left:hover img {
    /* content在cdn_assets.html中定义 */
}

/* 右箭头 - hover图标 */
.arrow-right:hover img {
    /* content在cdn_assets.html中定义 */
}

.arrow-left {
    left: min(30px, calc(30 / 1414 * 100vw));
}

.arrow-right {
    right: min(30px, calc(30 / 1414 * 100vw));
}

.arrow-left img {
    /* transform: rotate(180deg); */
    width: min(29px, calc(29 / 1414 * 100vw));
    height: min(27px, calc(27 / 1414 * 100vw));
}

.arrow-right img {
    width: min(29px, calc(29 / 1414 * 100vw));
    height: min(27px, calc(27 / 1414 * 100vw));
}

.close-video-btn {
    position: absolute;
    top: min(30px, calc(30 / 1414 * 100vw));
    right: min(30px, calc(30 / 1414 * 100vw));
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(min(10px, calc(10 / 1414 * 100vw)));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    transition: all 0.3s ease;
}

.close-video-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.close-video-btn img {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    transform: rotate(0deg);
}

/* About Section */
.about-section {
    max-width: 1414px;
    margin: 0 auto;
    padding: min(40px, calc(40 / 1414 * 100vw)) min(80px, calc(80 / 1414 * 100vw));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: min(40px, calc(40 / 1414 * 100vw));
    align-items: start;
    position: relative;
    z-index: 1;
}

.about-wrapper {
    max-width: 1414px;
    margin: 0 auto;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: min(30px, calc(30 / 1414 * 100vw));
}

.about-icon {
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
}

.about-icon img {
    width: 100%;
    height: 100%;
}

.about-text {
    font-family: 'PingFang SC Medium', 'PingFang SC', sans-serif;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 400;
    color: var(--text-white);
    line-height: 1.1;
    width: min(365px, calc(365 / 1414 * 100vw));
}

.about-contact-card {
    width: min(266px, calc(266 / 1414 * 100vw));
}

.contact-card-img {
    width: 100%;
    height: auto;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
}

/* Business Section - 背景样式已移至 cdn_assets.html */
.business-section {
    padding: min(33px, calc(33 / 1414 * 100vw)) min(113px, calc(113 / 1414 * 100vw)) 0;
    position: relative;
    z-index: 1;
    /* background-image在cdn_assets.html中定义 */
    background-position: left bottom;
    background-repeat: no-repeat;
}

.business-wrapper {
    max-width: 1414px;
    margin: 0 auto;
    /* padding: 0 80px; */
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 20px; */
    /* margin-bottom: min(30px, calc(30 / 1414 * 100vw)); */
}

.business-card {
    position: relative;
    height: min(552px, calc(552 / 1414 * 100vw));
    overflow: hidden;
    /* border-radius: 10px; */
    cursor: pointer;
}

.business-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.business-card:hover .business-card-bg {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 30px; */
    text-align: center;
}

.card-title {
    margin-top: min(217px, calc(217 / 1414 * 100vw));
    /* margin-bottom: auto; */
}

.card-icon {
    position: absolute;
    bottom: min(33px, calc(33 / 1414 * 100vw));
    right: min(33px, calc(33 / 1414 * 100vw));
    width: min(40px, calc(40 / 1414 * 100vw));
    height: min(40px, calc(40 / 1414 * 100vw));
}

.card-icon img {
    width: 100%;
    height: 100%;
}

.card-title {
    font-size: min(40px, calc(40 / 1414 * 100vw));
    /*font-weight: 600;*/
    color: var(--text-white);
    line-height: 1;
     margin-bottom: min(10px, calc(10 / 1414 * 100vw));
    font-family: 'PingFang SC Semibold';
}

.card-subtitle {
    font-size: min(14px, calc(14 / 1414 * 100vw));
     font-weight:100;
    font-family: "PingFang SC Regular";
    /*font-family: 'Inter', sans-serif;*/
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
}

.card-description {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    /*font-weight: 200;*/
    color: var(--text-white);
    line-height: 1.6;
    font-family: 'PingFang SC Semibold';
}

/* News Section */
.news-section {
    padding: min(68px, calc(68 / 1414 * 100vw)) 0 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.news-wrapper {
    max-width: min(1414px, calc(1414 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(65px, calc(65 / 1414 * 100vw));
    width: 100%;
}

.section-header {
    text-align: center;
    /* margin-bottom: min(50px, calc(50 / 1414 * 100vw)); */
}

.section-title {
    font-size: min(30px, calc(30 / 1414 * 100vw));
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: min(11px, calc(11 / 1414 * 100vw));
    line-height: 1;
}

.section-subtitle {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 400;
    color: var(--text-light);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, min(296px, calc(296 / 1414 * 100vw)));
    gap: min(26px, calc(26 / 1414 * 100vw));
    justify-content: center;
}

.news-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    backdrop-filter: blur(min(23.57px, calc(23.57 / 1414 * 100vw)));
    box-shadow: 0 0 min(94.26px, calc(94.26 / 1414 * 100vw)) rgba(35, 42, 62, 0.5);
    background: rgba(255, 255, 255, 0.1);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
}

/* 默认状态的深色覆盖层 */
.news-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

/* hover时隐藏深色覆盖层 */
.news-swiper .swiper-slide:hover .news-card::after,
.news-card:hover::after {
    opacity: 0;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 155.27% 239.57% at 3.01% -18.86%, #003CF1 0%, rgba(0, 0, 0, 0) 51%, #0A82FF 95%);
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: -1;
    pointer-events: none;
}

.news-swiper .swiper-slide:hover .news-card::before {
    opacity: 1;
}

.news-swiper .swiper-slide:hover .news-card {
    outline: min(2px, calc(2 / 1414 * 100vw)) solid rgba(10, 130, 255, 1);
    background: rgba(10, 130, 255, 0.3);
}

.news-card:hover::before {
    opacity: 1;
}

.news-card:hover {
    outline: min(2px, calc(2 / 1414 * 100vw)) solid rgba(10, 130, 255, 1);
    background: rgba(10, 130, 255, 0.3);
}

.news-card-inner {
    position: relative;
    padding: min(20px, calc(20 / 1414 * 100vw));
}

.news-card-featured .news-card-inner {
    padding: min(19px, calc(19 / 1414 * 100vw)) min(15px, calc(15 / 1414 * 100vw));
}

.news-image {
    width: 100%;
    height: auto;
    height: min(281px, min(281px, calc(281 / 1414 * 100vw)));
    aspect-ratio: 16/10;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    object-fit: cover;
    margin-bottom: min(20px, calc(20 / 1414 * 100vw));
}

.news-card:not(.news-card-featured) .news-image {
    height: min(282px, min(282px, calc(282 / 1414 * 100vw)));
}

.news-card-info {
    display: flex;
    flex-direction: column;
    gap: min(15px, calc(15 / 1414 * 100vw));
}

.news-title {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 500;
    font-family: "PingFang SC Semibold";
    color: var(--text-white);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: min(261px, calc(261 / 1414 * 100vw));
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-author {
    font-size: min(13px, calc(13 / 1414 * 100vw));
    font-weight: 400;
    font-family: 'Manrope', sans-serif;
    color: var(--text-white);
}

.news-date {
    font-size: min(15px, calc(15 / 1414 * 100vw));
    font-weight: 300;
    font-family: 'Manrope', sans-serif;
    color: var(--text-white);
}





/* ============================================
   滚动渐入动画效果
   ============================================ */

/* 基础动画类：初始隐藏状�?*/
.scroll-animate-left {
    opacity: 0;
    transform: translateX(-220px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 400ms;
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(220px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 800ms;
}

.scroll-animate-up {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 300ms;
}

/* 激活状态：显示并移除偏�?*/
.scroll-animate-left.visible,
.scroll-animate-right.visible,
.scroll-animate-up.visible {
    opacity: 1;
    transform: translate(0);
}

/* ============================================
   新闻Swiper样式 - 控制器独立在Swiper外部
   ============================================ */
.news-swiper-container {
    width: 100%;
    max-width: 1414px;
    margin: 0 auto;
    padding: min(10px, calc(10 / 1414 * 100vw)) 0;
}

.news-swiper-container .news-swiper {
    width: 100%;
    padding: min(40px, calc(40 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw));
    position: relative;
}

.news-swiper .swiper-wrapper {
    align-items: stretch;
}

.news-swiper .swiper-slide {
    width: min(296px, calc(296 / 1414 * 100vw));
    min-width: min(296px, calc(296 / 1414 * 100vw));
    /* height: auto; */
    height: min(392px, min(392px, calc(392 / 1414 * 100vw)));
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

/* 悬停时当前 slide 放大，以中心为基准 */
.news-swiper .swiper-slide:hover {
    transform: scale(1.08);
    z-index: 100;
}

.news-swiper {
    overflow: visible;
}

.news-swiper-container {
    overflow: visible;
}

.news-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Swiper控制器 - 独立在Swiper下方 */
.news-swiper-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(40px, calc(40 / 1414 * 100vw));
    margin-top: min(20px, calc(20 / 1414 * 100vw));
    padding: 0 min(60px, calc(60 / 1414 * 100vw));
}

/* 自定义导航按钮 */
.swiper-custom-prev,
.swiper-custom-next {
    width: min(44px, calc(44 / 1414 * 100vw));
    height: min(44px, calc(44 / 1414 * 100vw));
    background: rgba(10, 130, 255, 0.8);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.swiper-custom-prev:hover,
.swiper-custom-next:hover {
    background: rgba(10, 130, 255, 1);
    transform: scale(1.1);
}

.swiper-custom-prev:after,
.swiper-custom-next:after {
    font-family: swiper-icons;
    font-size: min(18px, calc(18 / 1414 * 100vw));
    font-weight: bold;
}

.swiper-custom-prev:after {
    content: 'prev';
}

.swiper-custom-next:after {
    content: 'next';
}

.swiper-custom-prev.swiper-button-disabled,
.swiper-custom-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 自定义分页器 */
.swiper-custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(12px, calc(12 / 1414 * 100vw));
}

.swiper-custom-pagination .swiper-pagination-bullet {
    width: min(10px, calc(10 / 1414 * 100vw));
    height: min(10px, calc(10 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-custom-pagination .swiper-pagination-bullet-active {
    background: #0A82FF;
    width: min(24px, calc(24 / 1414 * 100vw));
    border-radius: min(5px, calc(5 / 1414 * 100vw));
}

/* ============================================
   查看更多按钮样式
   ============================================ */
.news-view-more {
    display: flex;
    justify-content: center;
    margin-top: min(40px, calc(40 / 1414 * 100vw));
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: min(12px, calc(12 / 1414 * 100vw));
    padding: min(16px, calc(16 / 1414 * 100vw)) min(40px, calc(40 / 1414 * 100vw));
    background: linear-gradient(135deg, #0A82FF 0%, #133CE9 100%);
    border: none;
    border-radius: min(30px, calc(30 / 1414 * 100vw));
    color: #FFFFFF;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 min(4px, calc(4 / 1414 * 100vw)) min(15px, calc(15 / 1414 * 100vw)) rgba(10, 130, 255, 0.3);
}

.btn-view-more:hover {
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
    box-shadow: 0 min(8px, calc(8 / 1414 * 100vw)) min(25px, calc(25 / 1414 * 100vw)) rgba(10, 130, 255, 0.5);
}

.btn-view-more .arrow-icon {
    width: min(20px, calc(20 / 1414 * 100vw));
    height: min(20px, calc(20 / 1414 * 100vw));
    transition: transform 0.3s ease;
}

.btn-view-more:hover .arrow-icon {
    transform: translateX(min(4px, calc(4 / 1414 * 100vw)));
}