/*首页背景视频代码*/
    
    /* ================= 首页全屏视频背景 ================= */
.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh; /* 占满整个屏幕的高度 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 视频本身的定位与铺满 */
/* 视频本身的定位与铺满 */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;     /* 直接强制宽度 100% */
    height: 100%;    /* 直接强制高度 100% */
    
    /* 🌟 核心：配合 100% 宽高，cover 会自动裁剪多余边缘，保证绝对没有黑边铺满全屏 */
    object-fit: cover; 
    
    /* 🌟 魔法属性：指挥裁剪的焦点 */
    object-position: center center; 
    
    z-index: 1;
}

/* 半透明遮罩层 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 20, 0.5); /* 50%透明度的深邃暗色，压制视频亮度 */
    z-index: 2;
}

/* 叠在视频上方的文字容器 */
.hero-content {
    position: relative;
    z-index: 3; /* 确保文字永远浮在视频和遮罩的最上层 */
    color: white;
    padding: 0 20px;
}

.hero-content h1 {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 3.5rem;
    font-weight: 300; /* 使用较细的字重，高级感立现 */
    letter-spacing: 4px;
    margin-bottom:10px;
}

.hero-content p {
    font-size: 1.1rem;
    color: #b0b0b0;
    letter-spacing: 1px;
}





/* =========================================
   4. 业务介绍板块 (Services Section)
========================================= */
.services-section {
    background-color: #1a1921; /* 使用比纯黑稍浅的高级深色背景，与顶部视频风格融为一体 */
    color: white;
    padding: 100px 40px;      /* 上下留出充足的高级留白空间 */
    display: flex;
    justify-content: center;
}

/* 限制最大宽度，防止大屏幕上文字拉得太开不好看 */
.services-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px; /* 左右两侧大板块的间距 */
}

/* 左侧标题区 */
.services-header {
    flex: 1; /* 占一半宽度 */
    position: sticky; /* 页面滚动时可以让标题短暂停留，增加交互质感 */
    top: 120px;
}

.services-header .sub-title {
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: #8a889b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.services-header h2 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.services-header p {
    color: #a0a0b0;
    font-size: 1rem;
    line-height: 1.6;
}

/* 右侧卡片网格区 */
.services-grid {
    flex: 1.2; /* 稍微占多一点空间 */
    display: flex;
    flex-direction: column;
    gap: 30px; /* 卡片与卡片之间的上下间距 */
}

/* 单个业务卡片 */
.service-card {
    background-color: #24222e; /* 卡片背景色比大背景略亮，形成层次感 */
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease; /* 过渡动画 */
    position: relative;
    overflow: hidden;
}

/* 鼠标悬停卡片时的轻微上浮和边框亮起特效 */
.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    background-color: #2b2938;
}

.card-number {
    font-size: 0.9rem;
    color: #8a889b;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.service-card h3 {
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.service-card p {
    color: #9c9cb0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}


/* =========================================
   5. 图片加框样式 (Photo Border Style)
========================================= */

.image-showcase{
    display: flex;
    justify-content: auto;
    margin: 0 100px;
    padding: 60px 20px;
    background-color: #1a1921; /* 保持暗黑高级感背景 */
    gap: 35px;
}

.styled-image2 {
max-width: 100%;
    width: 400px; /* 控制图片最大宽度 */
    height: auto;
    
    /* 核心加框代码 */
    border: 2px solid rgba(255, 255, 255, 0.15); /* 细致的半透明高级白边框 */
    border-radius: 12px;                          /* 微微的圆角，避免生硬的直角 */
    
    /* 进阶：加上一层淡淡的阴影，让照片像浮在页面上一样 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);  
    
    /* 加上一个平滑的悬停特效 */
    transition: all 0.4s ease;
}

/* 鼠标悬停时边框微微变亮 */
.styled-image2:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px); /* 悬停时微微上浮 */
}

/* =========================================
   7. 散开动画板块 (Services Section)
========================================= */
.services-section {
    background-color: #1a1921; /* 保持与网站一致的暗黑底色 */
    min-height: 100vh; /* 占满一屏高度，让动画有足够的展示空间 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 防止卡片飞出屏幕时产生滚动条 */
    padding-top: 0;
}

