/* 定义 Web 字体 */
@font-face {
    font-family: 'LineSeed';
    src: url('fonts/LINESeedSans_W_Th.woff2') format('woff2');
    /* 优先使用 woff2 格式 */
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'LineSeed';
    src: url('fonts/LINESeedSans_W_Rg.woff2') format('woff2');
    /* 优先使用 woff2 格式 */
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: 'LineSeed';
    src: url('fonts/LINESeedSans_W_Bd.woff2') format('woff2');
    /* 优先使用 woff2 格式 */
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: 'LineSeed';
    src: url('fonts/LINESeedSans_W_He.woff2') format('woff2');
    /* 优先使用 woff2 格式 */
    font-weight: 800;
    font-style: normal;
}


@font-face {
    font-family: 'LineSeed';
    src: url('fonts/LINESeedSans_W_XBd.woff2') format('woff2');
    /* 优先使用 woff2 格式 */
    font-weight: 900;
    font-style: normal;
}




/* --- 全局和基础样式 --- */
:root {
    --primary-text: #ffffff;
    --background-color: #000000;
    --accent-color: #0066ff;
    --card-background: #1a1a1a;
}

body {
    margin: 0;
    font-family: 'LineSeed', sans-serif;
    /* font-weight: 400; */
    /* 默认使用 Regular 字重 */
    background-color: var(--background-color);
    color: var(--primary-text);
    overflow-x: hidden;
}

a {
    color: var(--primary-text);
    text-decoration: none;
    transition: color 0.3s ease;
    /* font-weight: 400; */
}

a:hover {
    color: var(--accent-color);
    /* font-weight: 700; */
}



/* --- 开场动画的关键帧 --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 加载动画样式 --- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-logo {
    width: 120px;
    height: auto;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.loading-text {
    font-size: 5rem;
    font-weight: 700;
    color: var(--primary-text);
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

@media (max-width: 768px) {
    .loading-logo {
        width: 88px;

    }

    .loading-text {
        font-size: 3.6rem;

    }
}





/* --- 头部导航 --- */
.main-header {
    /* border: 1px solid blue; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 5%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 1s ease-out, opacity 1s ease-out;
    /* background-color: rgba(0, 0, 0, 0.2); */

    /* --- 核心修改 --- */
    background-color: transparent;
    /* 1. 默认背景设置为透明 */
    transition: background-color 0.4s ease,
        /* 2. 为背景色变化添加平滑过渡 */
        opacity 0.8s ease,
        transform 0.8s ease,
        padding 0.4s ease;

}

/* 这是导航栏滚动后的样式 */
#main-header.scrolled {
    background-color: rgba(26, 26, 26, 0.36);
    /* 3. 设置一个深色的半透明背景 */
    backdrop-filter: blur(10px);
    /* 4. (可选) 添加毛玻璃效果，更显精致 */
    padding: 25px 5%;
}


.main-header.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* 1. Logo 链接本身，我们让它成为一个 flex 容器来方便对齐 */
.logo {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    /* 移除旧的文本样式，如果之前有的话 */
    font-size: inherit;
    /* 不再需要特定的 font-size */
    font-weight: inherit;
    text-decoration: none;
}

/* 2. Logo 图片本身的样式 */
.logo img {
    /* 
     * 关键：通过 height 来控制 Logo 的大小。
     * 它的宽度会根据高度自动等比例缩放。
     */
    height: 28px;
    /* 您可以根据需要调整这个值 */

    width: auto;
    /* 确保宽度自动缩放 */

    /* (可选) 为 Logo 从文字变为图片添加一个平滑的过渡效果 */
    transition: all 0.3s ease;
}


.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 100px;
}

.main-nav li {
    margin: 0;
}

.main-nav a {
    position: relative;
    font-size: 20px;
    font-weight: 400;
}

.main-nav a:hover {
    color: #87CEEB;
    transition: color 0.3s ease;
}

/* --- 响应式导航 & 汉堡菜单 --- */
.nav-toggle-button {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 101;
    padding: 0;
}

.nav-toggle-button .line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #ffffff;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

/* --- 英雄区域 & 轮播图样式 --- */
.hero-section {
    /* border: 1px solid red; */
    height: 92vh;
    position: relative;
    overflow: hidden;
    background-color: #000;
    cursor: grab;
    opacity: 0;
    transition: opacity 1.2s ease-in 0.3s;
}

.hero-section.loaded {
    opacity: 1;
}

.hero-section:active {
    cursor: grabbing;
}

