/* ================================================================
   1. 全局基础与入场动画
   ================================================================ */ 
.home-section-spacer { margin: 100px 0; position: relative; } 
.home-section-spacer::before { 
    content: ""; display: block; width: 40px; height: 1px; background: #ddd; margin: 0 auto 100px; 
} 

.reveal-on-scroll { 
    opacity: 0; transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
} 
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } 

/* ================================================================
   1. 导航栏全屏化重构 (彻底解决 LOGO 菜单挤在中间的问题)
   ================================================================ */

/* 强制 Header 容器内部的直接子元素（通常是主题的 container）铺满全屏 */
.site-header > div, 
.site-header .container, 
.site-header .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 强制两端对齐 */
    width: 100% !important;
    max-width: 90% !important; /* 左右保留 3% 的呼吸感 */
    margin: 0 auto !important;
    background: none !important;
}

/* 确保父级容器本身也是 flex 且全宽 */
.site-header {
    position: fixed !important;
    top: 0; left: 0; width: 100% !important;
    z-index: 9999;
    height: 90px;
    display: flex !important;
    align-items: center !important;
    transition: all 0.4s ease;
    background: transparent;
}

/* 2. LOGO 强制靠左 */
.site-header .logo {
    margin-right: auto !important; /* 万能公式：推开右侧所有元素 */
    z-index: 10;
}

.site-header .logo img {
    height: 45px;
    width: auto;
    transition: 0.3s;
}

/* 3. 菜单强制靠右且移除手机端干扰 */
.main-navigation {
    margin-left: auto !important; /* 万能公式：强制推向最右侧 */
    display: block !important;
}

.nav-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px; /* 菜单项之间的间距 */
}

/* 彻底隐藏手机端按钮占用位置 */
@media (min-width: 992px) {
    .menu-toggle { display: none !important; visibility: hidden; }
}

/* ================================================================
   2. 菜单悬停效果：区域高亮 + 文字突出显示
   ================================================================ */

.nav-list li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500; /* 保持基础粗细不变 */
    padding: 10px 22px;
    border-radius: 8px;
    display: block;
    position: relative;
    /* 核心：统一所有属性的过渡曲线和时间 */
    transition: 
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 预防：防止文字渲染时的细微位移 */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 悬停状态 */
.nav-list li a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff !important;
    transform: translateY(-2px);
    
    /* 【核心黑科技】不用 font-weight，改用微小文字阴影模拟加粗 */
    /* 这样做文字宽度不会变，且阴影的消失是带动画的，不会脱节 */
    text-shadow: 0.5px 0 0 #fff, -0.2px 0 0 #fff; 
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 滚动后 header 变白时的适配 */
.site-header.scrolled .nav-list li a:hover {
    background: #007bff; 
    color: #fff !important;
    /* 此时阴影颜色也要跟着变 */
    text-shadow: 0.5px 0 0 #fff, -0.2px 0 0 #fff;
}

/* ================================================================
   额外优化：解决菜单左右抖动
   ================================================================ */
.nav-list li {
    /* 为文字预留一点点固定空间，确保变粗感时不会推挤邻居 */
    display: flex;
    justify-content: center;
    min-width: 80px; 
}

.site-header.scrolled .nav-list li a {
    color: #333;
}

.site-header.scrolled .nav-list li a:hover {
    background: #007bff; /* 滚动后高亮变为品牌蓝 */
    color: #fff !important;
}

.site-header.scrolled .logo img {
    height: 38px;
}

/* ================================================================
   LOGO 样式（确保不被挤压）
   ================================================================ */ 
.site-logo {
    display: flex;
    align-items: center;
}

.site-logo img {
    max-height: 50px; /* 限制LOGO高度 */
    width: auto;
}

/* ================================================================
   Hero Slider video视觉修正版 (彻底解决黑屏)
   ================================================================ */ 
/* 1. 容器与基础高度：确保父级不坍塌 */
.hero-slider, 
.hero-slider .swiper-wrapper, 
.hero-slider .swiper-slide { 
    width: 100%; 
    height: 100vh !important; 
}

/* 2. Slide 基础定义：不要在 Slide 上写 z-index，让 Swiper 管理 */
.swiper-slide {
    position: relative;
    overflow: hidden;
    background-color: #000;
}