.services-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 中心发光球体 --- */
.center-core {
    position: relative;
    width: 130px;
    height: 130px;
    background-color: #222029;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e0d0b0;
    font-weight: bold;
    font-size: 1.1rem;
    z-index: 10;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* 中心球体外围的一直旋转的虚线环 */
.core-ring {
    position: absolute;
    top: -15px; left: -15px; right: -15px; bottom: -15px;
    border: 2px dashed #6a687b;
    border-radius: 50%;
    animation: spinRing 12s linear infinite; /* 无限匀速旋转 */
}

@keyframes spinRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 四个卡片的基础样式 --- */
.service-block {
    position: absolute;
    width: 240px;
    background: rgba(34, 32, 41, 0.8);
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #353340;
    text-align: center;
    z-index: 5;
    
    /* 重点：初始状态全部缩小并隐藏在中心 */
    opacity: 0;
    transform: translate(0, 0) scale(0.2); 
    
    /* 贝塞尔曲线让散开的动作有“弹簧”一样的物理质感 */
    transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.service-block h3 {
    color: white;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.service-block p {
    color: #a0a0b0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.service-block span {
    color: #e4e173b8;
}

/* ================= 触发后的散开状态 ================= */
/* 当 JS 给 section 加上 class="active" 时，执行以下散开动作 */

.services-section.active .card-tl {
    opacity: 1;
    transform: translate(-300px, -200px) scale(1);
    transition-delay: 0.1s; /* 依次飞出，更有层次感 */
}

.services-section.active .card-tr {
    opacity: 1;
    transform: translate(300px, -200px) scale(1);
    transition-delay: 0.2s;
}

.services-section.active .card-bl {
    opacity: 1;
    transform: translate(-300px, 200px) scale(1);
    transition-delay: 0.3s;
}

.services-section.active .card-br {
    opacity: 1;
    transform: translate(300px, 200px) scale(1);
    transition-delay: 0.4s;
}

.section-divider{
    color: #e0d0b0;
    height: 3px;
    border: none;
    background: linear-gradient(to right, transparent, #87aee1, transparent);
    margin:0; 
    width: auto;
    
}

.more-info{
    display: flex;             /* 开启弹性盒子 */
    justify-content: center;   /* 核心魔法：控制里面的元素水平居中 */
    width: 100%;               /* 确保盒子本身占满整行宽度 */
    padding-top: 0px;       /* 专门把上面的内边距缩到最小（你可以填 10px 或者 0px） */
    padding-bottom: 50px;   /* 保持底部的距离不变，让它不要和下面的页脚粘在一起 */
    margin-top: -100px;
}

.button-size{
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 使用现代无衬线字体 */
    font-weight: 600;              /* 字体加粗，更有力量感 */
    font-size: 110%;               /* 刚刚的 150% 可能会太大，110%~120% 比较精致 */
    letter-spacing: 2px;           /* 💡 核心秘诀：拉开字间距，瞬间变高级！ */
    background-color: #e0d0b0 !important;
    color: #e0d0b0;
    border-radius: 10px;

    padding: 12px 40px;            /* 左右留白多一点，按钮会显得更大气 */
    border-radius: 50px;           /* 胶囊形圆角，点击欲望最强 */
    cursor: pointer;               /* 鼠标放上去变小手 */
    
    background: linear-gradient(135deg, #2a2835 0%, #1a1921 100%);
    
    /* 边框：用极细的半透明金色，模拟金属边缘的“反光” */
    border: 1px solid rgba(224, 208, 176, 0.4); 
    
    /* 阴影：内发光 + 底部厚重阴影，打造微凸起的立体按键感 */
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1), /* 顶部的微弱高光 */
        0 8px 20px rgba(0, 0, 0, 0.6);            /* 底部的悬浮阴影 */
        
    /* 动画：让后续的悬浮变化非常丝滑 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================
   4. 悬浮时的“点亮”特效 (Hover State)
========================================= */
.button-size:hover {
    color: #5742de;                /* 文字反转为深色 */
    
    /* 背景变成带光泽的耀眼香槟金 */
    background: linear-gradient(135deg, #e0d0b0 0%, #c4b087 100%);
    border: 1px solid #e0d0b0;     
    
    /* 阴影扩散，产生一种“发光”的错觉 */
    box-shadow: 
        0 10px 25px rgba(224, 208, 176, 0.3),
        0 5px 10px rgba(0, 0, 0, 0.5);
        
    /* 💡 核心秘诀：鼠标放上去时，按钮本身微微向上浮动 3 像素 */
    transform: translateY(-3px);

}


/* ==========================================================
   📱 首页响应式适配 (移动端 / 屏幕缩小自动调节)
========================================================== */

/* 当屏幕宽度小于等于 1024px 时（例如平板或较小的笔记本） */
@media screen and (max-width: 1024px) {
    .services-wrapper {
        transform: scale(0.85); /* 稍微整体缩小核心科技感圆盘，防止撑破屏幕 */
    }
}

/* 当屏幕宽度小于等于 768px 时（标准的手机竖屏尺寸） */
@media screen and (max-width: 768px) {

    /* 强制手机端首页首屏高度占满 */
    .hero-section {
        height: 100vh !important;
        width: 100vw !important;
    }

    /* 1. 顶部大标语（Hero Section）自适应 */
    .hero-content h1 {
        font-size: 2.2rem !important; /* 缩小主标题，防止手机上一行放不下 */
        letter-spacing: 2px;
    }
    
    .hero-content p {
        font-size: 1rem !important;
    }

    /* 2. 第一个业务板块（左侧标题，右侧 3 个数字卡片）自适应 */
    .services-container {
        flex-direction: column !important; /* 左右布局改为上下单列布局 */
        gap: 30px;
        padding: 0 15px;
    }

    .services-header {
        text-align: center !important; 
        
        /* 👇 核心修复：关掉手机端的吸顶悬浮，让它变回正常的上下排版 */
        position: relative !important; 
        top: auto !important; 
        margin-bottom: 30px !important; /* 强行在标题和卡片之间拉开 30px 的距离 */
    }

    .services-grid {
        width: 100% !important;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .service-card {
        width: 90% !important; /* 让业务卡片在手机上舒适地撑开 */
    }

    /* 3. 第二个板块：“我们的核心”旋转圆盘与 4 个发散卡片自适应
       * 手机屏幕太小，原本的“四散发散动画”容易乱，
       * 所以在手机端我们将它优雅地变成“纵向整齐排列的卡片流”。 */
    .services-section {
        min-height: auto !important;
        padding: 50px 0;
    }


/* 专门为手机端“变”出一个文字标题，替代被隐藏的圆盘 */
    .services-wrapper::before {
        content: "- 我们拥有 -";   /* 这里就是自动生成的标题文字 */
        display: block;
        width: 100%;
        text-align: center;
        color: #e0d0b0;           /* 使用你原本的高级香槟金配色 */
        font-size: 1.8rem;        /* 字体大小 */
        font-weight: 300;
        letter-spacing: 4px;      /* 拉开字间距，增加高级感 */
        margin-bottom: 35px;      /* 和下方第一个卡片拉开距离 */
    }

    .services-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
        transform: none !important; /* 取消电脑端的缩放 */
    }

    /* 隐藏中心那个大转盘（手机端屏幕太小，转盘会挡住文字） */
    .center-core {
        display: none !important; 
    }

    /* 将原本四散定位的 4 个卡片还原为普通的手机流式卡片 */
    .service-block {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important; /* 取消电脑端的位移错开效果 */
        
        width: 85% !important;
        max-width: 350px;
        background-color: #24232c;
        border: 1px solid rgba(229, 223, 130, 0.3);
        border-radius: 15px;
        padding: 25px;
        opacity: 1 !important;     /* 手机端直接默认显示，不需要等滚动雷达触发 */
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    }
    
    /* 修复“了解更多”按钮被卡片遮挡的问题 */
    .more-info {
        margin-top: 30px !important; /* 取消原本的 -100px，改为正数的 30px，让它乖乖待在卡片下方 */
        padding-bottom: 40px !important; 
    }
}