.slider-container {
    height: 100%;
    display: flex;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.slide {
    /* border: 1px solid red; */
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    /* background-size: cover; */
    /* background-position: center; */
    position: relative;
}


.slide video {
    position: absolute;
    top: 0;
    left: 0;

    /* 1. 让 video 元素本身的大小与父容器完全一样 */
    width: 100%;
    height: 100%;

    /* 2. 核心：让视频内容铺满整个元素，多余部分自动裁剪 */
    object-fit: cover;

    z-index: 1;
    /* 视频在最底层 */
}



/* .hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(12, 12, 12, 1) 0%, rgba(12, 12, 12, 0.7) 15%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    pointer-events: none;
} */



.hero-content {
    position: absolute;
    bottom: 50%;
    left: 5%;
    transform: translate(0, 50%);
    z-index: 3;
    width: 90%;
    max-width: 800px;
    pointer-events: none;
}

.hero-content h1 {
    font-size: 6rem;
    margin: 0;
    font-weight: 700;
}

#company-img h1 {
    margin-bottom: 24px;
    /* font-weight: 900; */
    background: linear-gradient(to right, #e61569, #ff1010);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#new-works img {
    width: 65%;
    margin-bottom: 20px;
}

#company-img p {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
}

#new-works p {
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0;
}




/* 轮播图分页器样式 */
.slider-pagination {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

.pagination-indicator {
    /* border: 1px solid red; */
    height: 14px;
    width: 50px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 7px;
    cursor: pointer;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.pagination-indicator.active {
    background-color: #ffffff;
    width: 80px;
}

/* --- 作品画廊 --- */
.creations-gallery {
    padding: 24px 5%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.creations-gallery.loaded {
    opacity: 1;
    transform: translateY(0);
}

.creations-gallery h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
    /* 标题使用 Bold (Bd) 字体 */
}

.masonry-grid {
    column-count: 5;
    column-gap: 15px;
}

/* ✅ 修复后的 grid-item */
.grid-item {
    margin-bottom: 20px;
    break-inside: avoid;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    position: relative;
    /* ✅ 新增：使子元素的绝对定位相对于它 */
}



/* --- 瀑布流图片信息遮罩 --- */

.grid-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 75%);
    color: white;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 内容靠底部 */
    opacity: 0;
    /* 初始隐藏 */
    transform: translateY(20px);
    /* 初始位置稍微向下 */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    /* 遮罩自身的过渡 */
    pointer-events: none;
    /* 遮罩不阻挡鼠标事件到 .grid-item */
    z-index: 2;
    /* 确保遮罩在图片之上 */
}

.grid-item-title {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    font-weight: 700;
    /* 使用 Bd 字重 */
    font-family: 'LineSeed', sans-serif;
}

.grid-item-description {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    /* 使用 Rg 字重 */
    font-family: 'LineSeed', sans-serif;
    opacity: 0.9;
}





.grid-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}


.grid-item:hover .grid-item-overlay {
    opacity: 1;
    /* 遮罩淡入 */
    transform: translateY(0);
    /* 遮罩回到原位 */
}


.grid-item img {
    width: 100%;
    height: auto;
    display: block;
}



/* --- 视频播放图标的样式 (始终显示) --- */
.play-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    pointer-events: none;

    /* 核心修改：让图标默认就完全可见 */
    opacity: 1;
    transform: scale(1);

    /* 为桌面端的悬停交互添加过渡动画 */
    transition: transform 0.3s ease;
}

/* 伪元素画出三角形 (保持不变) */
.play-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
    margin-left: 5px;
}

/* (可选) 为桌面端添加一个轻微放大的悬停效果，提升交互感 */
.grid-item:hover .play-icon {
    transform: scale(1.05);
}




@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/* --- 关于我们介绍区域 --- */
.about-us-section {
    /* border: 1px solid red; */
    padding: 5px 50px 100px;
    text-align: center;

}