/* 3. 图片页：移除强制 z-index，确保背景图可见 */
.image-slide { 
    display: block !important;
    opacity: 1; 
    visibility: visible !important;
    background-repeat: no-repeat !important; 
    background-size: cover !important; 
    background-position: center !important; 
} 

/* 4. [核心关键]：只有在 Active 状态下才提升层级，且图片层级必须能覆盖视频 */
.hero-slider .swiper-slide-active {
    z-index: 100 !important; /* 激活页必须是 100 */
    opacity: 1 !important;
}

/* 5. 遮罩层：放在背景图上方 (z-index: 2)，文字下方 */
.hero-overlay { 
    position: absolute; inset: 0; 
    background: rgba(0, 0, 0, 0.45); 
    z-index: 5; 
}

/* 6. 内容层级：必须最高 (z-index: 10) */
.hero-content {
    position: absolute; left: 0; right: 0; bottom: 20%; 
    z-index: 10; text-align: center; color: #fff;
    opacity: 0; transform: translateY(30px);
    transition: all 0.8s ease;
}

.swiper-slide-active .hero-content {
    opacity: 1; transform: translateY(0);
}

/* 7. 导航控件：绝对顶层 */
.hero-slider .swiper-button-next, 
.hero-slider .swiper-button-prev,
.hero-slider .swiper-pagination { 
    z-index: 150 !important; 
}

  /*找回视频页左侧文字 (hero-side-info)
   ================================================================ */ 
.hero-side-info {
    position: absolute;
    bottom: 15%;
    left: 8%; /* 距离左侧 8% */
    transform: translateY(-50%);
    z-index: 20 !important; /* 必须高于视频(1)和遮罩(5) */
    color: #fff;
    text-align: left;
    pointer-events: none; /* 防止遮挡按钮点击 */
}

.side-top-text {
    font-size: 80px;
    letter-spacing: 6px;
    line-height: 1.1;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateX(-30px);
    animation: sideFadeIn 1s 0.3s forwards; /* 延迟半秒入场 */
}

.side-bottom-text {
    font-size: 24px; /* 设置大字号 */
    letter-spacing: 15px; /* 让中文排版更张开 */
    text-indent: 5px;     /* 微调对齐偏移 */
    opacity: 0.8;         /* 稍微降低亮度，突出上方大字 */
    opacity: 0;
    transform: translateX(-30px);
    animation: sideFadeIn 1s 0.8s forwards; /* 延时更久入场 */
}

/* 文字入场动画 */
@keyframes sideFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ================================================================
   Hero 轮播图片上的文字与按钮优化
   ================================================================ */ 

/* 1. 调整标题文字大小（H1） */
.hero-content h1 {
    font-size: 68px;          /* 显著放大标题 */
    font-weight: 600;
    letter-spacing: 4px;      /* 增加字间距，更有质感 */
    margin-bottom: 45px;      /* 增加标题与下方按钮的间距 */
    text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* 增加阴影，确保在浅色图片上也可清 */
}

/* 2. 调整按钮组布局（解决靠得太近的问题） */
.hero-btn-group {
    display: flex;
    justify-content: center;  /* 居中对齐 */
    gap: 40px;                /* 【关键】设置两个按钮之间的间距为 40px */
}

/* 3. 微调按钮样式，使其在大标题下更协调 */
.hero-content .read-more-btn {
    padding: 14px 45px;       /* 稍微加大按钮的点击区域 */
    font-size: 16px;          /* 按钮文字稍微调大一点 */
    border: 1px solid rgba(255,255,255,0.8); /* 加粗边框 */
    background: rgba(0,0,0,0.1); /* 增加极淡背景，提高辨识度 */
    backdrop-filter: blur(4px);  /* 按钮毛玻璃化，显高端 */
}

/* ================================================================
   3. 全局滚动平滑修正
   ================================================================ */ 