.main-title {
    /* border: 1px solid blue; */
    display: inline-block;
    line-height: 100%;
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(to right, #1584e6, white, #ff1010);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-us-section .subtitle {
    /* border: 1px solid blue; */
    font-size: 2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    /* 使用主题强调色 */
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/* --- 核心：为段落设置最大宽度 --- */
.about-us-section .about-us-paragraph {
    max-width: 800px;
    /* 1. 关键！限制段落的最大宽度为 800px */
    margin-left: auto;
    /* 2. 配合 max-width，让段落本身在页面上水平居中 */
    margin-right: auto;
    /* 3. 配合 max-width，让段落本身在页面上水平居中 */

    font-size: 1.1rem;
    line-height: 1.7;
    /* 增加行高，提升可读性 */
    color: rgba(255, 255, 255, 0.6);
}

/* 响应式调整：在非常小的屏幕上，减少一些内边距 */
@media (max-width: 768px) {
    .about-us-section {
        padding: 30px 30px;
    }

    .main-title {
        font-size: 2.4rem;

    }

    .about-us-section .subtitle {
        /* border: 1px solid blue; */
        font-size: 1.6rem;
    }
}




/* --- 关于我们介绍区域 出现动画--- */
/* 1. 为需要动画的元素定义初始状态：透明、且在下方30px的位置 */
.about-us-section .main-title,
.about-us-section .subtitle,
.about-us-section .about-us-paragraph {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. 定义动画的最终状态：当父容器有了 .is-visible 类时，元素恢复不透明和原位 */
.about-us-section.is-visible .main-title,
.about-us-section.is-visible .subtitle,
.about-us-section.is-visible .about-us-paragraph {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 关键：为副标题和段落添加入场延迟，形成“依次出现”的效果 */
.about-us-section.is-visible .subtitle {
    transition-delay: 0.3s;
    /* 延迟0.2秒出现 */
}

.about-us-section.is-visible .about-us-paragraph {
    transition-delay: 0.6s;
    /* 延迟0.4秒出现 */
}





/* —————————————————————————————————————————————————————————— */
/* --- 创始人介绍区域 --- */
.founders-section {
    /* border: 1px solid red; */
    padding: 0 15% 100px;
    /* background-color: #be8484; */
}

.title-container {
    /* border: 1px solid red; */
    display: flex;
    /* 核心：align-items: center 会自动处理垂直对齐 */
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.section-title {
    /* border: 1px solid blue; */
    font-size: 2.8rem;
    font-weight: 300;
}


/* 为作为 <img> 的图标设置大小 */
.title-icon {
    /* border: 1px solid yellow; */
    /* 
     * 关键：设置图标的高度。
     * 您的 .section-title 字号是 2.5rem。
     * 我们将图标高度设置为一个稍小的值，以匹配文字的实际视觉高度。
     */
    /* border: 1px solid red; */
    height: 2.8rem;

    /* 让宽度根据高度自动缩放，以保持原始比例 */
    width: auto;
}



/* --- 1. 使用 Grid 布局 --- */
.founders-grid {
    /* border: 1px solid blue; */
    display: grid;
    /* 核心：创建自适应的响应式网格 */
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    /* 卡片之间的间距 */
    max-width: 1600px;
    margin: 0 auto;
    /* 让整个网格居中 */
}



/* --- 2. 创始人卡片样式 --- */
.founder-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    color: white;

    /* 核心：不再设置固定高度，让其由内容决定 */

    /* 悬停上浮动画 */
    /* transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); */
}

/* .founders-section.is-visible .founder-card:hover {
    transform: translateY(-15px);

    transition-delay: 0s;

    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} */

/* --- 3. 添加一个用于保持图片比例的容器 --- */
.card-image-container {
    position: relative;
    width: 100%;
    padding-top: 125%;
    /* 关键：用 padding-top 制造宽高比 (例如 4:5 -> 5/4 = 125%) */
    /* 如果您的图片是方形, 用 100% */
    /* 如果是 16:9, 用 56.25% */
}

.card-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保图片填满容器且不变形 */
}


/* --- 4. 渐变和文字内容的定位 (与之前类似) --- */
.founder-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 89, 179, 0.8), transparent);
    z-index: 1;
}

.card-content-default {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
}

/* ... (h3, p 的样式保持不变) ... */
.card-content-default h3 {
    font-size: 2rem;
    line-height: 100%;
}

.card-content-default p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    /* line-height: 100%; */
}

/* --- 5. 悬停遮罩层 (与之前类似) --- */
.card-overlay-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 73, 183, 0.75);
    backdrop-filter: blur(5px);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
}


.card-overlay-hover h3 {
    font-size: 2.5rem;
}

.card-overlay-hover .long-desc {
    /* --- 核心修改：使用 clamp() 实现响应式字号 --- */
    font-size: clamp(0.85rem, 0.5rem + 1.2vw, 1.2rem);
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

.card-overlay-hover .title {
    font-size: 1.5rem;
    font-weight: 400;
}

.founder-card:hover .card-overlay-hover {
    opacity: 1;
}

/* ... (遮罩内文字样式保持不变) ... */

/* --- 6. 移除旧的 @media 查询 --- */
/* 我们不再需要针对 founder-card 的媒体查询了，可以删除 */


/* 手机: 变为一列 */
@media (max-width: 768px) {
    .founders-section {
        padding: 50px 12.5%;
    }

    .founders-grid {

        grid-template-columns: 1fr;

    }

    /* ... (h3, p 的样式保持不变) ... */
    .card-content-default h3 {
        font-size: 1.5rem;

    }

    .card-content-default p {
        font-size: 0.8rem;

    }

    .card-overlay-hover .long-desc {
        /* --- 核心修改：使用 clamp() 实现响应式字号 --- */

        font-size: 0.9rem;


    }

}



/* --- "Founders" 板块的进入动画 --- */

/* 1. 为需要动画的元素定义初始状态：透明、且在下方30px */
.founders-section .title-container,
.founders-section .founder-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. 定义动画的最终状态：当父容器 .founders-section 有了 .is-visible 类时 */
.founders-section.is-visible .title-container,
.founders-section.is-visible .founder-card {
    opacity: 1;
    transform: translateY(0);
    /* transition-delay: 0.2s; */
}

/* 3. 关键：为不同的卡片添加入场延迟，形成依次出现的效果 */
.founders-section.is-visible .founder-card:nth-child(1) {
    transition-delay: 0.2s;
}

.founders-section.is-visible .founder-card:nth-child(2) {
    transition-delay: 0.5s;
}

.founders-section.is-visible .founder-card:nth-child(3) {
    transition-delay: 0.8s;
}

/* 如果您有更多卡片，可以继续添加 :nth-child(4), (5)... */







/* —————————————————————————————————————————————————————— */

/* --- 核心成员区域 --- */
.core-members-section {
    padding: 0 15% 100px;
}

/* 标题样式已复用，无需额外CSS */

/* --- 成员网格 (基于三列) --- */
.members-grid {
    display: grid;
    gap: 15px;
    /* 卡片之间的间距 */
    max-width: 1400px;
    margin: 0 auto;

    /* 默认状态 (PC端): 三列，每列占据相同的空间 */
    grid-template-columns: repeat(3, 1fr);
}

/* --- 成员卡片 (修正后的版本) --- */
.member-card {
    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;

    position: relative;
    /* 1. 关键：让卡片成为伪元素的定位父级 */
    z-index: 1;
    /* 确保卡片本身有一个堆叠上下文 */
    overflow: hidden;
    /* 隐藏超出圆角的伪元素部分 */
}

/* 2. 创建伪元素作为渐变层 */
.member-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 3. 将渐变背景应用到伪元素上 */
    background: linear-gradient(to bottom left, rgba(0, 73, 183, 1), rgb(63, 148, 252));

    /* 4. 默认隐藏 */
    opacity: 0;

    /* 5. 为 opacity 属性添加过渡效果 */
    transition: opacity 0.4s ease;

    z-index: -1;
    /* 6. 关键：将伪元素放在卡片内容的“后面” */
}