.reveal-on-scroll {
    opacity: 0; transform: translateY(35px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity; /* 硬件加速 */
}
.reveal-on-scroll.is-visible {
    opacity: 1; transform: translateY(0);
}

/* ================================================================
   3. 公司简介模块 (保持原样优化)
   ================================================================ */ 
.company-intro-section { width: 100%; overflow: hidden; margin-top: 50px;} 
.intro-flex-wrapper { display: flex; width: 100%; min-height: 650px; } 
.intro-image-box { flex: 1.1; overflow: hidden; } 
.intro-image-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; } 
.intro-content-box { flex: 1; color: #fff; display: flex; align-items: center; padding: 60px 8%; background-color: #1a1a1a; } 
.stats-grid { display: flex; gap: 40px; margin: 40px 0; } 
.stat-item .number { font-size: 32px; font-weight: bold; color: #fff; display: block; } 

.read-more-btn { 
    display: inline-block; padding: 12px 35px; border: 1px solid rgba(255,255,255,0.3); 
    color: #fff; text-decoration: none; transition: 0.3s; border-radius: 4px; 
} 
.read-more-btn:hover { background: #fff; color: #000; } 

/* ================================================================
   4. 第三区域：轮盘交互 (解决过渡抖动)
   ================================================================ */ 
.service-wheel-section { margin: 100px 0; background: #f9f9f9; padding: 80px 0; } 
.wheel-container { 
    position: relative; min-height: 550px; background-color: #fff; 
    transition: background-color 0.5s ease-out; width: 100%; overflow: hidden; 
} 

/* 背景类 */ 
.bg-1 { background-color: #FFF9C4 !important; } 
.bg-2 { background-color: #BBDEFB !important; } 
.bg-3 { background-color: #C8E6C9 !important; } 
.bg-4 { background-color: #FFE0B2 !important; } 

.wheel-big-circle { 
    position: absolute; top: 50%; left: 0; transform: translateY(-50%); 
    width: 500px; height: 500px; border-radius: 50%; 
    background-size: cover; background-position: center; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); z-index: 5; 
} 
.wheel-circle-text { 
    position: absolute; top: 50%; left: 250px; transform: translate(-50%, -50%); 
    color: #fff; font-size: 28px; letter-spacing: 4px; z-index: 6; 
    background: rgba(0,0,0,0.3); padding: 12px 24px; border-radius: 40px; backdrop-filter: blur(8px); 
} 

.legend-item { 
    position: absolute; width: 85px; height: 85px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 14px; font-weight: 600; cursor: pointer; 
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); z-index: 20; 
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s; 
} 

/* 弧形分布 */
.legend-1 { top: 15%; left: 30%; background: #FFF9C4; } 
.legend-2 { top: 35%; left: 37%; background: #BBDEFB; } 
.legend-3 { top: 58%; left: 35%; background: #C8E6C9; } 
.legend-4 { top: 78%; left: 28%; background: #FFE0B2; } 

.legend-item.fade-out { transform: scale(15); opacity: 0; pointer-events: none; } 

.wheel-content { 
    position: absolute; top: 50%; right: 10%; transform: translateY(-50%); 
    width: 35%; z-index: 30; 
} 
.content-detail { display: none; animation: fadeIn 0.5s ease-out; } 
@keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* ================================================================
   5. 响应式补丁
   ================================================================ */ 
@media (max-width: 992px) { 
    .hero-content h1 { font-size: 48px; }
    .hero-btn-group { gap: 20px; }
    .intro-flex-wrapper { flex-direction: column; } 
    .wheel-big-circle { width: 380px; height: 380px; } 
    .wheel-content { width: 45%; right: 5%; }
    .legend-item { width: 70px; height: 70px; font-size: 12px; }
    .side-bottom-text { font-size: 60px; }
    .side-top-text { font-size: 18px; }
} 

@media (min-width: 992px) {
    .menu-toggle {
        display: none !important;
    }
}

@media (max-width: 768px) { 
    .hero-content h1 { font-size: 32px; margin-bottom: 30px;}
    .hero-btn-group { flex-direction: column; /* 手机端按钮上下排列 */align-items: center;gap: 15px; }
    .hero-content .read-more-btn {width: 80%; /* 手机端按钮撑满一点 */padding: 12px 0;}
    .hero-side-info {bottom: 20%; /* 移动端位置稍微上抬，避免被导航圆点遮挡 */left: 5%;}
    .side-top-text {font-size: 42px;letter-spacing: 4px;}
    .side-bottom-text {font-size: 14px;letter-spacing: 6px; }
    .wheel-big-circle { display: none; } /* 移动端可隐藏大圆改用列表 */
    .wheel-content { position: relative; width: 90%; right: auto; margin: 0 auto; top: 0; transform: none; }
    .legend-item { position: relative; display: inline-flex; top: auto !important; left: auto !important; margin: 5px; }
}