/* 7. 当鼠标悬停在卡片上时，让伪元素显示出来 */
.member-card:hover::before {
    opacity: 1;
}

/* 
 * 确保删除或注释掉旧的 .member-card:hover 规则，
 * 因为我们不再需要它来改变背景了。
 */



/* --- 卡片上半部分 (头像 + 信息) --- */
.card-top {
    display: flex;
    align-items: center;
    /* 垂直居中对齐头像和文字 */
    gap: 20px;
    /* 头像和文字之间的间距 */
    padding-bottom: 20px;
    margin-bottom: 20px;
    /* border-bottom: 1px solid #333; */
    /* 分割线 */
}

.member-photo {
    flex-shrink: 0;
    /* 防止头像在空间不足时被压缩 */
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    overflow: hidden;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 姓名和职位 */
.member-info h3 {
    font-size: 1.5rem;
    margin: 0 0 5px 0;
}

.member-info .member-role {
    font-size: 1.2rem;
    color: rgb(95, 158, 253);
    margin: 0;
    font-weight: 700;
}

/* --- 卡片下半部分 (简介) --- */
.card-bottom .member-bio {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* --- 响应式布局 --- */

/* 平板: 变为两列 */
@media (max-width: 1024px) {
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机: 变为一列 */
@media (max-width: 768px) {
    .members-grid {
        grid-template-columns: 1fr;
    }

    .core-members-section {
        padding: 50px 5%;
    }
}



/* --- "Core Members" 板块的进入动画 --- */

/* 1. 为需要动画的元素定义初始状态 */
.core-members-section .title-container,
.core-members-section .member-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. 定义动画的最终状态 */
.core-members-section.is-visible .title-container,
.core-members-section.is-visible .member-card {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 为不同的卡片添加入场延迟，形成依次出现的效果 */
.core-members-section.is-visible .member-card:nth-child(1) {
    transition-delay: 0.2s;
}

.core-members-section.is-visible .member-card:nth-child(2) {
    transition-delay: 0.3s;
}

.core-members-section.is-visible .member-card:nth-child(3) {
    transition-delay: 0.4s;
}

.core-members-section.is-visible .member-card:nth-child(4) {
    transition-delay: 0.5s;
}

.core-members-section.is-visible .member-card:nth-child(5) {
    transition-delay: 0.6s;
}

.core-members-section.is-visible .member-card:nth-child(6) {
    transition-delay: 0.7s;
}

/* 如果您有更多卡片，可以继续添加... */








/* ========================================================== */
/*           ↓↓↓ 将这段新代码添加到 index.css 文件末尾 ↓↓↓         */
/* ========================================================== */

/* --- 发展历程区域 --- */
.journey-section {
    padding: 0 15% 100px;
    /* background-color: grey; */
}

/* --- 主容器 (PC端为两列) --- */
.journey-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    /* 关键：让两列的顶部对齐 */
    align-items: start;
}

/* --- 左侧标签栏 (保持不变) --- */
.journey-tabs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.journey-tab {
    padding: 20px;
    /* border-left: 3px solid transparent; */
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.journey-tab:hover {
    opacity: 1;
    background-color: #1a1a1a;
}

.journey-tab.active {
    opacity: 1;
    /* border-left-color: var(--accent-color); */
    /* background-color: #1a1a1a; */
    background: linear-gradient(to right, #3a7bd5, #00d2ff);
}

.journey-tab h3 {
    font-size: 1.5rem;
    margin: 0 0 5px 0;
}

.journey-tab p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}


/* --- 右侧内容区 (不再需要 position: relative) --- */
.journey-content {
    /* 它现在只是一个普通的容器 */
}

/* --- 核心修正：不再使用 position: absolute --- */
.journey-grid {
    display: grid;
    /* 默认让它保持 grid 布局 */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    /* 
     * 关键：默认不显示。
     * display 属性无法应用 transition，所以切换会是瞬间的。
     * 如果需要淡入淡出，JS 部分需要做相应修改。
     */
    display: none;
}

/* 关键：当 grid 拥有 active 类时，我们让它显示出来 */
.journey-grid.active {
    display: grid;
    /* 恢复为 grid 布局 */
}


/* --- 图片卡片 --- */
.journey-image-card {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center;

    /* ↓↓↓ 添加这一行 ↓↓↓ */
    transition: filter 0.3s ease;
}

/* ↓↓↓ 添加这个新规则 ↓↓↓ */
.journey-image-card:hover {
    filter: brightness(1.2);
}

.journey-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.journey-card-content h4 {
    font-size: 1.2rem;
    margin: 0 0 5px 0;
}

.journey-card-content p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}


/* --- 响应式布局 (不再需要 min-height) --- */
@media (max-width: 1400px) {
    .journey-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .journey-tabs {
        flex-direction: row;
        justify-content: center;
    }

    .journey-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        flex: 1;
        text-align: center;
    }

    /* 
    .journey-tab.active {
        border-bottom-color: var(--accent-color);
    } */


    /* 
     * 我们不再需要为 .journey-content 设置 min-height，
     * 因为它的高度现在会由内部显示的 .journey-grid 自动撑开。
     */
}



/* 手机: 变为一列 */
@media (max-width: 768px) {
    .journey-section {
        padding: 50px 5%;
    }

    .journey-tab p {
        /* display: none; */
    }

    .journey-tabs {
        flex-direction: column;
        justify-content: center;
    }

    .journey-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        flex: 1;
        text-align: center;
        /* display: flex; */
    }
}



/* --- "Development Journey" 板块的进入动画 --- */

.journey-section .title-container,
.journey-section .journey-container {
    /* 我们可以直接让整个容器作为一个整体浮现 */
    opacity: 0;
    transform: translateY(40px);
    /* 让位移大一点，效果更明显 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.journey-section.is-visible .title-container,
.journey-section.is-visible .journey-container {
    opacity: 1;
    transform: translateY(0);
}

/* 为内容容器设置一个延迟，让标题先出现 */
.journey-section.is-visible .journey-container {
    transition-delay: 0.2s;
}



/* ========================================================== */
/*           ↓↓↓ 将这段新代码添加到 index.css 文件末尾 ↓↓↓         */
/* ========================================================== */

/* --- 解决方案区域 --- */
.solutions-section {
    padding: 0 15% 100px;
    /* border: 1px solid blue; */
    /* background-color: grey; */
}

/* --- 主容器 (PC端为两列) --- */
.solutions-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 左右两列等宽 */
    gap: 50px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    /* 让左右两列垂直居中对齐 */
}

/* --- 左侧内容 --- */
.solutions-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 标签按钮 */
.solutions-tabs {
    display: flex;
    gap: 20px;
}

/* 标签按钮 */
.solutions-tab {
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;

    /* 
     * 1. 默认状态：纯灰色背景。
     * 我们不再需要透明的 border。
     */
    background-color: #1a1a1a;
    color: rgba(255, 255, 255, 0.7);
    /* 让未选中的文字也稍暗一些 */

    /* 2. 为 background 属性添加过渡效果，让颜色变化更平滑 */
    transition: all 0.4s ease;
}

/* 鼠标悬停在“未选中”的标签上时，给一个简单的反馈 */
.solutions-tab:not(.active):hover {
    background-color: #2a2a2a;
    color: white;
}


/* 3. 激活状态：背景变为渐变色 */
.solutions-tab.active {
    /* 
     * 关键：将线性渐变直接应用到 background 属性上。
     * 我们不再需要任何 border 相关的属性。
     */
    background: linear-gradient(to right, #3a7bd5, #00d2ff);
    color: white;
    /* 确保激活状态下的文字是纯白色 */
    box-shadow: 0 4px 15px rgba(0, 150, 255, 0.2);
    /* (可选) 添加一个柔和的光晕效果 */
}

/* --- 特点列表 --- */
.solutions-features {
    /* 无需样式，只是一个容器 */
}

.solutions-features-list {
    display: none;
    /* 默认隐藏 */
    flex-direction: column;
    gap: 30px;
}

.solutions-features-list.active {
    display: flex;
    /* 激活时显示为 flex 布局 */
}

/* 单个特点 (PC端：左右布局) */
.feature-item {
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.feature-item img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

.feature-text h4 {
    font-size: 1.3rem;
    margin: 0 0 5px 0;
}

.feature-text p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* --- 右侧图片 --- */
.solutions-images {
    width: 100%;
}

.solutions-image {
    display: none;
    /* 默认隐藏 */
    width: 100%;
    border-radius: 12px;
}

.solutions-image.active {
    display: block;
    /* 激活时显示 */
}

/* --- 响应式布局 (小于 900px) --- */
@media (max-width: 1400px) {


    .solutions-container {
        grid-template-columns: 1fr;
        /* 变为单列 */
        gap: 40px;
    }

    .solutions-tabs {
        justify-content: center;
        /* 标签居中 */
    }

    /* 关键：在手机端，特点列表变为三列网格 */
    .solutions-features-list.active {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* 关键：在手机端，单个特点变为上下布局 */
    /* .feature-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    } */


}



@media(max-width:768px) {
    .solutions-section {
        padding: 50px 5%;
    }
}

/* 进一步响应式 (非常小的手机屏幕) */
@media (max-width: 500px) {

    /* 在非常小的屏幕上，特点列表也变为单列 */
    .solutions-features-list.active {
        grid-template-columns: 1fr;
    }
}


/* --- "Our Solutions" 板块的进入动画 --- */

.solutions-section .title-container,
.solutions-section .solutions-container {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.solutions-section.is-visible .title-container,
.solutions-section.is-visible .solutions-container {
    opacity: 1;
    transform: translateY(0);
}

/* 为内容容器设置一个延迟 */
.solutions-section.is-visible .solutions-container {
    transition-delay: 0.2s;
}







/* ========================================================== */
/*           ↓↓↓ 将这段新代码添加到 index.css 文件末尾 ↓↓↓         */
/* ========================================================== */

/* --- 获奖展示区域 --- */
.awards-section {
    padding: 0 15% 100px;
    /* 上下内边距，左右为0，因为滚动条会撑满 */
    /* background-color: #111; */
}

/* --- 滚动区域的“窗口” --- */
.awards-scroller {
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;

    /* --- 核心修正：添加上下的内边距 --- */
    padding: 20px 0;
    /* 顶部和底部各增加 20px 的空间，左右不变 */

    -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
    mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}

/* --- 滚动的“轨道” --- */
.scroller-track {
    display: flex;
    gap: 20px;
    /* 图片之间的间距 */
    width: max-content;
    /* 让轨道的宽度由其内容决定 */

    /* 关键：应用我们下面定义的动画 */
    animation: scroll 40s linear infinite;
}

/* --- 定义滚动动画 --- */
@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        /* 
         * 关键：向左移动 50% 的宽度。
         * 因为轨道包含两组图片，移动50%正好等于移动一组图片的宽度。
         */
        transform: translateX(-50%);
    }
}


/* --- 交互效果 --- */

/* 1. 当鼠标悬停在整个滚动区域时，暂停动画 */
.awards-scroller:hover .scroller-track {
    animation-play-state: paused;
}

/* 2. 单个奖状图片的样式和悬停效果 */
.award-logo {
    height: 240px;
    /* 统一所有奖状的高度 */
    width: auto;
    border-radius: 10px;
    /* border: 1px solid red; */
    transition: transform 0.3s ease;
}

.award-logo:hover {
    transform: scale(1.05);
    /* 悬停时放大 */
    cursor: pointer;
}



@media(max-width:768px) {
    .awards-section {
        padding: 50px 5%;
    }

    .award-logo {
        height: 180px;
    }
}

/* --- "Honors & Awards" 板块的进入动画 --- */

/* 1. 为需要动画的元素定义初始状态 */
.awards-section .title-container,
.awards-section .awards-scroller {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. 定义动画的最终状态 */
.awards-section.is-visible .title-container,
.awards-section.is-visible .awards-scroller {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 为滚动区域设置一个延迟，让标题先出现 */
.awards-section.is-visible .awards-scroller {
    transition-delay: 0.2s;
}









/* —————————————————————————————————————————————————— */
/* --- 商业聚焦区域 --- */
.focus-section {
    padding: 0 15% 100px;
}

/* 标题样式已复用 */

/* --- 聚焦领域网格 (基于两列) --- */
.focus-grid {
    display: grid;
    gap: 15px;
    max-width: 1200px;
    /* 限制一个更适合文字阅读的最大宽度 */
    margin: 0 auto;

    /* 默认状态 (PC端): 两列 */
    grid-template-columns: repeat(2, 1fr);
}

/* --- 聚焦卡片 --- */
.focus-card {
    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 35px;
    /* 增加内边距，让文字有更多呼吸空间 */

    /* 悬停时的背景渐变效果 */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* (复用我们之前为成员卡片写的悬停效果) */
.focus-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, #0c81e8, #60a0ff);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

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


/* 卡片内文字样式 */
.focus-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: var(--accent-color);
    /* 用强调色来突出标题 */
}

.focus-card {
    padding: 36px;
}

.focus-card p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}


/* --- 响应式布局 --- */

/* 手机: 变为一列 */
@media (max-width: 768px) {
    .focus-grid {
        grid-template-columns: 1fr;
    }

    .focus-section {
        padding: 50px 5%;
    }

    .focus-card h3 {
        margin: 0 0 10px 0;
    }

    .focus-card p {
        font-size: 1rem;
    }

    .focus-card {
        padding: 20px 28px;
    }
}



/* --- "Commercial Focus" 板块的进入动画 --- */

/* 1. 为需要动画的元素定义初始状态 */
.focus-section .title-container,
.focus-section .focus-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. 定义动画的最终状态 */
.focus-section.is-visible .title-container,
.focus-section.is-visible .focus-card {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 为不同的卡片添加入场延迟 */
.focus-section.is-visible .focus-card:nth-child(1) {
    transition-delay: 0.2s;
}

.focus-section.is-visible .focus-card:nth-child(2) {
    transition-delay: 0.4s;
}

.focus-section.is-visible .focus-card:nth-child(3) {
    transition-delay: 0.6s;
}

.focus-section.is-visible .focus-card:nth-child(4) {
    transition-delay: 0.8s;
}






/* ========================================================== */
/*     ↓↓↓ 用这段完整的 CSS 替换您现有的 partners-section 样式 ↓↓↓     */
/* ========================================================== */

/* --- 合作伙伴区域 --- */
.partners-section {
    padding: 0 15% 100px;
    /* background-color: #000; */
}

/* --- 主容器 --- */
.partners-container {
    display: grid;
    grid-template-columns: minmax(450px, 1fr) 2fr;
    gap: 60px;
    max-width: 1600px;
    /* margin: 60px auto 0; */
    align-items: center;
}

/* --- 左侧文本 --- */
.partners-left p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
}

/* --- 右侧 Logo 区域 --- */
.partners-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 三行之间的垂直间距 */
    overflow: hidden;
    /* 控制 logo 的可见范围 */
}

/* --- 滚动区域的“窗口” --- */
.logos-scroller {
    width: 100%;
    /* 为左右两边添加渐变遮罩，让 logo 平滑地出现和消失 */
    -webkit-mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
    mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
}

/* --- 滚动的“轨道” --- */
.scroller-track {
    display: flex;
    width: max-content;
    /* 让轨道的宽度由其内容（两组logo）决定 */

    /* 关键：在这里用 gap 控制 logo 之间的间距 */
    gap: 20px;
    /* <--- 在这里调整间隙！ */

    /* 将动画应用到整个轨道上 */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* --- Logo 样式 --- */
.partner-logo {
    height: 60px;
    width: auto;
    /* 移除所有动画和 margin 属性！它现在只是一个静态的图片。 */
}

/* --- 动画定义 --- */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

    /* 移动轨道宽度的50%，正好是一组logo的宽度 */
}

@keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* --- 应用动画 --- */
.track-left {
    animation-name: scroll-left;
    animation-duration: 40s;
}

.track-right {
    animation-name: scroll-right;
    animation-duration: 40s;
}

.track-left-slow {
    animation-name: scroll-left;
    animation-duration: 60s;
    /* 更慢的速度 */
}

/* --- 响应式布局 --- */
@media (max-width: 1400px) {
    .partners-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .partners-left {
        text-align: center;
    }
}



/* --- 响应式布局 --- */
@media (max-width: 768px) {
    .partners-section {
        padding: 50px 5%;
    }

    .partners-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .partners-left {
        text-align: center;
    }
}

/* --- 入场动画 --- */
.partners-section .title-container,
.partners-section .partners-container {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.partners-section.is-visible .title-container,
.partners-section.is-visible .partners-container {
    opacity: 1;
    transform: translateY(0);
}

.partners-section.is-visible .partners-container {
    transition-delay: 0.2s;
}









/* ————————————————————联系我们样式———————————————————— */

/* --- 合作伙伴区域 --- */
.contact-section {
    padding: 0 15% 100px;
    /* background-color: #000; */
}

/* --- 主容器 --- */
.contact-container {
    /* display: grid;
    grid-template-columns: minmax(450px, 1fr) 2fr;
    gap: 60px;
    max-width: 1600px;
    margin: 60px auto 0; */
    align-items: center;
    text-align: center;
}



.info p {
    color: rgba(255, 255, 255, 0.5);
}





/* --- 为这个板块添加入场动画 --- */
.contact-section .title-container,
.contact-section .contact-container {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.contact-section.is-visible .title-container,
.contact-section.is-visible .contact-container {
    opacity: 1;
    transform: translateY(0);
}

.contact-section.is-visible .contact-container {
    transition-delay: 0.2s;
    /* 让联系信息在标题之后出现 */
}



@media (max-width: 768px) {
    .contact-section {
        padding: 50px 5%;
        /* background-color: #000; */
    }
}








/* --- 响应式 & 页脚 --- */


@media (max-width: 900px) {
    .nav-toggle-button {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(12, 12, 12, 0.95);
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.4s ease, visibility 0.4s, transform 0.4s ease;
    }

    .main-header.nav-active .main-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .main-nav a {
        font-size: 24px;
    }

    .main-header.nav-active .line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .main-header.nav-active .line:nth-child(2) {
        opacity: 0;
    }

    .main-header.nav-active .line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 1200px) {
    .masonry-grid {
        column-count: 3;
    }

    .hero-content {
        bottom: 80px;
        left: 50%;
        transform: translate(-50%, 0);
        text-align: center;
    }

    .hero-content h1 {
        font-size: 4.5rem;
        margin-bottom: 10px;
    }

    #company-img h1 {
        margin-bottom: 10px;
    }

    #company-img p {
        font-size: 1.5rem;
    }

    #new-works img {
        width: 50%;
    }

    #new-works p {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }

    .grid-item-title {
        font-size: 0.85rem;
    }

    .grid-item-description {
        /* display: none; */
        font-size: 0.68rem;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }

    .title-container h2 {
        font-size: 2rem;
    }
}

/* @media (max-width: 480px) {
    .masonry-grid {
        column-count: 1;
    }
} */

.loader {
    text-align: center;
    padding: 50px;
    font-size: 18px;
    color: #555;
}





/* ========================================================== */
/*           ↓↓↓ 将这段新代码添加到 index.css 文件末尾 ↓↓↓         */
/* ========================================================== */

/* --- 页脚 Logo 区域 --- */
.footer-logo-section {
    /* border: 1px solid red; */
    padding: 36px 15% 36px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    /* background-color: #000; */
    /* 确保背景是黑色 */
    /* --- 核心修正：提升层级 --- */
    opacity: 1;
    transform: translateY(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

.footer-logo-section img {
    /* 
     * 1. 关键：使用 max-width 来控制 Logo 的最大尺寸。
     * 例如，我们不希望它在超宽屏上变得无限大。
     */
    max-width: 400px;
    /* 您可以根据需要调整这个最大值 */

    /*
     * 2. 关键：让 Logo 的宽度占据其容器的 80%，
     * 这使得它在手机等小屏幕上能自动缩小。
     */
    width: 80%;

    /* 3. 让高度自动等比例缩放，防止变形 */
    height: auto;
}



.footer-logo-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}







.main-footer {
    padding: 24px 5% 50px;
    text-align: center;
    /* border-top: 1px solid #ffffff52; */
    /* background-color: rgba(0, 0, 0, 1); */
}




/* --- 视频弹窗 (Modal) 样式 --- */

.modal {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    /* 确保在最顶层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 允许滚动（如果内容超出屏幕） */
    background-color: rgba(0, 0, 0, 0.8);
    /* 半透明黑色背景 */
    backdrop-filter: blur(5px);
    /* 可选：添加背景模糊效果 */
}

.modal-content {
    background-color: #1a1a1a;
    margin: auto;
    /* padding: 20px; */
    width: 80%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* 关闭按钮 */
.close {
    /* border: 1px solid red; */
    color: #aaa;
    /* left: 50%; */
    /* margin: 0 auto; */
    /* display: block; */
    /* text-align: center; */
    /* float: right; */
    font-size: 3rem;
    font-weight: bold;
    /* position: absolute; */
    /* top: 15px;
    right: 25px; */
    z-index: 1001;
    cursor: pointer;
    /* position: relative; */
}

.close span {
    position: absolute;
    /* border: 1px solid blue;  */
    /* display: flex;  */
    /* margin: 0 auto; */
    /* left: 50%; */
    transform: translate(-50%, 0);
}

.close:hover,
.close:focus {
    color: white;
    text-decoration: none;
}

/* 1. 视频容器的默认样式 (用于本地视频) */
#video-container {
    width: 100%;
    /* border-radius: 10px; */
    /* 没有固定的 padding-bottom，高度由内容决定 */
}


/* 2. 专门用于16:9视频的辅助类 */
#video-container.ratio-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

/* 3. 本地 <video> 元素的样式 */
#video-container video {
    display: block;
    /* 避免底部出现小间隙 */
    width: 100%;
    height: auto;
    /* 高度自动，保持原始比例 */
    max-height: 80vh;
    /* 关键：限制最大高度，防止视频过长超出屏幕 */
}

/* 4. Bilibili <iframe> 元素的样式 */
#video-container.ratio-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}






/* ========================================================== */
/*           ↓↓↓ 将这段新代码添加到 index.css 文件末尾 ↓↓↓         */
/* ========================================================== */

/* --- 页脚背景图 --- */

/* 1. 首先，我们需要让 <body> 成为定位的参考点 */
body {
    position: relative;
    /* 关键！ */
}

/* 2. 定义背景容器的样式 */
.footer-background {
    /* border: 1px solid red; */
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    /* 紧贴页面底部 */
    left: 0;
    width: 100%;
    /* 撑满整个页面宽度 */

    /* 
     * 关键：设置一个高度。
     * 这个高度应该约等于您的 "Contact Us" 板块的高度，
     * 或者您希望背景图显示的区域高度。您可以根据需要调整。
     */
    height: 1200px;

    /* 
     * 设置您的背景图片。
     * background-position: bottom center; -> 让图片底部居中对齐
     * background-size: cover; -> 让图片始终覆盖整个容器，不变形
     * background-repeat: no-repeat; -> 图片不重复
     */
    background-image: url('../images/footer-background.jpg');
    /* <-- 替换为您自己的图片路径 */
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;

    /* 
     * 关键：将它置于内容之后。
     * 一个较低的 z-index 可以确保它在所有 section 内容的后面。
     */
    z-index: -1;
}