/* 智域奇点官网 - 首页专用样式 */

/* 从右往左渐显（与右侧三角光雾方向一致），从模糊到清晰 */
@keyframes slideInFromRightBlur {
    0% {
        transform: translateX(100px);
        opacity: 0;
        filter: blur(10px);
    }
    50% {
        transform: translateX(20px);
        opacity: 0.6;
        filter: blur(3px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}



/* 标题动画类 */
.title-slide-in {
    animation: slideInFromRightBlur 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0s; /* 立即开始，与右侧三角形同时出现 */
    opacity: 0;
    transform: translateX(100px);
    filter: blur(10px);
    will-change: transform, opacity, filter; /* GPU加速 */
    backface-visibility: hidden; /* 优化性能 */
    /* 确保动画完成后保持最终状态 */
    animation-fill-mode: forwards;
}





/* 介绍文本动画类 */
.intro-slide-in {
    animation: slideInFromRightBlur 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 1.2s; /* 等主标题动画(0s+1s)完成后开始 */
    opacity: 0;
    transform: translateX(100px);
    filter: blur(10px);
    will-change: transform, opacity, filter; /* GPU加速 */
    backface-visibility: hidden; /* 优化性能 */
    /* 确保动画完成后保持最终状态 */
    animation-fill-mode: forwards;
}

/* 介绍副标题动画类 */
.intro-subtitle-slide-in {
    animation: slideInFromRightBlur 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 1.0s; /* 等介绍文本(1.2s+0.3s)结束后再开始，提升1秒 */
    opacity: 0;
    transform: translateX(100px);
    filter: blur(10px);
    will-change: transform, opacity, filter; /* GPU加速 */
    backface-visibility: hidden; /* 优化性能 */
    /* 确保动画完成后保持最终状态 */
    animation-fill-mode: forwards;
}

/* ===== 主标题和副标题统一缩放系统 ===== */
/* 确保主标题和副标题在所有屏幕尺寸下保持协调的比例关系 */

/* 基础比例：副标题字体大小 = 主标题字体大小 × 0.1 (10%) */
.main-title {
	font-size: clamp(63px, 9vw, 165px);
	font-weight: 700;
	font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', 'Roboto', 'Noto Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	line-height: 1.1;
	margin-bottom: 0;
	/* 向左移动50% - 使用transform确保在所有屏幕尺寸下都保持相对位置 */
	margin-left: 0;
	transform: translateX(-50%);
	margin-top: 0;
	letter-spacing: -0.01em;
	position: relative;
	/* 从左到右渐变亮度效果：左边较暗，右边更亮，"奇点"更加明亮 */
	background: linear-gradient(
		to right,
		#333333 0%,           /* 左侧"智"字 - 深灰色 */
		#555555 20%,          /* "域"字开始 - 中灰色 */
		#999999 40%,          /* "域"字结束/"奇"字开始 - 明显调亮 */
		#cccccc 60%,          /* "奇"字中部 - 大幅调亮 */
		#f0f0f0 80%,          /* "点"字开始 - 极亮灰色 */
		#FFFFFF 100%          /* "点"字结束 - 最亮的纯白色 */
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/* 增强阴影对比度，确保渐变效果更加突出 */
	filter: drop-shadow(0 3px 8px rgba(0,0,0,0.9)) 
	        drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* 副标题基础字体大小 - 与主标题保持10%的比例关系 */
.hero-subline .subline-link {
	/* 玻璃样式下的字体样式：白色、清晰 */
	font-size: clamp(6.3px, 0.9vw, 16.5px); /* 主标题的10%：63px*0.1=6.3px, 9vw*0.1=0.9vw, 165px*0.1=16.5px */
	font-weight: 500; /* 改为中等粗细的字重 */
	text-decoration: none;
	display: inline-block;
	/* 移除原有的margin，因为已经移到容器上 */
	margin: 0;
	position: relative;
	/* 透明玻璃上使用更亮的灰色文字 */
	color: rgba(200, 200, 200, 0.95);
	/* 添加微妙的文字阴影增强可读性 */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	/* 确保文字在玻璃背景上清晰可见 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 移动设备动画优化 */
@media (max-width: 768px) {
    @keyframes slideInFromRightBlurMobile {
        0% {
            transform: translateX(50px);
            opacity: 0;
            filter: blur(8px);
        }
        50% {
            transform: translateX(10px);
            opacity: 0.7;
            filter: blur(2px);
        }
        100% {
            transform: translateX(0);
            opacity: 1;
            filter: blur(0);
        }
    }
    
    .title-slide-in {
        animation: slideInFromRightBlurMobile 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-delay: 0s; /* 立即开始，与右侧三角形同时出现 */
        /* 确保动画完成后保持最终状态 */
        animation-fill-mode: forwards;
    }
    

    
    .intro-slide-in {
        animation: slideInFromRightBlurMobile 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-delay: 1.2s; /* 等主标题动画(0s+1s)完成后开始 */
        /* 确保动画完成后保持最终状态 */
        animation-fill-mode: forwards;
    }
    
    .intro-subtitle-slide-in {
        animation: slideInFromRightBlurMobile 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation-delay: 1.0s; /* 等介绍文本(1.2s+0.3s)结束后再开始，提升1秒 */
        /* 确保动画完成后保持最终状态 */
        animation-fill-mode: forwards;
    }
}

/* 减少动画的用户偏好设置支持 */
@media (prefers-reduced-motion: reduce) {
    .title-slide-in,
    .intro-slide-in,
    .intro-subtitle-slide-in {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
    

}

/* 智域奇点首页样式 - 基于Figma设计 - 优化版 */

/* 基础重置 */
body {
    padding-top: 70px; /* 为固定导航栏留出空间 */
}

/* 成果量化展示区域 - 全屏英雄区域 */
.achievements-section.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    margin-top: -80px; /* 抵消body的padding-top，让hero区域延伸到导航栏下方 */
    padding-top: 80px; /* 确保内容不被导航栏遮挡 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 改为垂直居中内容 */
    text-align: left; /* 改为左对齐，让主标题和副标题都左对齐 */
    overflow: hidden;
    background: linear-gradient(to right, #000000 0%, #0a0a0a 50%, #000000 100%);
}

/* 左侧内容区域 */

.hero-left-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 5%;
	padding-right: 5%;
	position: relative;
	z-index: 3;
	text-align: left;
	/* 整体向左移动40%，让主副标题能够实现真正的左移效果 */
	transform: translateX(-40%);
}

/* 右侧隧道动画容器 - 优化定位消除分界线 */
.hero-right-tunnel {
    position: absolute;
    top: 0;
    right: -30%; /* 向右移动30% */
    width: 130%; /* 增加宽度以补偿移动 */
    height: 100%;
    z-index: 1;
    overflow: hidden;
    /* 添加渐变遮罩消除左侧分界线 */
    mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);
}

/* 隧道特效Canvas样式 */
.hero-right-tunnel #tunnel-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* 移除混合模式，让隧道特效更清晰 */
    /* 调整Canvas位置以配合容器移动 */
    transform: translateX(23%); /* 向右移动23%以配合容器移动 */
}

/* 隧道特效响应式样式 */

/* 右侧光雾效果已移除 */



/* 数据展示区域 - 移到专业服务简介区域上方 */
.achievements-display-section {
    padding: 60px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
    position: relative;
    z-index: 3;
    margin-top: 0px;
}

/* 底部数据展示区域 - 已移除 */
.achievements-bottom {
    display: none;
}

/* achievements-header 容器已移除，相关样式已清理 */

/* 标题联动光源亮度：靠近右侧更亮，越左越暗 */
:root{
	--light-center-x: 90%;
	--light-center-y: 48%;
}



.achievements-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    justify-content: center;
    gap: clamp(16px, 6vw, 120px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 大屏优化：加宽第4项，使"AI落地全周期支持"一行显示 */
@media (min-width: 1200px) {
    .achievements-grid {
        grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr;
    }
    .achievements-grid .achievement-item:nth-child(4) .label {
        white-space: nowrap;
    }
}

.achievement-item {
    text-align: center;
    width: 100%;
    height: auto;
    padding: clamp(10px, 2.2vw, 20px) clamp(8px, 1.8vw, 15px);
    background: transparent;
    border: none;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.achievement-item:hover {
    transform: translateY(-5px);
}

.achievement-item .number {
    font-size: clamp(20px, 3.2vw, 38px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: clamp(6px, 1.2vw, 12px);
    font-family: 'Viga', sans-serif;
}

.achievement-item .label {
    font-size: clamp(12px, 1.6vw, 16px);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* 移除原有的视频相关样式 */
.hero-video,
.hero-overlay {
    display: none;
}

/* 响应式设计调整 */
@media (max-width: 1200px) {
    .hero-left-content {
        padding-left: 4%;
        padding-right: 4%;
        transform: translateX(-40%);
    }
    
    .hero-right-tunnel {
        right: -25%; /* 中等屏幕，稍微减少移动距离 */
        width: 125%;
    }
}

@media (max-width: 968px) {
    .achievements-section.hero-section {
        flex-direction: column;
        text-align: left; /* 改为左对齐，与主标题和副标题保持一致 */
    }
    
    .hero-left-content {
        align-items: flex-start; /* 保持左对齐 */
        padding: 0 5%;
        text-align: left;       /* 保持左对齐 */
        margin-bottom: 40px;
        transform: translateX(-40%) translateY(15px);
    }
    
    .hero-right-tunnel {
        position: absolute; /* 保持绝对定位 */
        width: 120%;
        height: 100%; /* 保持全屏高度 */
        top: 0;
        right: -20%; /* 向右移动20% */
    }
    
    /* 隧道特效响应式样式 */
    
    .achievements-display-section {
        order: 3;
    }
    
    .main-title { 
        /* 保持左对齐，与基础样式一致 */
        margin-left: 0;
        transform: translateX(-40%); /* 向左移动50% */
        margin-top: 0;
        /* 中等屏幕保持渐变亮度效果，"奇点"更加明亮 */
        background: linear-gradient(
            to right,
            #333333 0%,           /* 左侧"智"字 - 深灰色 */
            #555555 20%,          /* "域"字开始 - 中灰色 */
            #999999 40%,          /* "域"字结束/"奇"字开始 - 明显调亮 */
            #cccccc 60%,          /* "奇"字中部 - 大幅调亮 */
            #f0f0f0 80%,          /* "点"字开始 - 极亮灰色 */
            #FFFFFF 100%          /* "点"字结束 - 最亮的纯白色 */
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); 
    }
    

    /* 968px断点副标题缩放 - 调整缩放和位置 */
    .hero-subline { 
        transform: translateX(-43%) scale(0.70); /* 向左移动43%并缩放，向右移动5% */
    }
    .hero-subline .subline-link { font-size: clamp(6.3px, 0.9vw, 16.5px); } /* 保持与主标题10%的比例关系 */
}

@media (max-width: 768px) {
    .achievements-section.hero-section {
        min-height: 500px;
    }
    
    .hero-left-content { padding: 0 4%; margin-bottom: 30px; transform: translateX(-40%) translateY(12px); align-items: flex-start; text-align: left; }
    
    .hero-right-tunnel {
        position: absolute; /* 保持绝对定位 */
        width: 120%;
        height: 100%; /* 保持全屏高度 */
        top: 0;
        right: -20%; /* 向右移动20% */
    }
    
    /* 隧道特效响应式样式 */
    
    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .achievement-item:nth-child(4),
    .achievement-item:nth-child(5) {
        display: none;
    }
    
    /* 768px断点副标题缩放 - 调整缩放和位置 */
    .hero-subline { 
        transform: translateX(-40%) scale(0.55); /* 向左移动40%并缩放，向右移动5% */
    }
    
    .hero-subline .subline-link { font-size: clamp(6.3px, 0.9vw, 16.5px); } /* 保持与主标题10%的比例关系 */
}

@media (max-width: 480px) {
    .achievements-section.hero-section {
        min-height: 450px;
    }
    
    .hero-left-content { padding: 0 3%; margin-bottom: 25px; transform: translateX(-40%) translateY(10px); }
    
    .hero-right-tunnel {
        width: 115%;
        height: 100%;
        right: -15%; /* 向右移动15% */
    }
    
    /* 隧道特效响应式样式 */
    
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .achievement-item:nth-child(3) {
        display: none;
    }
    
    .main-title { 
        font-size: clamp(32px, 9vw, 40px); /* 保持与副标题10%的比例关系 */
        margin-left: 0; /* 左对齐显示 */
        transform: translateX(-40%); /* 向左移动50% */
        margin-top: 0; /* 与三角形顶点对齐 */
        /* 小屏幕保持渐变亮度效果，"奇点"更加明亮 */
        background: linear-gradient(
            to right,
            #333333 0%,           /* 左侧"智"字 - 深灰色 */
            #555555 20%,          /* "域"字开始 - 中灰色 */
            #999999 40%,          /* "域"字结束/"奇"字开始 - 明显调亮 */
            #cccccc 60%,          /* "奇"字中部 - 大幅调亮 */
            #f0f0f0 80%,          /* "点"字开始 - 极亮灰色 */
            #FFFFFF 100%          /* "点"字结束 - 最亮的纯白色 */
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); 
    }
    

    /* 480px断点副标题缩放 - 调整缩放和位置 */
    .hero-subline { 
        transform: translateX(-37%) scale(0.45); /* 向左移动37%并缩放，向右移动5% */
    }
    
    .hero-subline .subline-link { font-size: clamp(6.3px, 0.9vw, 16.5px); } /* 保持与主标题10%的比例关系 */
}

/* 专业服务简介 */
.intro-section {
    background: var(--bg-dark);
    padding: 50px 20px;
    text-align: center;
}

/* 确保"专业的AI解决方案提供商"标题在星空画布之上 */
.intro-section .section-header,
.intro-section .section-title {
    position: relative;
    z-index: 3;
}
/* 仅在专业服务简介区，将星空画布置于内容下方，避免遮挡标题 */
.intro-section .global-particle-canvas {
    z-index: 0 !important;
}

.intro-section .section-title {
    font-size: 44px;
    font-weight: 700;
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    background-clip: unset !important;
    margin-bottom: 40px;
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
}

.intro-section .section-description {
    font-size: 20px;
    color: var(--text-gray);
    line-height: 1.8;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    word-break: keep-all;
    white-space: normal;
}

/* 核心业务划分 */
.business-services-section {
    /* 缩小与下方理念区块的间距：减少底部内边距 */
    padding: 110px 0 72px;
    position: relative;
    overflow: hidden;
}



.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
}

/* 为grid添加微妙的连接线效果 */
.business-services-section.global-particle-section .services-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, 
        rgba(59, 90, 244, 0.03) 0%, 
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.service-card {
    /* 卡片容器样式，支持翻转效果 */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 20px;
    padding: 0;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: visible;
    /* 保持卡片始终为正方形（含内边距与边框） */
    aspect-ratio: 1 / 1;
    /* GPU加速和3D优化 */
    perspective: 1000px;
    will-change: transform;
    transform: translateZ(0);
    /* 确保没有任何背景色或边框 */
    box-shadow: none !important;
}

/* 卡片内部容器 - 实现翻转效果 */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    min-height: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    /* 确保3D变换不会产生视觉伪影 */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* 鼠标悬停时翻转卡片 */
.service-card:hover .card-inner {
    transform: rotateY(180deg) translateZ(0);
}

/* 确保所有卡片相关元素都没有边框和背景 */
.service-card *,
.service-card *::before,
.service-card *::after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 卡片正面和背面的共同样式 */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.06) 0%, 
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px;
    padding: 40px 42px;
    text-align: center;
    backdrop-filter: blur(25px) saturate(200%) brightness(1.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* 确保3D变换不会产生视觉伪影 */
    transform: translateZ(0);
}

/* 卡片正面 */
.card-front {
    z-index: 2;
    transform: rotateY(0deg) translateZ(0);
}

/* 卡片背面 */
.card-back {
    transform: rotateY(180deg) translateZ(0);
    z-index: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px;
}

/* 液态玻璃反光效果，应用到正面和背面 */
.card-front::after, .card-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 30%,
        rgba(255, 255, 255, 0.01) 70%,
        rgba(255, 255, 255, 0.005) 100%);
    border-radius: 20px;
    pointer-events: none;
    z-index: 1;
    /* 确保反光效果不会产生背景框 */
    border: none !important;
    box-shadow: none !important;
}

/* 悬停时增强效果，但不影响翻转 */
.service-card:hover .card-front,
.service-card:hover .card-back {
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(30px) saturate(220%) brightness(1.15);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@keyframes simpleJump {
    0% {
        transform: translateY(-8px) scale(1.02);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
    100% {
        transform: translateY(-8px) scale(1.02);
    }
}

/* 图标样式 - 仅应用于正面 */
.card-front .service-icon {
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 140px;
    padding-top: 10px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative;
    z-index: 3; /* 确保在反光效果之上 */
    transition: all 0.3s ease;
}

.service-card:hover .card-front .service-icon {
    transform: translateY(-2px) scale(1.05);
}

.card-front .icon-svg {
    width: 180px;
    height: 180px;
    /* 移除光圈效果，保持简洁 */
    filter: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent !important;
    position: relative;
    z-index: 3; /* 确保在反光效果之上 */
}

.service-card:hover .card-front .icon-svg {
    transform: scale(1.1);
    /* 悬停时也保持无光圈效果 */
    filter: none;
    animation: iconSimpleFloat 0.4s ease-out;
}

@keyframes iconSimpleFloat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.1);
    }
}

/* 强制覆盖所有可能的背景设置 */
.card-front .service-icon,
.card-front .service-icon *,
.card-front .icon-svg,
.card-front .icon-svg * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 正面标题样式 */
.card-front h3 {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    margin-top: -5px;
    line-height: 1.4;
    text-shadow: 0 2px 10px rgba(59, 90, 244, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3; /* 确保在反光效果之上 */
    /* 避免标题换行影响卡片整体高度 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多两行，超出省略 */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}

/* 背面标题样式 */
.card-back h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.4;
    text-shadow: 0 2px 10px rgba(59, 90, 244, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3; /* 确保在反光效果之上 */
    text-align: center;
    flex-shrink: 0;
}

/* 背面描述样式 */
.card-back p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3; /* 确保在反光效果之上 */
    margin: 0;
    flex-shrink: 0;
    display: block;
}

.service-card:hover .card-front h3,
.service-card:hover .card-back h3 {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(59, 90, 244, 0.4);
    transform: translateY(-1px);
}

.service-card:hover .card-back p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 移除额外的视觉增强效果，避免与液态玻璃效果冲突 */

/* 悬停时的::after效果已移除 */

/* borderGlow动画已移除，保持简约的液态玻璃效果 */

/* 为整个业务服务区域添加特殊样式 */
.business-services-section.global-particle-section .service-card {
    position: relative;
    isolation: isolate;
    /* 在纯黑背景上增强卡片轮廓 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* 添加微妙的内阴影，增强立体感 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* 微妙的呼吸动画 */
.service-card:not(:hover) {
    animation: subtleBreath 6s ease-in-out infinite;
}

@keyframes subtleBreath {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
}

/* 理念对话区块 */
.philosophy-section {
    background: var(--bg-dark);
    /* 缩小与上方业务区块的间距：减小上内边距并移除外边距 */
    padding: 62px 20px 54px;
    border-top: none; /* 隐藏横向细线 */
    text-align: center;
    position: relative;
    overflow: visible; /* 改为visible以显示绝对定位的特效 */
    margin-top: 0;
    z-index: 1; /* 设置基础z-index */
}



.philosophy-content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.quote-icon-left {
    width: 60px;
    height: 60px;
    background-image: url('/static/images/引号.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    display: block;
    margin: 0 auto 20px auto;
    transform: rotate(180deg);
    filter: none;
    /*filter: brightness(0) saturate(100%) invert(65%) sepia(89%) saturate(2684%) hue-rotate(162deg) brightness(102%) contrast(101%);
    */
}

.quote-icon-right {
    width: 60px;
    height: 60px;
    background-image: url('/static/images/引号.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    display: block;
    margin: 20px auto 0 auto;
    filter: none;
    /*filter: brightness(0) saturate(100%) invert(65%) sepia(89%) saturate(2684%) hue-rotate(162deg) brightness(102%) contrast(101%);
    */
}

.philosophy-text {
    font-size: 22px;
    color: var(--text-light);
    line-height: 1.8;
    font-style: normal;
    font-weight: 400;
    padding: 20px 20px;
    text-align: center;
    margin: 0;
}

/* 智能体验广场 */
.experience-section {
    background: var(--bg-dark);
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}



.search-container {
    text-align: center;
    margin: 30px 0; /* 从60px减少到30px */
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.search-box {
    position: relative;
    max-width: 800px;
    margin: 0 auto 20px;
}

.search-input {
    width: 100%;
    padding: 20px 60px 20px 30px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: var(--text-light);
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

.search-input::placeholder {
    color: var(--text-gray);
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--primary-color);
}

.search-hint {
    color: var(--accent-color);
    font-size: 16px;
    margin-top: 10px;
}

/* AI引擎可视化 */
.ai-engine-visualization {
    height: 500px;
    position: relative;
    margin: 80px 0;
}

.engine-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-core {
    position: absolute;
    z-index: 10;
}

.core-circle {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(59, 90, 244, 0.3);
}

.function-nodes {
    position: relative;
    width: 100%;
    height: 100%;
}

.node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: 
        translate(-50%, -50%) 
        rotate(var(--angle)) 
        translateY(calc(-1 * var(--radius))) 
        rotate(calc(-1 * var(--angle)));
}

.node-circle {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--accent-color);
    border-radius: 25px;
    padding: 10px 15px;
    color: var(--text-light);
    font-size: 14px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.node-circle:hover {
    background: rgba(59, 90, 244, 0.2);
    transform: scale(1.05);
}

/* Demo应用列表 */
.demo-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin: 60px 0;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.demo-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.demo-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

.demo-card h4 {
    font-size: 22px;
    color: var(--text-light);
    margin-bottom: 15px;
}

.demo-card p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

.demo-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.demo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 90, 244, 0.3);
}

.demo-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 24px;
    color: var(--accent-color);
}

.not-found-text {
    text-align: center;
    color: var(--text-gray);
    font-size: 16px;
    margin-top: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* 典型场景案例 */
.cases-section {
    background: var(--bg-dark);
    padding: 88px 22px 66px; /* 扩大10%：80px→88px, 20px→22px, 60px→66px */
    border-top: none; /* 隐藏分割线 */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 案例标签按钮 */
.case-tabs {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 6vw, 60px);
    margin-bottom: clamp(16px, 3vw, 28px);
    margin-top: clamp(8px, 2vw, 14px);
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.case-tab {
    /* 简约透明玻璃样式 */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 33px;
    padding: clamp(10px, 2vw, 17px) clamp(14px, 3vw, 28px);
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(13px, 1.8vw, 18px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: hidden;
    width: clamp(120px, 14vw, 154px);
    text-align: center;
    box-sizing: border-box;
    /* 简约阴影 */
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 移除反光效果，保持简约 */

.case-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* 典型场景：选中态与 CTA 按钮配色保持一致 */
.case-tab.active {
    background: linear-gradient(135deg, #3B5AF4 0%, #2A3F8F 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        0 8px 25px rgba(59, 90, 244, 0.4),
        0 0 20px rgba(59, 90, 244, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 案例内容容器 */
.case-content-container {
    position: relative;
    max-width: 1540px; /* 扩大10%：1400px→1540px */
    margin: 0 auto;
}

.case-content-item {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* 增加透明度，减少背景不透明度 */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px 35px 5px 35px !important;
    backdrop-filter: blur(35px) saturate(200%) brightness(1.1);
    -webkit-backdrop-filter: blur(35px) saturate(200%) brightness(1.1);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.25),
        0 5px 15px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden; /* 改为hidden以支持光效 */
    max-width: 1320px;
    margin: 0 auto;
    min-height: 420px;
    align-items: stretch;
}

.case-content-item.active {
    display: grid;
    animation: slideInUp 0.6s ease-out;
}

/* 强制所有case-content-item应用相同的底部间距 */
.case-content-item,
.case-content-item.active,
#ai-assistant,
#smart-customer,
#knowledge-manager,
#report-generator,
#content-creator {
    padding-bottom: 5px !important;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移除装饰性渐变，保持简约 */

/* 案例信息区域 */
.case-info {
    position: relative;
    z-index: 5000; /* 确保在光效之上 */
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    padding-top: 40px; /* 减少标题和内容区域的距离 */
}

/* .case-info h3 {
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF !important;
    margin: 0;
    text-align: left;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    padding: 25px 25px 0 25px;
    line-height: 1.2;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
} */

.case-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 25px;
    font-size: 31px;
    font-weight: 700;
    /* 改为纯白色标题 */
    color: #FFFFFF;
    background: none;
    /* 简化文字阴影 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: left;
    line-height: 1.2;
    z-index: 100;
    /* 去除分隔线和背景 */
    border: none;
    background-color: transparent;
}

/* 移除渐变色样式，保持纯白色 */

/* 简化悬停效果 */
.case-content-item:hover .case-title {
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
}

.case-info h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 25px;
    width: 50px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.detail-section {
    margin-bottom: 12px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.case-details {
    flex: 1;
    /* 去除外边框和背景，让文字直接展示 */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: auto;
}

.case-text-content {
    /* 移除文本框样式，直接展示文字 */
    padding: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    text-align: left;
    white-space: pre-wrap;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    /* 移除固定高度和滚动，让内容自然展示 */
    height: auto;
    overflow: visible;
    /* 移除滚动相关样式 */
    box-sizing: border-box;
    word-wrap: break-word;
    /* 增加文字间距和可读性 */
    letter-spacing: 0.3px;
}

/* 移除滚动条样式，因为不再需要滚动 */

.detail-section h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 12px;
    position: relative;
    padding-left: 18px;
    text-align: left;
}

.detail-section h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.detail-section p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 0;
    text-align: left;
}

.detail-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.detail-section li {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 22px;
    position: relative;
    text-align: left;
}

.detail-section li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: bold;
}

.detail-section li strong {
    color: var(--text-light);
    font-weight: 600;
}

/* 案例图片区域 */
.case-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%);
    border-radius: 13px; /* 扩大10%：12px→13px */
    padding: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    aspect-ratio: 16/9; /* 保持图片比例 */
    overflow: hidden;
    height: auto; /* 改为auto，让图片自适应 */
    align-self: center; /* 与文本框中心对齐 */
    max-height: 308px; /* 扩大10%：280px→308px */
}

.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: none;
    transition: all 0.3s ease;
}

.case-image:hover img {
    transform: scale(1.03);
}

.case-image:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

/* 服务流程 */
.process-section {
    background: var(--bg-dark);
    padding: 100px 20px 120px; /* 增加底部内边距，为项目成果卡片留出空间 */
    border-top: none; /* 隐藏分割线 */
    text-align: center;
    position: relative;
    overflow: visible; /* 改为visible确保所有内容都能显示 */
}

.process-timeline {
    position: relative;
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 40px 0;
    min-height: 750px; /* 进一步增加高度确保有足够空间显示所有卡片和项目成果 */
    overflow: visible; /* 确保所有卡片都能完全显示 */
    background: radial-gradient(circle at center, rgba(59, 90, 244, 0.02) 0%, transparent 70%); /* 添加微妙的背景渐变 */
    border-radius: 20px; /* 添加圆角 */
}

/* 步骤卡片：简约透明玻璃样式 */
.process-step {
    position: absolute;
    width: 200px; /* 默认宽度 */
    padding: 16px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(59, 90, 244, 0.02) 100%); /* 添加微妙的渐变背景 */
    border: 1px solid rgba(255, 255, 255, 0.18); /* 略微增加边框颜色 */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 使用更平滑的缓动函数 */
    z-index: 5; /* 提高z-index确保卡片在最上层 */
    backdrop-filter: blur(15px) saturate(180%); /* 增强背景模糊效果 */
    animation: none; /* 初始无动画，等待滚动触发 */
    opacity: 0; /* 初始隐藏 */
    will-change: transform, opacity, filter; /* 优化动画性能 */
    filter: blur(1px); /* 初始模糊 */
    transform: translateX(-100px) scale(0.8); /* 初始位置：左侧隐藏 */
}

/* ===== 流程卡片鼠标触碰样式（与 Demo 卡片一致） ===== */
.process-step:hover {
    transform: translateY(-6px) scale(1.02) !important;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.30);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px) saturate(200%) brightness(1.1); /* 减少模糊程度，避免过度模糊 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 流程卡片悬停时的内容动画 */
.process-step:hover .step-content h4 {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

.process-step:hover .step-content p {
    transform: translateY(-1px);
    transition: transform 0.3s ease;
}

/* 项目成果卡片 hover 与 Demo 卡片一致 */
.project-results-inline .results-card:hover {
    transform: translateY(-6px) scale(1.02);
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.30);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px) saturate(200%) brightness(1.1); /* 减少模糊程度，避免过度模糊 */
}

/* 流程卡片宽度调整 */
.process-step[data-step="1"] { width: 160px; } /* 减小卡片1宽度 */
.process-step[data-step="2"] { width: 160px; } /* 减小卡片2宽度 */
.process-step[data-step="3"] { width: 160px; } /* 减小卡片3宽度 */
.process-step[data-step="4"] { width: 220px; } /* 增加卡片4宽度 */
.process-step[data-step="5"] { width: 190px; } /* 减小卡片5宽度 */
.process-step[data-step="6"] { width: 180px; } /* 减小卡片6宽度 */
.process-step[data-step="7"] { width: 160px; } /* 增加卡片7宽度 */

.process-step:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30); /* 略微增加悬停时边框颜色 */
}

.step-number { display: none !important; }

.step-content {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.step-content h4 {
    font-size: clamp(14px, 1.6vw, 18px);
    color: #fff;
    margin: 0 0 8px 0;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.step-content p {
    font-size: clamp(12px, 1.4vw, 14px);
    color: rgba(255,255,255,.85);
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 通用规则：确保所有流程元素在动画完成后保持清晰 */
.process-step,
.process-point {
    /* 确保动画完成后无模糊效果 */
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
    filter: blur(0) !important;
    -moz-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
    /* 确保动画完成后状态正确 */
    animation-fill-mode: forwards !important;
    /* 强制清除可能的内联样式影响 */
    will-change: auto !important;
}

/* 流程卡片相对于服务流程点的位置 - 根据标准图重新调整 */
/* 卡片1：沟通需求 - 左下角 */
.process-step[data-step="1"] { 
    left: 0% !important; 
    top: 520px !important; 
    transform: translate(-60px, 155px) !important; 
    position: absolute !important;
    z-index: 10 !important;
    animation-delay: 0.5s; /* 第一个卡片最先出现，延迟改为0.5s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 卡片2：确认需求 - 左中偏下 */
.process-step[data-step="2"] { 
    left: 20% !important; 
    top: 520px !important; 
    transform: translate(-50%, -72px) !important; 
    position: absolute !important;
    z-index: 10 !important;
    animation-delay: 1.0s; /* 第二个卡片延迟出现，延迟改为1.0s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 卡片3：签订合同 - 左中 */
.process-step[data-step="3"] { 
    left: 40% !important; 
    top: 520px !important; 
    transform: translate(-40px, 75px) !important; 
    position: absolute !important;
    z-index: 10 !important;
    animation-delay: 1.5s; /* 第三个卡片延迟出现，延迟改为1.5s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 卡片4：开发程序 - 中上 */
.process-step[data-step="4"] { 
    left: 60% !important; 
    top: 520px !important; 
    transform: translate(-25px, -120px) !important; 
    position: absolute !important;
    z-index: 10 !important;
    animation-delay: 2.0s; /* 第四个卡片延迟出现，延迟改为2.0s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 卡片5：演示demo - 右上 */
.process-step[data-step="5"] { 
    left: 80% !important; 
    top: 520px !important; 
    transform: translate(-535px, -495px) !important; 
    position: absolute !important;
    animation-delay: 2.5s; /* 第五个卡片延迟出现，延迟改为2.5s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 卡片6：测试程序 - 右中 */
.process-step[data-step="6"] { 
    left: 85% !important; 
    top: 520px !important; 
    transform: translate(-150px, -405px) !important; 
    position: absolute !important;
    animation-delay: 3.0s; /* 第六个卡片延迟出现，延迟改为3.0s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 卡片7：确认结项 - 右下 */
.process-step[data-step="7"] { 
    left: 100% !important; 
    top: 520px !important; 
    transform: translate(-100px, -435px) !important; 
    position: absolute !important;
    animation-delay: 3.5s; /* 第七个卡片最后出现，延迟改为3.5s */
    opacity: 0; /* 初始隐藏 */
    animation: none; /* 初始无动画 */
}

/* 流程卡片滚动触发动画类 */
.process-step.animate-in {
    animation: flyInFromLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    opacity: 1 !important; /* 确保动画完成后可见 */
    /* 强制清除模糊效果，确保动画完成后完全清晰 */
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
    filter: blur(0) !important;
    -moz-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
    /* 确保动画完成后状态正确 */
    animation-fill-mode: forwards !important;
    /* 强制清除可能的内联样式影响 */
    will-change: auto !important;
    /* 确保动画优先级最高 */
    z-index: 15 !important;
    /* 动画完成后保持手动调整的位置，不强制覆盖 */
    /* transform: translateX(0) scale(1) !important; */
}

/* Safari专用定位保护 - 防止定位跳动 */
@supports (-webkit-appearance: none) {
    .process-step {
        /* 强制使用硬件加速 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        /* 防止Safari的定位重排 */
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        /* 确保定位稳定性 */
        -webkit-will-change: transform;
        will-change: transform;
    }
    
    .process-step[data-step="1"] { 
        left: 0% !important; 
        top: 520px !important; 
        transform: translate(-60px, 155px) translateZ(0) !important; 
        width: 160px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-60px, 155px) translateZ(0) !important;
    transform: translate(-60px, 155px) translateZ(0) !important;
        transform: translate(-60px, 155px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
    
    .process-step[data-step="2"] { 
        left: 20% !important; 
        top: 520px !important; 
        transform: translate(-50%, -72px) translateZ(0) !important; 
        width: 160px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-50%, -72px) translateZ(0) !important;
    transform: translate(-50%, -72px) translateZ(0) !important;
        transform: translate(-50%, -72px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
    
    .process-step[data-step="3"] { 
        left: 40% !important; 
        top: 520px !important; 
        transform: translate(-40px, 75px) translateZ(0) !important; 
        width: 160px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-40px, 75px) translateZ(0) !important;
    transform: translate(-40px, 75px) translateZ(0) !important;
        transform: translate(-40px, 75px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
    
    .process-step[data-step="4"] { 
        left: 60% !important; 
        top: 520px !important; 
        transform: translate(-25px, -120px) translateZ(0) !important; 
        width: 220px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-25px, -120px) translateZ(0) !important;
    transform: translate(-25px, -120px) translateZ(0) !important;
        transform: translate(-25px, -120px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
    
    .process-step[data-step="5"] { 
        left: 80% !important; 
        top: 520px !important; 
        transform: translate(-535px, -495px) translateZ(0) !important; 
        width: 190px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-535px, -495px) translateZ(0) !important;
    transform: translate(-535px, -495px) translateZ(0) !important;
        transform: translate(-535px, -495px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
    
    .process-step[data-step="6"] { 
        left: 85% !important; 
        top: 520px !important; 
        transform: translate(-150px, -405px) translateZ(0) !important; 
        width: 180px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-150px, -405px) translateZ(0) !important;
    transform: translate(-150px, -405px) translateZ(0) !important;
        transform: translate(-150px, -405px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
    
    .process-step[data-step="7"] { 
        left: 100% !important; 
        top: 520px !important; 
        transform: translate(-100px, -435px) translateZ(0) !important; 
        width: 160px;
        /* Safari专用定位保护 */
        -webkit-transform: translate(-100px, -435px) translateZ(0) !important;
    transform: translate(-100px, -435px) translateZ(0) !important;
        transform: translate(-100px, -435px) translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
        perspective: 1000 !important;
    }
}

/* 流程卡片飞入动画关键帧 - 从左侧飞入，保持手动调整的位置 */
@keyframes flyInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
        filter: blur(1px);
    }
    30% {
        opacity: 0.6;
        transform: translateX(-60px) scale(0.9);
        filter: blur(0.5px);
    }
    60% {
        opacity: 0.9;
        transform: translateX(-20px) scale(0.95);
        filter: blur(0.2px);
    }
    80% {
        opacity: 0.98;
        transform: translateX(-5px) scale(0.98);
        filter: blur(0.1px);
    }
    100% {
        opacity: 1;
        /* 动画完成后回到手动调整的位置，而不是固定的translateX(0) */
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

/* 为每个流程步骤创建独立的动画，保持手动调整的位置 */
@keyframes flyInFromLeft1 {
    0% {
        opacity: 0;
        transform: translate(-160px, 155px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-60px, 155px) */
        transform: translate(-60px, 155px) scale(1);
        filter: blur(0);
    }
}

@keyframes flyInFromLeft2 {
    0% {
        opacity: 0;
        transform: translate(calc(-50% - 100px), -72px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-50%, -72px) */
        transform: translate(-50%, -72px) scale(1);
        filter: blur(0);
    }
}

@keyframes flyInFromLeft3 {
    0% {
        opacity: 0;
        transform: translate(-140px, 75px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-40px, 75px) */
        transform: translate(-40px, 75px) scale(1);
        filter: blur(0);
    }
}

@keyframes flyInFromLeft4 {
    0% {
        opacity: 0;
        transform: translate(-125px, -120px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-25px, -120px) */
        transform: translate(-25px, -120px) scale(1);
        filter: blur(0);
    }
}

@keyframes flyInFromLeft5 {
    0% {
        opacity: 0;
        transform: translate(-635px, -495px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-535px, -495px) */
        transform: translate(-535px, -495px) scale(1);
        filter: blur(0);
    }
}

@keyframes flyInFromLeft6 {
    0% {
        opacity: 0;
        transform: translate(-250px, -405px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-150px, -405px) */
        transform: translate(-150px, -405px) scale(1);
        filter: blur(0);
    }
}

@keyframes flyInFromLeft7 {
    0% {
        opacity: 0;
        transform: translate(-200px, -435px) scale(0.8);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        /* 保持手动调整的位置：translate(-100px, -435px) */
        transform: translate(-100px, -435px) scale(1);
        filter: blur(0);
    }
}

/* 流程卡片动画完成后的最终状态 - 确保完全清晰 */
.process-step.animate-in,
.process-step[style*="animation"] {
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
    filter: blur(0) !important;
    -moz-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
}

/* 流程步骤基础样式 - 强制定位保护 */
.process-step,
.process-step[data-step="1"],
.process-step[data-step="2"],
.process-step[data-step="3"],
.process-step[data-step="4"],
.process-step[data-step="5"],
.process-step[data-step="6"],
.process-step[data-step="7"] {
    position: absolute !important;
    z-index: 10 !important;
    /* 确保定位稳定性 */
    will-change: transform !important;
    /* 强制使用硬件加速 */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    /* 防止定位重排 */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    perspective: 1000 !important;
    -webkit-perspective: 1000 !important;
    /* 确保transform不被其他CSS规则覆盖 */
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    /* 禁用可能影响定位的CSS属性 */
    float: none !important;
    display: block !important;
    /* 重置所有可能干扰定位的属性 */
    margin: 0 !important;
    padding: 15px !important;
    /* 额外的Safari定位保护 */
    -webkit-transform-origin: center center !important;
    transform-origin: center center !important;
    transform-origin: center center !important;
    /* 防止Safari的定位抖动 */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* 确保定位优先级最高 */
    isolation: isolate !important;
}

/* 流程卡片初始状态 - 完全覆盖默认定位，确保手动调整位置优先 */
.process-step {
    opacity: 0;
    filter: blur(1px);
    /* 确保动画完成后状态正确 */
    animation-fill-mode: forwards;
    /* 完全覆盖默认定位，确保手动调整位置不被干扰 */
    position: absolute !important;
    z-index: 10 !important;
    /* 重置所有可能干扰定位的属性 */
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* 确保transform不被其他CSS规则覆盖 */
    transform-origin: center center !important;
    /* 禁用可能影响定位的CSS属性 */
    float: none !important;
    display: block !important;
}

/* 最终定位保护 - 确保每个流程步骤都保持正确位置 */
.process-step[data-step="1"] { 
    left: 0% !important; 
    top: 520px !important; 
    transform: translate(-60px, 155px) translateZ(0) !important; 
    width: 160px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-60px, 155px) translateZ(0) !important;
    transform: translate(-60px, 155px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

.process-step[data-step="2"] { 
    left: 20% !important; 
    top: 520px !important; 
    transform: translate(-50%, -72px) translateZ(0) !important; 
    width: 160px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-50%, -72px) translateZ(0) !important;
    transform: translate(-50%, -72px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

.process-step[data-step="3"] { 
    left: 40% !important; 
    top: 520px !important; 
    transform: translate(-40px, 75px) translateZ(0) !important; 
    width: 160px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-40px, 75px) translateZ(0) !important;
    transform: translate(-40px, 75px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

.process-step[data-step="4"] { 
    left: 60% !important; 
    top: 520px !important; 
    transform: translate(-25px, -120px) translateZ(0) !important; 
    width: 220px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-25px, -120px) translateZ(0) !important;
    transform: translate(-25px, -120px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

.process-step[data-step="5"] { 
    left: 80% !important; 
    top: 520px !important; 
    transform: translate(-535px, -495px) translateZ(0) !important; 
    width: 190px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-535px, -495px) translateZ(0) !important;
    transform: translate(-535px, -495px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

.process-step[data-step="6"] { 
    left: 85% !important; 
    top: 520px !important; 
    transform: translate(-150px, -405px) translateZ(0) !important; 
    width: 180px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-150px, -405px) translateZ(0) !important;
    transform: translate(-150px, -405px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

.process-step[data-step="7"] { 
    left: 100% !important; 
    top: 520px !important; 
    transform: translate(-100px, -435px) translateZ(0) !important; 
    width: 160px;
    /* 强制覆盖所有可能干扰定位的属性 */
    position: absolute !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 15px !important;
    transform-origin: center center !important;
    /* Safari专用定位保护 */
    -webkit-transform: translate(-100px, -435px) translateZ(0) !important;
    transform: translate(-100px, -435px) translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
}

/* 项目成果卡片 - 移动到流程区域右下角 */
.project-results-inline {
    position: absolute;
    right: -50px;
    bottom: -30px;
    z-index: 4;
    width: 400px;
    animation: none; /* 初始无动画，等待滚动触发 */
    opacity: 0; /* 初始隐藏 */
    transform: translateX(100px); /* 从右边隐藏 */
    will-change: transform, opacity; /* 优化动画性能 */
}

/* 项目成果卡片滚动触发动画类 */
.project-results-inline.animate-in {
    animation: flyInFromRight 0.6s ease-out forwards !important;
    opacity: 1 !important;
    animation-fill-mode: forwards !important;
    will-change: auto !important;
}

/* 项目成果卡片飞入动画关键帧 - 简单滑入 */
@keyframes flyInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.project-results-inline .results-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(59, 90, 244, 0.02) 100%); /* 添加微妙的渐变背景 */
    border: 1px solid rgba(255, 255, 255, 0.18); /* 略微增加边框颜色，与流程卡片保持一致 */
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    backdrop-filter: blur(15px) saturate(180%); /* 增强背景模糊效果 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 使用更平滑的缓动函数 */
}

.project-results-inline .results-card:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30); /* 与流程卡片保持一致的轻微高亮效果 */
}

.project-results-inline .results-card h4 {
    font-size: 20px;
    color: var(--text-light);
    margin-bottom: 20px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.project-results-inline .results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.project-results-inline .result-item {
    text-align: center;
}

.project-results-inline .result-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.project-results-inline .result-label {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 响应式卡片尺寸适配 */
@media (max-width: 1200px) {
    .process-step { width: 180px; padding: 14px 12px; }
    /* 保持各卡片宽度比例 */
    .process-step[data-step="1"] { width: 140px; }
    .process-step[data-step="2"] { width: 140px; }
    .process-step[data-step="3"] { width: 140px; }
    .process-step[data-step="4"] { width: 220px; }
    .process-step[data-step="5"] { width: 140px; }
    .process-step[data-step="6"] { width: 140px; }
    .process-step[data-step="7"] { width: 200px; }
  .project-results-inline { width: 280px; right: 15px; bottom: 115px; }
}

@media (max-width: 968px) {
    .process-step { width: 160px; padding: 12px 10px; }
    /* 保持各卡片宽度比例 */
    .process-step[data-step="1"] { width: 120px; }
    .process-step[data-step="2"] { width: 120px; }
    .process-step[data-step="3"] { width: 120px; }
    .process-step[data-step="4"] { width: 200px; }
    .process-step[data-step="5"] { width: 120px; }
    .process-step[data-step="6"] { width: 120px; }
    .process-step[data-step="7"] { width: 180px; }
  .project-results-inline { width: 260px; right: 15px; bottom: 115px; }
}

@media (max-width: 768px) {
    .process-step { width: 140px; padding: 10px 8px; }
    /* 保持各卡片宽度比例 */
    .process-step[data-step="1"] { width: 100px; }
    .process-step[data-step="2"] { width: 100px; }
    .process-step[data-step="3"] { width: 100px; }
    .process-step[data-step="4"] { width: 180px; }
    .process-step[data-step="5"] { width: 100px; }
    .process-step[data-step="6"] { width: 100px; }
    .process-step[data-step="7"] { width: 160px; }
  .project-results-inline { width: 240px; right: 10px; bottom: 110px; }
}

@media (max-width: 480px) {
    .process-step { width: 120px; padding: 8px 6px; }
    /* 保持各卡片宽度比例 */
    .process-step[data-step="1"] { width: 80px; }
    .process-step[data-step="2"] { width: 80px; }
    .process-step[data-step="3"] { width: 80px; }
    .process-step[data-step="4"] { width: 160px; }
    .process-step[data-step="5"] { width: 80px; }
    .process-step[data-step="6"] { width: 80px; }
    .process-step[data-step="7"] { width: 140px; }
  .project-results-inline { width: 200px; right: 10px; bottom: 110px; }
}

@media (max-width: 360px) {
    .process-step { width: 100px; padding: 6px 4px; }
  .project-results-inline { width: 180px; right: 10px; bottom: 110px; }
}

/* 移动端特殊处理 */
@media (max-width: 768px) {
    .process-timeline { padding-top: 20px; }
    .process-curve { position: relative; height: 320px; }
    .process-points { position: absolute; height: 320px; }
    /* 移动端保持卡片相对点位布局，但调整尺寸 */
}

.project-results {
    margin-top: 60px;
}

.results-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.results-card h4 {
    font-size: 24px;
    color: var(--text-light);
    margin-bottom: 30px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.result-item {
    text-align: center;
}

.result-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 8px;
}

.result-label {
    font-size: 16px;
    color: var(--text-gray);
}

/* 关于我们介绍 */
.about-section {
    background: var(--bg-dark);
    padding: 100px 20px;
    border-top: none; /* 隐藏分割线 */
    text-align: center;
}

/* 关于我们内容布局 */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 60px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

/* 左侧液态玻璃卡片 - 增加透明度 */
.about-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: clamp(24px, 2.8vw, 35px) clamp(22px, 3.1vw, 40px);
    min-height: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(30px) saturate(200%) brightness(1.1);
    -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.1);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.025) 50%,
        rgba(255, 255, 255, 0.01) 100%);
    pointer-events: none;
    z-index: 1;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 10px 30px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.company-logo {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.company-logo h3 {
    font-size: clamp(22px, 3.2vw, 42px);
    color: #ffffff;
    font-weight: 700;
    text-align: left;
    margin: 0;
    text-shadow: 0 2px 20px rgba(59, 90, 244, 0.4);
}

.about-description {
    position: relative;
    z-index: 2;
}

.about-description p {
    font-size: clamp(13px, 1.8vw, 16px);
    color: rgba(255, 255, 255, 0.9);
    line-height: clamp(1.6, 2.2vw, 1.8);
    margin-bottom: clamp(12px, 1.6vw, 18px);
    text-align: left;
    letter-spacing: 0.3px;
    word-break: break-word;
}

.about-description p:last-child {
    margin-bottom: 0;
}

.about-description .highlight-text {
    color: #3B5AF4;
    font-weight: 600;
    /* 使用单一颜色高亮，去掉渐变效果 */
}

/* 右侧图片轮播区域 */
.about-images {
    position: relative;
}

.about-carousel {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

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

.about-carousel-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.about-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 20px;
    overflow: hidden;
}

.about-slide.active {
    opacity: 1;
}

.about-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-slide.active img {
    transform: scale(1.02);
}

/* 轮播指示器 */
.about-carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.about-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-indicator.active {
    background: rgba(59, 90, 244, 0.8);
    border-color: rgba(59, 90, 244, 1);
    box-shadow: 0 0 15px rgba(59, 90, 244, 0.5);
}

.about-indicator:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

/* 产品架构 */
.architecture-section {
    background: var(--bg-dark);
    padding: 100px 20px;
    border-top: none; /* 隐藏分割线 */
    text-align: center;
    position: relative;
    overflow: hidden;
}



/* 典型场景 */
.cases-section {
    background: var(--bg-dark);
    padding: 100px 20px;
    border-top: none; /* 隐藏分割线 */
    text-align: center;
    position: relative;
    overflow: hidden;
}



/* 服务流程 */
.process-section {
    background: var(--bg-dark);
    padding: 100px 20px 120px; /* 增加底部内边距，为项目成果卡片留出空间 */
    border-top: none; /* 隐藏分割线 */
    text-align: center;
    position: relative;
    overflow: visible; /* 改为visible确保所有内容都能显示 */
}



/* 关于我们 */
.about-section {
    background: var(--bg-dark);
    padding: 100px 20px;
    border-top: none; /* 隐藏分割线 */
    text-align: center;
    position: relative;
    overflow: hidden;
}



/* 产品架构轮播样式 */
.architecture-carousel {
    margin-top: 60px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.carousel-container {
    position: relative;
    overflow: visible; /* 改为visible以显示侧边的图片 */
    border-radius: 20px;
    height: 500px; /* 增大高度，让卡片和图片更大 */
}

.carousel-track {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide {
    position: absolute;
    width: 45%;
    height: 80%;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

/* 默认状态：slide-2在中间 */
.carousel-slide:nth-child(1) {
    left: 5%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0.7;
    z-index: 1;
}

.carousel-slide:nth-child(2) {
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
    z-index: 3;
}

.carousel-slide:nth-child(3) {
    left: 95%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0.7;
    z-index: 1;
}

/* Position 1: slide-1在中间 */
.carousel-track.position-1 .carousel-slide:nth-child(1) {
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
    z-index: 3;
}

.carousel-track.position-1 .carousel-slide:nth-child(2) {
    left: 95%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0.7;
    z-index: 1;
}

.carousel-track.position-1 .carousel-slide:nth-child(3) {
    left: 5%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0.7;
    z-index: 1;
}

/* Position 2: slide-3在中间 */
.carousel-track.position-2 .carousel-slide:nth-child(1) {
    left: 95%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0.7;
    z-index: 1;
}

.carousel-track.position-2 .carousel-slide:nth-child(2) {
    left: 5%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0.7;
    z-index: 1;
}

.carousel-track.position-2 .carousel-slide:nth-child(3) {
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    opacity: 1;
    z-index: 3;
}

.arch-card {
    /* 移除所有外框样式，只保留图片容器功能 */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 1; /* 基础层级 */
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* 移除玻璃模糊效果 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    /* 移除阴影效果 */
    box-shadow: none;
    
    /* 保持溢出隐藏 */
    overflow: hidden;
}

/* 架构卡片青色光效 */
.arch-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14, 241, 253, 0.08), transparent);
    transition: left 0.6s ease;
    z-index: 10; /* 提高层级，确保在卡片内容之上 */
    pointer-events: none;
}

.arch-card:hover::after {
    left: 100%;
}

/* 中间激活的卡片样式 - 保持透明 */
.carousel-slide[style*="z-index: 3"] .arch-card {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.arch-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    z-index: 5; /* 降低图片层级，确保光效在图片之上 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.arch-image img {
    width: auto; /* 让宽度自适应 */
    height: auto; /* 让高度自适应 */
    max-width: 100%; /* 统一最大宽度限制 */
    max-height: 100%; /* 统一最大高度限制 */
    object-fit: contain; /* 保持图片完整显示 */
    transition: transform 0.3s ease;
    border-radius: 12px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完全居中 */
}

/* 中间图片的悬停效果 */
.carousel-slide[style*="z-index: 3"] .arch-image img {
    transform: translate(-50%, -50%) scale(1.05); /* 轻微放大，避免过度缩放 */
}

/* 轮播指示器 */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 12; /* 确保指示器在光效之上 */
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.indicator:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.indicator.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(59, 90, 244, 0.5);
}

/* 轮播控制按钮 - 采用典型场景按钮的选中样式 */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(59, 90, 244, 0.2);
    border: 1px solid rgba(59, 90, 244, 0.4);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 15; /* 提高按钮层级，确保在光效之上 */
    backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 25px rgba(59, 90, 244, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.carousel-btn:hover {
    background: rgba(59, 90, 244, 0.3);
    border-color: rgba(59, 90, 244, 0.6);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 
        0 10px 30px rgba(59, 90, 244, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.carousel-prev {
    left: -25px;
}

.carousel-next {
    right: -25px;
}

/* 轮播动画优化 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes centerGlow {
    0%, 100% {
        box-shadow: 0 15px 50px rgba(59, 90, 244, 0.25);
    }
    50% {
        box-shadow: 0 20px 60px rgba(59, 90, 244, 0.35);
    }
}

/* 中间图片的静态高亮效果 */
.carousel-slide[style*="z-index: 3"] .arch-card {
    transform: translateZ(0); /* 启用硬件加速 */
}

/* 侧边图片的悬停效果 - 只保留缩放 */
.carousel-slide[style*="z-index: 1"] .arch-card:hover {
    transform: scale(1.02);
    background: transparent;
    border: none;
}

/* 图片加载动画 */
.arch-image img {
    animation: fadeInImage 0.8s ease-out;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 加载状态 */
.carousel-container.loading .carousel-slide {
    opacity: 0.3;
}

.carousel-container.loading .carousel-btn,
.carousel-container.loading .indicator {
    pointer-events: none;
    opacity: 0.5;
}

/* 指示器动画增强 */
.indicator {
    position: relative;
    overflow: hidden;
}

.indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.indicator.active::before {
    left: 100%;
}

/* 准备好打造应用 - 优化为卡片样式 */
.cta-section {
    padding: 60px 20px;
    text-align: center;
    position: relative; /* 为绝对定位的子元素提供定位上下文 */
    overflow: visible; /* 改为visible以显示绝对定位的特效 */
    background: transparent;
    z-index: 2; /* 设置z-index，确保在理念对话区块2之上 */
}

.cta-content {
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, 
        rgba(25, 39, 87, 0.95) 0%, 
        rgba(16, 25, 56, 0.95) 100%);
    border: 1px solid rgba(59, 90, 244, 0.3);
    border-radius: 20px;
    padding: 40px 35px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 移除卡片hover特效，只保留按钮特效 */

.cta-content h2 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(59, 90, 244, 0.3);
}

.cta-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cta-button {
    display: inline-block; /* 确保链接按钮正确显示 */
    background: linear-gradient(135deg, #3B5AF4 0%, #2A3F8F 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 15px rgba(59, 90, 244, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-decoration: none; /* 移除链接下划线 */
}

.cta-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #4C6BFF 0%, #3B5AF4 100%);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 25px rgba(59, 90, 244, 0.4),
        0 0 20px rgba(59, 90, 244, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff; /* 确保hover时颜色保持白色 */
    text-decoration: none; /* hover时也移除下划线 */
}

/* 变幻球体特效装饰区域 - 样式定义在 particle-sphere.css 中 */

/* 响应式设计 */
/* ====== 智能响应式缩放系统 ====== */
/* 基于卡片尺寸比例，所有元素同步缩放，使用 !important 确保优先级 */

/* 1200px以下：2列布局，卡片尺寸约为原来的85% */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
        max-width: 1400px !important;
    }
    .card-front, .card-back {
        padding: 34px 36px !important; /* 40x42 -> 34x36 (85%) */
        border-radius: 17px !important; /* 20 -> 17 (85%) */
    }
    .card-front .service-icon {
        height: 119px !important; /* 140 -> 119 (85%) */
        margin-bottom: 51px !important; /* 60 -> 51 (85%) */
        padding-top: 8px !important; /* 10 -> 8 (80%) */
    }
    .card-front .icon-svg {
        width: 153px !important; /* 180 -> 153 (85%) */
        height: 153px !important;
    }
    .card-front h3 {
        font-size: 19px !important; /* 22 -> 19 (86%) */
        line-height: 1.3 !important;
        margin-bottom: 13px !important; /* 15 -> 13 (87%) */
        margin-top: -4px !important; /* -5 -> -4 (80%) */
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .card-back h3 {
        font-size: 17px !important; /* 20 -> 17 (85%) */
        margin-bottom: 0 !important;
    }
    .card-back p {
        font-size: 13px !important; /* 15 -> 13 (87%) */
        line-height: 1.4 !important;
        text-align: left !important;
    }
}

/* 968px以下：2列布局，卡片尺寸约为原来的75% */
@media (max-width: 968px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px !important;
        max-width: 1200px !important;
    }
    .card-front, .card-back {
        padding: 30px 32px !important; /* 40x42 -> 30x32 (75%) */
        border-radius: 15px !important; /* 20 -> 15 (75%) */
    }
    .card-front .service-icon {
        height: 105px !important; /* 140 -> 105 (75%) */
        margin-bottom: 45px !important; /* 60 -> 45 (75%) */
        padding-top: 7px !important; /* 10 -> 7 (70%) */
    }
    .card-front .icon-svg {
        width: 135px !important; /* 180 -> 135 (75%) */
        height: 135px !important;
    }
    .card-front h3 {
        font-size: 17px !important; /* 22 -> 17 (77%) */
        line-height: 1.3 !important;
        margin-bottom: 12px !important; /* 15 -> 12 (80%) */
        margin-top: -4px !important; /* -5 -> -4 (80%) */
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .card-back h3 {
        font-size: 15px !important; /* 20 -> 15 (75%) */
        margin-bottom: 0 !important;
    }
    .card-back p {
        font-size: 12px !important; /* 15 -> 12 (80%) */
        line-height: 1.4 !important;
        text-align: left !important;
    }
}

/* 768px以下：1列布局，卡片尺寸约为原来的65% */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 16px 12px !important;
        max-width: 800px !important;
    }
    .card-front, .card-back {
        padding: 26px 27px !important; /* 40x42 -> 26x27 (65%) */
        border-radius: 13px !important; /* 20 -> 13 (65%) */
    }
    .card-front .service-icon {
        height: 91px !important; /* 140 -> 91 (65%) */
        margin-bottom: 39px !important; /* 60 -> 39 (65%) */
        padding-top: 6px !important; /* 10 -> 6 (60%) */
    }
    .card-front .icon-svg {
        width: 117px !important; /* 180 -> 117 (65%) */
        height: 117px !important;
    }
    .card-front h3 {
        font-size: 14px !important; /* 22 -> 14 (64%) */
        line-height: 1.3 !important;
        margin-bottom: 10px !important; /* 15 -> 10 (67%) */
        margin-top: -3px !important; /* -5 -> -3 (60%) */
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .card-back h3 {
        font-size: 13px !important; /* 20 -> 13 (65%) */
        margin-bottom: 0 !important;
    }
    .card-back p {
        font-size: 10px !important; /* 15 -> 10 (67%) */
        line-height: 1.4 !important;
        text-align: left !important;
    }
}

/* 480px以下：1列布局，卡片尺寸约为原来的55% */
@media (max-width: 480px) {
    .services-grid {
        gap: 12px !important;
        padding: 12px 10px !important;
        max-width: 600px !important;
    }
    .card-front, .card-back {
        padding: 22px 23px !important; /* 40x42 -> 22x23 (55%) */
        border-radius: 11px !important; /* 20 -> 11 (55%) */
    }
    .card-front .service-icon {
        height: 77px !important; /* 140 -> 77 (55%) */
        margin-bottom: 33px !important; /* 60 -> 33 (55%) */
        padding-top: 5px !important; /* 10 -> 5 (50%) */
    }
    .card-front .icon-svg {
        width: 99px !important; /* 180 -> 99 (55%) */
        height: 99px !important;
    }
    .card-front h3 {
        font-size: 12px !important; /* 22 -> 12 (55%) */
        line-height: 1.3 !important;
        margin-bottom: 8px !important; /* 15 -> 8 (53%) */
        margin-top: -3px !important; /* -5 -> -3 (60%) */
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .card-back h3 {
        font-size: 11px !important; /* 20 -> 11 (55%) */
        margin-bottom: 0 !important;
    }
    .card-back p {
        font-size: 8px !important; /* 15 -> 8 (53%) */
        line-height: 1.4 !important;
        text-align: left !important;
    }
}

/* 400px以下：1列布局，卡片尺寸约为原来的50% */
@media (max-width: 400px) {
    .services-grid {
        gap: 10px !important;
        padding: 10px 8px !important;
        max-width: 500px !important;
    }
    .card-front, .card-back {
        padding: 20px 21px !important; /* 40x42 -> 20x21 (50%) */
        border-radius: 10px !important; /* 20 -> 10 (50%) */
    }
    .card-front .service-icon {
        height: 70px !important; /* 140 -> 70 (50%) */
        margin-bottom: 30px !important; /* 60 -> 30 (50%) */
        padding-top: 5px !important; /* 10 -> 5 (50%) */
    }
    .card-front .icon-svg {
        width: 90px !important; /* 180 -> 90 (50%) */
        height: 90px !important;
    }
    .card-front h3 {
        font-size: 11px !important; /* 22 -> 11 (50%) */
        line-height: 1.25 !important;
        margin-bottom: 8px !important; /* 15 -> 8 (53%) */
        margin-top: -3px !important; /* -5 -> -3 (60%) */
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .card-back h3 {
        font-size: 10px !important; /* 20 -> 10 (50%) */
        margin-bottom: 0 !important;
    }
    .card-back p {
        font-size: 8px !important; /* 15 -> 8 (53%) */
        line-height: 1.35 !important;
        text-align: left !important;
    }
} 

/* 全局标题居中样式 */
.section-title {
    text-align: center;
    margin-bottom: 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

h2.section-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 50px;
}

@media (max-width: 480px) {
    .achievements-section.hero-section {
        min-height: 480px;
        margin-top: -70px;
        padding-top: 70px;
    }
    
    .main-title {
        font-size: clamp(28px, 8vw, 36px);
        font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', 'Roboto', 'Noto Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 600;
        letter-spacing: 0.3px;
        /* 超小屏幕保持从左到右渐变亮度效果 */
        background: linear-gradient(
            to right,
            #333333 0%,           /* 左侧"智"字 - 深灰色 */
            #555555 20%,          /* "域"字开始 - 中灰色 */
            #999999 40%,          /* "域"字结束/"奇"字开始 - 明显调亮 */
            #cccccc 60%,          /* "奇"字中部 - 大幅调亮 */
            #f0f0f0 80%,          /* "点"字开始 - 极亮灰色 */
            #FFFFFF 100%          /* "点"字结束 - 最亮的纯白色 */
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
    }
    

    
    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 320px;
    }
    
    .achievement-item {
        min-width: auto;
    }
    
    .achievement-item .number {
        font-size: clamp(18px, 6vw, 26px);
        margin-bottom: 8px;
    }
    
    .achievement-item .label {
        font-size: clamp(12px, 3.6vw, 15px);
        font-weight: 500;
    }
    
    .process-timeline {
        grid-template-columns: 1fr;
    }
    
    h2.section-title {
        font-size: 28px;
    }
    
    .case-tabs {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .case-tab {
        padding: 10px 16px;
        font-size: 14px;
        width: 200px;
        text-align: center;
    }
    
    .case-content-item {
        padding: 30px 20px 5px 20px !important;
        gap: 20px;
        max-width: 98%;
        min-height: 350px; /* 减少高度 */
    }
    
    .case-title {
        font-size: 24px;
        padding: 10px 15px;
        color: #FFFFFF !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        background: none;
        border: none;
        background-color: transparent;
    }
    
    /* 移除渐变色支持，保持纯白色 */
    
    .case-details {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 5px 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .case-text-content {
        padding: 0;
        font-size: 14px;
        height: auto;
        overflow: visible;
        line-height: 1.6;
        box-sizing: border-box;
        white-space: pre-wrap;
        word-wrap: break-word;
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: 0.1px;
    }
    
    .detail-section {
        margin-bottom: 8px;
    }
    
    .detail-section h4 {
        font-size: 15px;
        padding-left: 14px;
        margin-bottom: 6px;
    }
    
    .detail-section h4::before {
        width: 3px;
        height: 15px;
    }
    
    .detail-section p,
    .detail-section li {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .detail-section li {
        padding-left: 18px;
        margin-bottom: 6px;
    }
    
    .case-image {
        aspect-ratio: 16/9;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* 关于我们移动端样式 */
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }
    
    .about-card {
        padding: 22px 18px;
        border-radius: 18px;
        height: auto;
        min-height: unset;
    }
    
    .company-logo h3 {
        font-size: 32px;
        text-align: center;
    }
    
    .about-description p {
        font-size: 14px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .about-carousel {
        height: 300px;
    }
    
    .about-carousel-indicators {
        bottom: 15px;
    }
    
    .about-indicator {
        width: 10px;
        height: 10px;
    }
    
    .architecture-carousel {
        max-width: 98%;
        margin-top: 30px;
    }
    
    .carousel-container {
        height: 350px; /* 最小屏幕保持足够高度 */
    }
    
    .carousel-slide {
        width: 75%; /* 最小屏幕稍大宽度 */
    }
    
    .arch-card {
        border-radius: 0;
        padding: 0;
    }
    
    .arch-image {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 6px;
    }
    
    .arch-image img {
        max-width: 100%; /* 最小屏幕接近满屏 */
        max-height: 100%;
        border-radius: 6px;
    }
    
    .carousel-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .carousel-prev {
        left: -10px;
    }
    
    .carousel-next {
        right: -10px;
    }
    
    .carousel-indicators {
        padding: 15px;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
}

/* 智能体验广场增强样式 */

/* 交互式节点样式 */
.interactive-node {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.interactive-node:hover {
    transform: scale(1.1);
}

.interactive-node .node-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(14, 241, 253, 0.2), rgba(59, 130, 246, 0.15));
    border: 2px solid rgba(14, 241, 253, 0.4);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.interactive-node .node-icon {
    font-size: 24px;
    display: block;
}

.interactive-node .node-text {
    font-size: 10px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
}

.node-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(14, 241, 253, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* 移除动态动画，保持静态效果 */
    opacity: 0;
}

/* 移除pulse动画 - 不再使用 */

.interactive-node.active .node-pulse {
    animation-play-state: running;
}

/* 演示卡片增强样式 */
.demo-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.demo-card {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.demo-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.demo-icon-container {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(14, 241, 253, 0.2), rgba(59, 130, 246, 0.15));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(14, 241, 253, 0.3);
}

.demo-icon-container .demo-icon {
    font-size: 28px;
}

.demo-status {
    background: linear-gradient(135deg, #00d4ff, #3b82f6);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-content h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

.demo-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.demo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.demo-tags .tag {
    background: rgba(14, 241, 253, 0.15);
    color: #00d4ff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(14, 241, 253, 0.3);
}

.demo-actions {
    display: flex;
    gap: 12px;
}

.demo-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.demo-btn.primary {
    background: linear-gradient(135deg, #00d4ff, #3b82f6);
    color: #ffffff;
}

.demo-btn.primary:hover {
    background: linear-gradient(135deg, #0099cc, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 241, 253, 0.4);
}

.demo-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.demo-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* 筛选控件样式 */
.demo-controls {
    margin: 40px 0 60px;
    text-align: center;
}

.filter-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 5px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-tab {
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.filter-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.filter-tab.active {
    background: linear-gradient(135deg, #00d4ff, #3b82f6);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(14, 241, 253, 0.3);
}

/* 模态框样式 */
.demo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.demo-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 30, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    backdrop-filter: blur(20px);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal-body {
    padding: 30px;
    max-height: 60vh;
    overflow-y: auto;
}

.demo-iframe-container {
    position: relative;
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

.placeholder-content {
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(14, 241, 253, 0.3);
    border-top: 3px solid #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

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

.demo-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.info-section h4 {
    color: #00d4ff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.info-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-section li {
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    padding-left: 20px;
}

.info-section li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #00d4ff;
    font-weight: bold;
}

.info-section p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 25px 30px;
    border-top: none; /* 隐藏分割线 */
}

.btn-secondary, .btn-primary {
    padding: 12px 25px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-primary {
    background: linear-gradient(135deg, #00d4ff, #3b82f6);
    color: #ffffff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0099cc, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 241, 253, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .demo-list {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 10px;
    }
    
    .demo-card {
        padding: 20px;
    }
    
    .demo-actions {
        flex-direction: column;
    }
    
    .filter-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .filter-tab {
        font-size: 12px;
        padding: 10px 15px;
    }
    
    .modal-content {
        width: 95%;
        margin: 10px;
    }
    
    .modal-header, .modal-body, .modal-footer {
        padding: 20px;
    }
    
    .demo-info {
        grid-template-columns: 1fr;
        gap: 20px;
    }
} 

/* 智能体验广场左右布局新样式 */
.experience-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 60px;
    align-items: start;
}

/* 左侧AI引擎区域 */
.ai-engine-section {
    position: relative;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-engine-section .ai-engine-visualization {
    position: relative;
    width: 100%;
    height: 800px;
    max-width: 960px; /* 原800px的1.2倍 */
    margin: 0 auto;
    margin-top: -100px; /* 整体上移50px */
    overflow: visible;
}

/* 3D舞台容器 */
.ai-engine-section .stage {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1400px;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    overflow: visible;
}

/* SVG连线层 */
.ai-engine-section .stage svg.lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* 3D透明玻璃核心球 */
.ai-engine-section .stage .center {
    position: absolute;
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%) translateZ(60px) rotateX(0deg) rotateY(0deg);
    width: 160px; 
    height: 160px;
    border-radius: 50%;
    /* 冷淡蓝体积感：主体偏灰蓝，亮部更白 */
    background: radial-gradient(circle at 35% 35%, 
        rgba(240, 246, 255, 0.65) 0%,
        rgba(216, 230, 250, 0.35) 32%,
        rgba(194, 210, 236, 0.18) 62%,
        rgba(176, 194, 224, 0.10) 78%,
        rgba(160, 180, 210, 0.06) 100%);
    border: 2px solid rgba(190, 208, 235, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #ECF3FF;
    text-shadow: 0 0 14px rgba(255,255,255,0.5);
    z-index: 4;
    transition: all 0.3s ease;
    overflow: hidden;
    /* 移除外扩光环，只保留基础阴影 */
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.32),
        inset 0 0 18px rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
    cursor: grab;
}

.ai-engine-section .stage .center:active {
    cursor: grabbing;
}

/* 三层体积化：内核（::before）、Fresnel 边缘圈（::after），外扩柔光在 box-shadow 实现 */
.ai-engine-section .stage .center::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        rgba(255,255,255,0.95) 0%,
        rgba(237,244,255,0.75) 28%,
        rgba(220,234,255,0.28) 70%,
        rgba(220,234,255,0.0) 100%);
    pointer-events: none;
}
.ai-engine-section .stage .center::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Fresnel 边缘圈：边缘更亮，向内外柔和过渡 */
    background: radial-gradient(circle at 50% 50%,
        rgba(220,235,255,0) calc(50% - 5px),
        rgba(235,245,255,0.9) 50%,
        rgba(220,235,255,0.25) 58%,
        rgba(220,235,255,0) 66%);
    pointer-events: none;
}

.ai-engine-section .stage .center-info {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%) scale(0.88);
    width: 160px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    z-index: 6;
}

.ai-engine-section .stage .center-info.visible {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
}

.ai-engine-section .stage .center-info .title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.9);
}

.ai-engine-section .stage .center-info .subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.2;
}

/* 核心球悬停效果 */
.ai-engine-section .stage .center:hover {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.12);
    transform: translate(-50%, -50%) translateZ(70px) scale(1.05);
}

/* 3D节点球（主节点和子节点共用） */
.ai-engine-section .stage .node {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
    z-index: 5;
    backface-visibility: hidden;
    /* 冷淡蓝体积感 */
    background: radial-gradient(circle at 35% 35%,
        rgba(240,246,255,0.55) 0%,
        rgba(214,228,248,0.28) 45%,
        rgba(184,202,232,0.12) 80%,
        rgba(170,190,220,0.06) 100%);
    border: 1.5px solid rgba(188, 206, 232, 0.55);
    box-shadow:
        0 8px 22px rgba(0,0,0,0.38),
        0 0 26px rgba(160, 190, 255, 0.14),
        inset 0 0 14px rgba(255,255,255,0.05);
}

.ai-engine-section .stage .node .label {
    padding: 6px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #eafcff;
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
    line-height: 1.1;
    pointer-events: none;
    user-select: none;
}

/* 节点三层体积化 */
.ai-engine-section .stage .node::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        rgba(255,255,255,0.92) 0%,
        rgba(235,243,255,0.6) 32%,
        rgba(220,234,255,0.22) 70%,
        rgba(220,234,255,0.0) 100%);
    pointer-events: none;
}
.ai-engine-section .stage .node::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(220,235,255,0) calc(50% - 4px),
        rgba(235,245,255,0.85) 50%,
        rgba(220,235,255,0.22) 57%,
        rgba(220,235,255,0) 64%);
    pointer-events: none;
}

.ai-engine-section .stage .node.hovered {
    transform: scale(1.18);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow:
        0 22px 50px rgba(255,255,255,0.15),
        0 0 40px rgba(255,255,255,0.1),
        inset 0 0 20px rgba(255,255,255,0.1);
    z-index: 120;
}

.ai-engine-section .stage .node.hovered .label {
    transform: translateZ(10px);
}

.ai-engine-section .stage .node.selected {
    filter: blur(3px) grayscale(1) opacity(0.28);
}

.ai-engine-section .stage .node.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.6);
}

/* 节点工具提示 */
.ai-engine-section .stage .node-tooltip {
    position: absolute;
    min-width: 120px;
    transform: translate(-50%, 12px);
    left: 50%;
    top: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(20,26,40,0.95);
    box-shadow: 0 10px 30px rgba(2,8,20,0.6);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 200;
    text-align: center;
}

.ai-engine-section .stage .node.show-tooltip .node-tooltip {
    opacity: 1;
}



/* SVG样式 */
.ai-engine-section .stage svg.lines line {
    stroke: rgba(255,255,255,0.18);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    transition: stroke 0.3s ease, stroke-dashoffset 0.4s linear;
}

.ai-engine-section .stage svg.lines line.highlight {
    stroke: rgba(255,255,255,0.8);
    stroke-width: 2.5;
    /* 移除动态动画，保持静态效果 */
}

/* 移除pulse动画 - 不再使用 */

/* 右侧Demo展示区域 */
.demo-display-section {
    position: relative;
    flex: 1;
    min-width: 0; /* 防止flex子项溢出 */
}

.demo-display-section .demo-scroll-window {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 810px;
    overflow-y: auto;
    padding-right: 10px;
    scroll-behavior: smooth;
    /* 防抖与隐藏内滚动条，避免与页面主滚动条并排 */
    overscroll-behavior: contain;
    scrollbar-width: none; /* Firefox 隐藏滚动条，仍可滚动 */
}

/* 自定义滚动条 */
.demo-display-section .demo-scroll-window::-webkit-scrollbar { width: 0; height: 0; }

.demo-display-section .demo-scroll-window::-webkit-scrollbar-track { background: transparent; border-radius: 0; }

.demo-display-section .demo-scroll-window::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; transition: none; }

.demo-display-section .demo-scroll-window::-webkit-scrollbar-thumb:hover { background: transparent; }

/* Demo卡片样式重构 - 左右分栏布局 */
    .demo-display-section .demo-card {
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        position: relative !important;
        backdrop-filter: blur(10px) !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
        min-height: 240px !important;
        overflow: visible !important;
        /* 允许JS控制显隐 */
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

.demo-display-section .demo-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* 左侧列 - 文字内容和按钮 */
.demo-display-section .demo-left-column {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important; /* 防止内容溢出 */
    /* 确保内容正确布局 */
    align-items: stretch !important;
    width: auto !important;
    position: relative !important;
}

.demo-display-section .demo-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
}

.demo-display-section .demo-title {
    color: var(--text-light) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.demo-display-section .demo-description {
    color: var(--text-gray) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 120px !important;
}

.demo-display-section .demo-button-container {
    display: flex !important;
    justify-content: center !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    align-items: center !important;
    min-height: 44px !important;
    position: relative !important;
}

/* 右侧列 - 视频占位符 */
.demo-display-section .demo-right-column {
    flex: 0 0 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 确保固定宽度 */
    width: 200px !important;
    max-width: 200px !important;
    min-width: 200px !important;
}

.demo-display-section .demo-video-placeholder {
    width: 100% !important;
    height: 160px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.demo-display-section .demo-video-placeholder:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.02) !important;
}

.demo-display-section .play-icon {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.demo-display-section .play-icon i {
    color: #000 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.demo-display-section .play-icon:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* 统一体验按钮与CTA一致的配色 */
.demo-display-section .btn-demo,
.no-demo-found .btn.btn-primary,
.cta-section.global-particle-section .cta-button {
    background: linear-gradient(135deg, #3B5AF4 0%, #2A3F8F 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(59, 90, 244, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.demo-display-section .btn-demo:hover,
.no-demo-found .btn.btn-primary:hover,
.cta-section.global-particle-section .cta-button:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #4C6BFF 0%, #3B5AF4 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 25px rgba(59, 90, 244, 0.4), 0 0 20px rgba(59, 90, 244, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* 搜索区域优化 */
.experience-section .search-input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-light);
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.experience-section .search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
}

.experience-section .search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.experience-section .search-btn:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.4);
}

/* 无结果提示 */
.demo-display-section .no-demo-found {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-gray);
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    min-height: 300px; /* 提高卡片高度，避免内容溢出 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 无结果卡片内部：取消AOS造成的初始位移/透明，限制宽度并居中 */
.demo-display-section .no-demo-found .empty-state {
    max-width: 760px;
    margin: 0 auto;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
}

.demo-display-section .no-demo-found [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
}

.demo-display-section .empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.demo-display-section .empty-state h3 {
    color: var(--text-light);
    margin-bottom: 12px;
}

.demo-display-section .empty-state p {
    margin-bottom: 24px;
    line-height: 1.6;
}

/* 响应式设计调整 */
@media (max-width: 1200px) {
    .experience-main-content {
        gap: 40px;
    }
    
    .ai-engine-section .ai-engine-visualization {
        max-width: 400px;
        height: 500px;
    }
    
    .ai-engine-section .stage .center {
        width: 140px;
        height: 140px;
        font-size: 22px;
    }
    
    .ai-engine-section .stage .node {
        width: 72px;
        height: 72px;
    }
    
    .ai-engine-section .stage .node .label {
        font-size: 11px;
        padding: 5px 6px;
    }
}

@media (max-width: 968px) {
    .experience-main-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .ai-engine-section {
        order: 1;
    }
    
    .demo-display-section {
        order: 2;
    }
    
    .demo-display-section .demo-list {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .experience-main-content {
        gap: 40px;
    }
    
    .ai-engine-section .ai-engine-visualization {
        height: 400px;
        max-width: 320px;
    }
    
    .ai-engine-section .stage .center {
        width: 120px;
        height: 120px;
        font-size: 18px;
        border-width: 2px;
    }
    
    .ai-engine-section .stage .node {
        width: 60px;
        height: 60px;
        border-width: 1.5px;
    }
    
    .ai-engine-section .stage .node .label {
        font-size: 10px;
        padding: 4px 5px;
    }
    
    .demo-display-section .demo-card {
        padding: 16px !important;
        flex-direction: row !important;
        gap: 16px !important;
        min-height: 240px !important;
    }
    
    .demo-display-section .demo-left-column {
        order: 1 !important;
        flex: 1 !important;
    }
    
    .demo-display-section .demo-right-column {
        order: 2 !important;
        flex: 0 0 160px !important;
        width: 160px !important;
        max-width: 160px !important;
        min-width: 160px !important;
    }
    
    .demo-display-section .demo-video-placeholder {
        height: 160px !important;
    }
    
    .demo-display-section .demo-title {
        font-size: 16px !important;
    }
    
    .experience-section .search-input {
        padding: 14px 50px 14px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ai-engine-section .ai-engine-visualization {
        height: 350px;
        max-width: 280px;
    }
    
    .ai-engine-section .stage .center {
        width: 100px;
        height: 100px;
        font-size: 16px;
        border-width: 2px;
    }
    
    .ai-engine-section .stage .node {
        width: 50px;
        height: 50px;
        border-width: 1.5px;
    }
    
    .ai-engine-section .stage .node .label {
        font-size: 9px;
        padding: 3px 4px;
    }
} 

/* 确保所有内容显示在背景之上 */
.container,
.section-header,
.experience-main-content,
.services-grid,
.philosophy-content,
.case-tabs,
.case-content-container,
.process-timeline,
.project-results,
.about-content {
    position: relative;
    z-index: 1;
}

/* 终极覆盖：强制去掉所有SVG图标的背景 */
.business-services-section .service-card .service-icon,
.business-services-section .service-card .service-icon::before,
.business-services-section .service-card .service-icon::after,
.business-services-section .service-icon,
.business-services-section .icon-svg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

.business-services-section .service-card .service-icon * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}



/* ===== 全局星空流星特效背景系统 ===== */
.global-particle-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #000000 0%, #0a0a0a 100%);
    isolation: isolate;
}

.global-particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.global-particle-canvas.active {
    opacity: 0.8;
}

/* 星空滤镜效果 - 已移除 */

/* 星空滤镜动画 - 已移除 */

/* 确保内容在星空特效上方 */
.global-particle-section .container,
.global-particle-section .section-header,
.global-particle-section .services-grid,
.global-particle-section .search-container,
.global-particle-section .experience-main-content,
.global-particle-section .philosophy-content,
.global-particle-section .architecture-diagrams,
.global-particle-section .case-tabs,
.global-particle-section .case-content-container,
.global-particle-section .process-timeline,
.global-particle-section .cta-content {
    position: relative;
    z-index: 1;
}

/* 统一所有区域为纯黑色背景 */
.intro-section.global-particle-section {
    background: #000000;
}

.business-services-section.global-particle-section {
    background: #000000;
}

.philosophy-section.global-particle-section {
    background: #000000;
}

.experience-section.global-particle-section {
    background: #000000;
}

.architecture-section.global-particle-section {
    background: #000000;
}

.cases-section.global-particle-section {
    background: #000000;
}

.process-section.global-particle-section {
    background: #000000;
}

.cta-section.global-particle-section {
    background: #000000;
}

.about-section.global-particle-section {
    background: #000000;
    padding: 100px 0;
}

.footer.global-particle-section {
    background: #000000;
    padding: 80px 0 40px;
    margin-top: 0;
}

/* 关于我们区域特殊美化样式 */
.about-section.global-particle-section .section-title,
.about-section.global-particle-section .section-subtitle {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(59, 90, 244, 0.3);
}

/* 让关于我们区域的副标题与服务流程区域的副标题颜色样式保持一致 */
.about-section.global-particle-section .section-subtitle {
    color: var(--text-gray) !important;
}

/* 联系我们footer区域特殊美化样式 */
.footer.global-particle-section .footer-content {
    position: relative;
    z-index: 10;
}

/* 联系我们区域：将地址和联系图标整体上移30px */
.footer.global-particle-section .footer-section:last-child .contact-info {
    transform: translateY(-30px);
}

/* 单独将三个社交图标向上移动15px */
.footer.global-particle-section .social-links {
    transform: translateY(-25px);
}

/* 响应式调整：确保在不同屏幕尺寸下地址和图标的上移效果 */
@media (max-width: 768px) {
    .footer.global-particle-section .footer-section:last-child .contact-info {
        transform: translateY(-25px); /* 移动端稍微减少上移距离 */
    }
}

@media (max-width: 480px) {
    .footer.global-particle-section .footer-section:last-child .contact-info {
        transform: translateY(-20px); /* 小屏幕进一步减少上移距离 */
    }
}

.footer.global-particle-section h3,
.footer.global-particle-section h4 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(59, 90, 244, 0.3);
}

.footer.global-particle-section p,
.footer.global-particle-section a {
    color: rgba(255, 255, 255, 0.8);
}

.footer.global-particle-section a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(59, 90, 244, 0.5);
}

.footer.global-particle-section .social-links a {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.footer.global-particle-section .social-links a:hover {
    background: rgba(59, 90, 244, 0.3);
    border-color: rgba(59, 90, 244, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 90, 244, 0.3);
}

/* 社交图标SVG样式 */
.footer.global-particle-section .social-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.footer.global-particle-section .social-links a:hover .social-icon {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(59, 90, 244, 0.6));
}

/* 社交图标项容器 */
.footer.global-particle-section .social-item {
    position: relative;
    display: inline-block;
}

/* 二维码容器 */
.footer.global-particle-section .qr-code {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    text-align: center;
    /* 统一容器尺寸，避免内部图片尺寸被其他规则覆盖 */
    width: 120px; /* 缩小40%：200px × 0.6 = 120px */
    height: 120px; /* 缩小40%：200px × 0.6 = 120px */
}

/* 二维码图片 */
.footer.global-particle-section .qr-code img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
}

/* 二维码尺寸响应式适配 */
@media (max-width: 1200px) {
  .footer.global-particle-section .qr-code { width: 108px; height: 108px; } /* 缩小40%：180px × 0.6 = 108px */
}

@media (max-width: 768px) {
  .footer.global-particle-section .qr-code { width: 96px; height: 96px; } /* 缩小40%：160px × 0.6 = 96px */
}

@media (max-width: 480px) {
  .footer.global-particle-section .qr-code { width: 84px; height: 84px; } /* 缩小40%：140px × 0.6 = 84px */
}

/* 二维码文字说明 - 隐藏 */
.footer.global-particle-section .qr-code span {
    display: none;
}

/* 悬停时显示二维码 */
.footer.global-particle-section .social-item:hover .qr-code {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* 二维码箭头指示器 - 移除 */
.footer.global-particle-section .qr-code::after {
    display: none;
}

/* 全局星空特效的加载状态 */
.global-particle-section.loading .global-particle-canvas {
    opacity: 0;
}

.global-particle-section.loaded .global-particle-canvas {
    opacity: 0.8;
}

/* 鼠标悬浮时的星空增强效果 */
.global-particle-section:hover .global-particle-canvas {
    opacity: 1;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .global-particle-canvas {
        opacity: 0.5; /* 移动端降低星空密度视觉效果 */
    }
    
    .global-particle-canvas.active {
        opacity: 0.6;
    }
    
    .global-particle-section:hover .global-particle-canvas {
        opacity: 0.8;
    }
}

/* 移除所有卡片动画特效 */

/* CTA卡片响应式设计 */
@media (max-width: 768px) {
    .cta-content {
        max-width: 420px;
        padding: 35px 28px;
        margin: 0 15px;
    }
    
    .cta-content h2 {
        font-size: 20px;
        margin-bottom: 14px;
    }
    
    .cta-content p {
        font-size: 13px;
        margin-bottom: 25px;
    }
    
    .cta-button {
        padding: 10px 24px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .cta-content {
        max-width: 350px;
        padding: 30px 22px;
    }
    
    .cta-content h2 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .cta-content p {
        font-size: 12px;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    
    .cta-button {
        padding: 9px 20px;
        font-size: 12px;
    }
}

/* 变幻球体特效响应式设计 */
@media (max-width: 768px) {
    /* 变幻球体特效样式在particle-sphere.css中统一管理，这里留空避免冲突 */
}

@media (max-width: 480px) {
    /* 变幻球体特效样式在particle-sphere.css中统一管理，这里留空避免冲突 */
}

@media (max-width: 360px) {
    /* 变幻球体特效样式在particle-sphere.css中统一管理，这里留空避免冲突 */
}

/* 强制覆盖其他文件中的CTA样式 */
.cta-section.global-particle-section .cta-content {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 30px !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
}

.cta-section.global-particle-section .cta-content h2 {
    font-size: 24px !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 10px rgba(59, 90, 244, 0.3) !important;
}

.cta-section.global-particle-section .cta-content p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 30px !important;
    line-height: 1.6 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* CTA 卡片悬浮样式与 Demo 卡片一致 */
.cta-section.global-particle-section .cta-content:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
}

/* 强制覆盖按钮基础样式 */
.cta-section.global-particle-section .cta-button {
    background: linear-gradient(135deg, #3B5AF4 0%, #2A3F8F 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 
        0 4px 15px rgba(59, 90, 244, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* 曲线底图容器 */
.process-curve {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 520px;
    pointer-events: none;
    z-index: 1;
    top: 100px; /* 整体下移100px */
}
.process-curve img { width: 100%; height: 100%; object-fit: contain; opacity: .9; }

/* 七个定位点（曲线下方水平等距排列） */
.process-points {
  position: absolute;
  left: 0; right: 0;
  top: 620px; /* 紧贴曲线底部，下移100px */
  height: 80px; /* 优化容器高度 */
  pointer-events: none;
  z-index: 3; /* 提高z-index确保在曲线之上，但在卡片之下 */
}
.process-point { 
  position: absolute; 
  top: 8px; /* 微调垂直位置 */
  width: 56px !important; 
  height: 56px !important; 
  object-fit: contain; 
  transform-origin: center center; 
  display: block; 
  opacity: 0; /* 初始隐藏，等待动画触发 */
  animation: none; /* 初始无动画，等待滚动触发 */
  box-sizing: content-box;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(0.5) blur(1px); /* 添加轻微阴影增强可见性 */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 添加过渡效果 */
  will-change: transform, opacity, filter;
  transform: translateX(-80px) scale(0.7); /* 初始位置：左侧隐藏 */
}

/* 流程点动画类 */
.process-point.animate-in {
    animation: flyInPointFromLeft 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    opacity: 1 !important;
    /* 确保动画完成后状态正确 */
    filter: brightness(1) blur(0) !important;
    -webkit-filter: brightness(1) blur(0) !important;
  filter: brightness(1) blur(0) !important;
    filter: brightness(1) blur(0) !important;
    -moz-filter: brightness(1) blur(0) !important;
    -ms-filter: brightness(1) blur(0) !important;
    /* 确保动画完成后状态正确 */
    animation-fill-mode: forwards !important;
    /* 强制清除可能的内联样式影响 */
    will-change: auto !important;
    /* 强制覆盖响应式transform规则 */
    transform: translateX(0) scale(1) !important;
}

/* 流程点飞入动画关键帧 - 从左侧飞入 */
@keyframes flyInPointFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-80px) scale(0.7);
        filter: brightness(0.5) blur(1px);
    }
    25% {
        opacity: 0.5;
        transform: translateX(-50px) scale(0.8);
        filter: brightness(0.7) blur(0.5px);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-25px) scale(0.9);
        filter: brightness(0.9) blur(0.2px);
    }
    75% {
        opacity: 0.95;
        transform: translateX(-8px) scale(0.95);
        filter: brightness(1.05) blur(0.1px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: brightness(1) blur(0);
    }
}

/* 流程点动画完成后的最终状态 - 确保完全清晰 */
.process-point.animate-in,
.process-point[style*="animation"] {
  filter: brightness(1) blur(0) !important;
  -webkit-filter: brightness(1) blur(0) !important;
  filter: brightness(1) blur(0) !important;
  -moz-filter: brightness(1) blur(0) !important;
  -ms-filter: brightness(1) blur(0) !important;
}

/* 全局动画完成后的模糊清除规则 */
*[class*="animate-in"],
*[style*="animation"] {
  /* 确保所有动画完成后无模糊效果 */
  filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
  -moz-filter: blur(0) !important;
  -ms-filter: blur(0) !important;
}

/* 流程点连接线动画 */
.process-point.animate-in::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(59, 90, 244, 0.6), rgba(59, 90, 244, 0.3));
  transform: translate(-50%, -50%);
  animation: expandLine 0.6s ease-out 0.3s forwards;
  border-radius: 1px;
}

@keyframes expandLine {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 60px;
    opacity: 0.8;
  }
  100% {
    width: 80px;
    opacity: 0.6;
  }
}

/* 响应式点位尺寸适配 */
@media (max-width: 1200px) {
  .process-point { width: 52px !important; height: 52px !important; }
}

@media (max-width: 968px) {
  .process-point { width: 48px !important; height: 48px !important; }
}

@media (max-width: 768px) {
  .process-point { width: 44px !important; height: 44px !important; }
}

@media (max-width: 480px) {
  .process-point { width: 40px !important; height: 40px !important; }
}

@media (max-width: 360px) {
  .process-point { width: 36px !important; height: 36px !important; }
}
/* 从左到右等距，点4与点5完全重合（5段等距布局） */
/* 流程点位置强化 - 确保手动调整位置始终生效 */
.process-point.point-1 { 
    left: 0% !important; 
    top: 8px !important;
    transform: translate(-27px, -21px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}
.process-point.point-2 { 
    left: 20% !important; 
    top: 8px !important;
    transform: translate(-50%, -52px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}
.process-point.point-3 { 
    left: 40% !important; 
    top: 8px !important;
    transform: translate(-45%, -103px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}
.process-point.point-4 { 
    left: 60% !important; 
    top: 8px !important;
    transform: translate(-81px, -265px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}
.process-point.point-5 { 
    left: 60% !important; 
    top: 8px !important;
    transform: translate(-100px, -520px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}
.process-point.point-6 { 
    left: 80% !important; 
    top: 8px !important;
    transform: translate(-50%, -586px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}
.process-point.point-7 { 
    left: 100% !important; 
    top: 8px !important;
    transform: translate(-29px, -616px) !important; 
    position: absolute !important;
    z-index: 8 !important;
}


/* ========= 流程卡片与流程点响应式定位（按新基准等比缩放） ========= */
@media (max-width: 1200px) {
  /* 流程卡片位置（0.9倍） */
  .process-step[data-step="1"] { top: 500px !important; transform: translate(-72px, 140px) !important; }
  .process-step[data-step="2"] { top: 500px !important; transform: translate(-50%, -65px) !important; }
  .process-step[data-step="3"] { top: 500px !important; transform: translate(-36px, 68px) !important; }
  .process-step[data-step="4"] { top: 500px !important; transform: translate(-22px, -108px) !important; }
  .process-step[data-step="5"] { top: 500px !important; transform: translate(-482px, -446px) !important; }
  .process-step[data-step="6"] { top: 500px !important; transform: translate(-135px, -365px) !important; }
  .process-step[data-step="7"] { top: 500px !important; transform: translate(-90px, -392px) !important; }
  /* 流程点位置（0.9倍） */
  .process-point.point-1 { transform: translate(-24px, -19px) !important; }
  .process-point.point-2 { transform: translate(-50%, -47px) !important; }
  .process-point.point-3 { transform: translate(-41px, -93px) !important; }
  .process-point.point-4 { transform: translate(-73px, -239px) !important; }
  .process-point.point-5 { transform: translate(-90px, -458px) !important; }
  .process-point.point-6 { transform: translate(-50%, -517px) !important; }
  .process-point.point-7 { transform: translate(-26px, -544px) !important; }
  /* 项目成果卡片尺寸 */
  .project-results-inline { width: 300px; right: 12px; bottom: 110px; }
}

@media (max-width: 968px) {
  /* 流程卡片位置（0.8倍） */
  .process-step[data-step="1"] { top: 460px !important; transform: translate(-64px, 124px) !important; }
  .process-step[data-step="2"] { top: 460px !important; transform: translate(-50%, -58px) !important; }
  .process-step[data-step="3"] { top: 460px !important; transform: translate(-32px, 60px) !important; }
  .process-step[data-step="4"] { top: 460px !important; transform: translate(-20px, -96px) !important; }
  .process-step[data-step="5"] { top: 460px !important; transform: translate(-428px, -384px) !important; }
  .process-step[data-step="6"] { top: 460px !important; transform: translate(-120px, -312px) !important; }
  .process-step[data-step="7"] { top: 460px !important; transform: translate(-80px, -336px) !important; }
  /* 流程点位置（0.8倍） */
  .process-point.point-1 { transform: translate(-22px, -22px) !important; }
  .process-point.point-2 { transform: translate(-50%, -46px) !important; }
  .process-point.point-3 { transform: translate(-36px, -92px) !important; }
  .process-point.point-4 { transform: translate(-65px, -212px) !important; }
  .process-point.point-5 { transform: translate(-80px, -394px) !important; }
  .process-point.point-6 { transform: translate(-50%, -448px) !important; }
  .process-point.point-7 { transform: translate(-23px, -472px) !important; }
  /* 项目成果卡片尺寸 */
  .project-results-inline { width: 280px; right: 12px; bottom: 105px; }
}

@media (max-width: 768px) {
  /* 流程卡片位置（0.7倍） */
  .process-step[data-step="1"] { top: 420px !important; transform: translate(-56px, 109px) !important; }
  .process-step[data-step="2"] { top: 420px !important; transform: translate(-50%, -50px) !important; }
  .process-step[data-step="3"] { top: 420px !important; transform: translate(-28px, 53px) !important; }
  .process-step[data-step="4"] { top: 420px !important; transform: translate(-18px, -84px) !important; }
  .process-step[data-step="5"] { top: 420px !important; transform: translate(-375px, -334px) !important; }
  .process-step[data-step="6"] { top: 420px !important; transform: translate(-105px, -272px) !important; }
  .process-step[data-step="7"] { top: 420px !important; transform: translate(-70px, -293px) !important; }
  /* 流程点位置（0.7倍） */
  .process-point.point-1 { transform: translate(-19px, -20px) !important; }
  .process-point.point-2 { transform: translate(-50%, -42px) !important; }
  .process-point.point-3 { transform: translate(-32px, -82px) !important; }
  .process-point.point-4 { transform: translate(-57px, -186px) !important; }
  .process-point.point-5 { transform: translate(-70px, -340px) !important; }
  .process-point.point-6 { transform: translate(-50%, -388px) !important; }
  .process-point.point-7 { transform: translate(-20px, -408px) !important; }
  /* 项目成果卡片尺寸 */
  .project-results-inline { width: 250px; right: 10px; bottom: 100px; }
}

@media (max-width: 480px) {
  /* 流程卡片位置（0.6倍） */
  .process-step[data-step="1"] { top: 360px !important; transform: translate(-48px, 93px) !important; }
  .process-step[data-step="2"] { top: 360px !important; transform: translate(-50%, -43px) !important; }
  .process-step[data-step="3"] { top: 360px !important; transform: translate(-24px, 45px) !important; }
  .process-step[data-step="4"] { top: 360px !important; transform: translate(-15px, -72px) !important; }
  .process-step[data-step="5"] { top: 360px !important; transform: translate(-321px, -286px) !important; }
  .process-step[data-step="6"] { top: 360px !important; transform: translate(-90px, -232px) !important; }
  .process-step[data-step="7"] { top: 360px !important; transform: translate(-60px, -250px) !important; }
  /* 流程点位置（0.6倍） */
  .process-point.point-1 { transform: translate(-16px, -18px) !important; }
  .process-point.point-2 { transform: translate(-50%, -36px) !important; }
  .process-point.point-3 { transform: translate(-27px, -72px) !important; }
  .process-point.point-4 { transform: translate(-49px, -159px) !important; }
  .process-point.point-5 { transform: translate(-60px, -290px) !important; }
  .process-point.point-6 { transform: translate(-50%, -330px) !important; }
  .process-point.point-7 { transform: translate(-17px, -348px) !important; }
  /* 项目成果卡片尺寸 */
  .project-results-inline { width: 220px; right: 10px; bottom: 95px; }
}

@media (max-width: 360px) {
  /* 流程卡片位置（0.5倍） */
  .process-step[data-step="1"] { top: 320px !important; transform: translate(-40px, 78px) !important; }
  .process-step[data-step="2"] { top: 320px !important; transform: translate(-50%, -36px) !important; }
  .process-step[data-step="3"] { top: 320px !important; transform: translate(-20px, 38px) !important; }
  .process-step[data-step="4"] { top: 320px !important; transform: translate(-13px, -60px) !important; }
  .process-step[data-step="5"] { top: 320px !important; transform: translate(-268px, -238px) !important; }
  .process-step[data-step="6"] { top: 320px !important; transform: translate(-75px, -194px) !important; }
  .process-step[data-step="7"] { top: 320px !important; transform: translate(-50px, -209px) !important; }
  /* 流程点位置（0.5倍） */
  .process-point.point-1 { transform: translate(-14px, -14px) !important; }
  .process-point.point-2 { transform: translate(-50%, -30px) !important; }
  .process-point.point-3 { transform: translate(-23px, -60px) !important; }
  .process-point.point-4 { transform: translate(-41px, -133px) !important; }
  .process-point.point-5 { transform: translate(-50px, -238px) !important; }
  .process-point.point-6 { transform: translate(-50%, -272px) !important; }
  .process-point.point-7 { transform: translate(-15px, -286px) !important; }
  /* 项目成果卡片尺寸 */
  .project-results-inline { width: 200px; right: 8px; bottom: 90px; }
}

/* ========== 智能体验广场 搜索框（玻璃极简风） ========== */
.experience-section .search-box { position: relative; max-width: 820px; margin: 0 auto 18px; }
/* 覆盖全局搜索容器的边框与聚焦阴影，避免出现外围紫色矩形框 */
.experience-section .search-box {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.experience-section .search-box:focus-within {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}
.experience-section .search-input {
	width: 100%;
	padding: 16px 56px 16px 18px;
	font-size: 16px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 14px;
	color: var(--text-light);
	backdrop-filter: blur(12px) saturate(150%);
	outline: none;
	box-shadow: none;
	transition: border-color .2s ease, background .2s ease;
}
.experience-section .search-input::placeholder { color: rgba(255,255,255,0.55); }
.experience-section .search-input:focus { 
	background: rgba(255,255,255,0.10);
	border-color: rgba(255,255,255,0.28);
	outline: none; box-shadow: none;
}
/* 放大镜按钮：与输入框同风格，不使用蓝色 */
.experience-section .search-btn {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 10px;
	color: rgba(255,255,255,0.85);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(12px) saturate(150%);
	transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.experience-section .search-btn:hover,
.experience-section .search-btn:focus-visible {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.28);
	outline: none; box-shadow: none;
	transform: translateY(-50%) scale(1.03);
}
.experience-section .search-btn i { font-size: 18px; line-height: 1; }

@media (max-width: 480px) {
	.experience-section .search-input { padding: 14px 48px 14px 14px; font-size: 15px; border-radius: 12px; }
	.experience-section .search-btn { width: 34px; height: 34px; border-radius: 8px; right: 8px; }
}

/* 重新实现的Home按钮 - 定位在核心球45度右上角 */
.ai-engine-section .ai-engine-visualization .home-button {
    position: absolute;
    /* 核心球中心位置 + 45度右上角偏移 */
    left: calc(50% + 260px); /* 核心球中心 + 80px(核心球半径) + 40px(间距) */
    top: calc(50% - 320px);  /* 核心球中心 - 80px(核心球半径) - 40px(间距) */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s ease;
    color: #fff;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 0 10px rgba(255, 255, 255, 0.04);
    transform: translate(-50%, -50%);
}

.ai-engine-section .ai-engine-visualization .home-button:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 0 15px rgba(255, 255, 255, 0.06);
}

.ai-engine-section .ai-engine-visualization .home-button i {
    font-size: 22px;
    opacity: 0.86;
}

/* Home按钮响应式设计 */
@media (max-width: 1200px) {
    .ai-engine-section .ai-engine-visualization .home-button {
        left: calc(50% + 220px);
        top: calc(50% - 280px);
        width: 40px;
        height: 40px;
    }
    
    .ai-engine-section .ai-engine-visualization .home-button i {
        font-size: 20px;
    }
}

@media (max-width: 968px) {
    .ai-engine-section .ai-engine-visualization .home-button {
        left: calc(50% + 180px);
        top: calc(50% - 240px);
        width: 38px;
        height: 38px;
    }
    
    .ai-engine-section .ai-engine-visualization .home-button i {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .ai-engine-section .ai-engine-visualization .home-button {
        left: calc(50% + 140px);
        top: calc(50% - 200px);
        width: 36px;
        height: 36px;
    }
    
    .ai-engine-section .ai-engine-visualization .home-button i {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .ai-engine-section .ai-engine-visualization .home-button {
        left: calc(50% + 100px);
        top: calc(50% - 160px);
        width: 32px;
        height: 32px;
    }
    
    .ai-engine-section .ai-engine-visualization .home-button i {
        font-size: 14px;
    }
}

/* AI引擎容器响应式调整 */
@media (max-width: 1200px) {
    .ai-engine-section .ai-engine-visualization {
        height: 700px;
        max-width: 700px;
    }
}

@media (max-width: 968px) {
    .ai-engine-section .ai-engine-visualization {
        height: 650px;
        max-width: 650px;
    }
}

@media (max-width: 768px) {
    .ai-engine-section .ai-engine-visualization {
        height: 600px;
        max-width: 600px;
    }
}

@media (max-width: 480px) {
    .ai-engine-section .ai-engine-visualization {
        height: 550px;
        max-width: 550px;
    }
}

/* 涡旋缓慢旋转，增强不规则尾流感 */
@keyframes heroVortex {
    0%   { transform: rotate(0deg); opacity: 0.9; }
    50%  { transform: rotate(-2deg); opacity: 1; }
    100% { transform: rotate(-4deg); opacity: 0.9; }
}

/* ===== 首页英雄区星空层级修正，确保星光+流星可见 ===== */
.achievements-section.hero-section .global-particle-canvas {
	/* 将星空画布置于覆盖层之上、内容之下 */
	z-index: 5 !important;
	opacity: 0.8; /* 与其他页面一致 */
}

/* 降低首页英雄区彩色滤镜覆盖层的层级，避免压住星空 */
.achievements-section.hero-section.global-particle-section::before {
	z-index: 0 !important;
}

/* ===== 覆盖增强：Demo卡片长文自动换行且始终左右双栏 ===== */
.demo-display-section .demo-card {
	flex-wrap: nowrap !important; /* 禁止换行到下一行 */
	align-items: stretch !important;
	/* 确保卡片有足够高度容纳所有内容 */
	height: auto !important;
	min-height: 280px !important;
}
.demo-display-section .demo-left-column,
.demo-display-section .demo-content {
	min-width: 0 !important; /* 允许内容收缩，避免把右侧挤到下一行 */
	/* 确保左侧列有足够高度 */
	min-height: 200px !important;
}
/* 文本智能换行，任何位置都可断行，防止撑破布局 */
.demo-display-section .demo-title,
.demo-display-section .demo-description {
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	line-break: anywhere !important;
}
/* 提升描述可视行数也不破坏布局（可按需调节行数） */
.demo-display-section .demo-description {
	-webkit-line-clamp: 5 !important;
	line-clamp: 5 !important;
}
/* 右侧视频栏固定尺寸，保证始终占右侧一列 */
.demo-display-section .demo-right-column {
	flex: 0 0 220px !important;
	width: 220px !important;
	min-width: 220px !important;
	max-width: 220px !important;
}
.demo-display-section .demo-video-placeholder { height: 160px !important; }

/* === 强制保持 Demo 卡片左右双栏（覆盖移动端 column 设置） === */
.experience-section .demo-display-section .demo-card {
	flex-direction: row !important;
	/* 确保卡片有足够高度，按钮不会溢出 */
	min-height: 240px !important;
	height: auto !important;
}

/* Demo分隔线和标题样式 */
.demo-separator {
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	margin: 16px 0 12px 0;
	position: relative;
}

.other-demos-title {
	text-align: center;
	margin-bottom: 18px;
	color: rgba(255,255,255,0.8);
	font-size: 18px;
	font-weight: 500;
	position: relative;
}

.other-demos-title::before,
.other-demos-title::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 60px;
	height: 1px;
	background: rgba(255,255,255,0.2);
}

.other-demos-title::before {
	left: -80px;
}

.other-demos-title::after {
	right: -80px;
}

/* 固定右侧视频列宽度，防止在小屏被拉伸为整行 */
.experience-section .demo-display-section .demo-right-column {
	flex: 0 0 220px !important;
	width: 220px !important;
	min-width: 220px !important;
	max-width: 220px !important;
}

/* 确保所有屏幕尺寸都保持左右布局 */
@media (max-width: 1200px) {
	.experience-section .demo-display-section .demo-card {
		flex-direction: row !important;
	}
	.experience-section .demo-display-section .demo-right-column {
		flex: 0 0 200px !important;
		width: 200px !important;
		min-width: 200px !important;
		max-width: 200px !important;
	}
}

@media (max-width: 768px) {
	/* 再次明确小屏也保持左右双栏 */
	.experience-section .demo-display-section .demo-card {
		flex-direction: row !important;
	}
	.experience-section .demo-display-section .demo-right-column {
		flex: 0 0 180px !important;
		width: 180px !important;
		min-width: 180px !important;
		max-width: 180px !important;
	}
}

@media (max-width: 480px) {
	/* 超小屏也保持左右双栏 */
	.experience-section .demo-display-section .demo-card {
		flex-direction: row !important;
		padding: 12px !important;
		gap: 12px !important;
		min-height: 200px !important;
	}
	.experience-section .demo-display-section .demo-right-column {
		flex: 0 0 140px !important;
		width: 140px !important;
		min-width: 140px !important;
		max-width: 140px !important;
	}
	.experience-section .demo-display-section .demo-video-placeholder {
		height: 140px !important;
	}
	.experience-section .demo-display-section .demo-title {
		font-size: 16px !important;
	}
	.experience-section .demo-display-section .demo-description {
		font-size: 13px !important;
		-webkit-line-clamp: 4 !important;
		line-clamp: 4 !important;
	}
}

/* === CTA 简约透明玻璃样式覆盖 & 间距优化 === */
/* 缩小与上方 AI 引擎+Demo 展示区域的间距 */
.experience-section + .cta-section {
	margin-top: -200px;
}
/* 调整CTA上下内边距更紧凑 */
.cta-section {
	padding-top: 36px !important;
	padding-bottom: 48px !important;
}
/* 玻璃化：去除深色渐变，改为半透明玻璃卡片 */
.cta-section.global-particle-section .cta-content {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.16) !important;
	border-radius: 16px !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}

/* === 覆盖：Demo描述支持滚动，保持卡片尺寸不变 === */
.experience-section .demo-display-section .demo-description {
	/* 取消行数裁剪，改为固定高度 + 滚动 */
	display: block !important;
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
	-webkit-box-orient: initial !important;
	/* 高度区间：最小保证版面整洁，最大不挤压按钮 */
	min-height: 100px !important;
	max-height: 150px !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	padding-right: 8px !important; /* 给滚动条留空间 */
}
/* 自定义描述区滚动条 */
.experience-section .demo-display-section .demo-description::-webkit-scrollbar { width: 0; height: 0; }
.experience-section .demo-display-section .demo-description::-webkit-scrollbar-track { background: transparent; border-radius: 0; }
.experience-section .demo-display-section .demo-description::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
.experience-section .demo-display-section .demo-description::-webkit-scrollbar-thumb:hover { background: transparent; }
/* Firefox */
.experience-section .demo-display-section .demo-description { scrollbar-width: none; scrollbar-color: transparent transparent; }
@media (max-width: 768px) {
	.experience-section .demo-display-section .demo-description {
		max-height: 120px !important;
	}
}
@media (max-width: 480px) {
	.experience-section .demo-display-section .demo-description {
		max-height: 110px !important;
	}
	
	/* 移动端播放图标优化 */
	.demo-display-section .play-icon {
		width: 38px !important;
		height: 38px !important;
	}
	
	.demo-display-section .play-icon i {
		font-size: 17px !important;
	}
}

/* === 全局响应式保护规则（极小屏/极端缩放适配）=== */
html, body { overflow-x: hidden; }
img, video, canvas, iframe { max-width: 100%; height: auto; }

/* 超小屏（<=400px）下，Demo卡片允许退回上下布局，避免横向溢出 */
@media (max-width: 400px) {
	.experience-section .demo-display-section .demo-card { flex-direction: column !important; }
	.experience-section .demo-display-section .demo-right-column {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.experience-section .demo-display-section .demo-video-placeholder { height: 120px !important; }
	.experience-section .demo-display-section .demo-title { font-size: 15px !important; }
	.experience-section .demo-display-section .demo-description { max-height: 120px !important; }
	
	/* 移动端播放图标优化 */
	.demo-display-section .play-icon {
		width: 35px !important;
		height: 35px !important;
	}
	
	.demo-display-section .play-icon i {
		font-size: 16px !important;
	}
}



/* 防止标题与长文造成溢出 */
.experience-section .demo-display-section .demo-title,
.experience-section .demo-display-section .demo-description { word-break: break-word; overflow-wrap: anywhere; }

/* Demo通知样式 */
.demo-notification .notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.demo-notification .notification-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px;
    margin-left: auto;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.demo-notification .notification-close:hover {
    opacity: 1;
}

.demo-notification .notification-close i {
    font-size: 16px;
}

/* ====== 三角光雾（右侧）样式与动画 ====== */
:root {
	--in-dur: 0s; /* 右侧三角形入场动画时长 */
	--rev-dur: .28s;
}

/* ================= 用户使用评价区域 ================= */
.reviews-section { background: transparent; padding: 60px 0 40px; position: relative; overflow: hidden; }
/* 撑满页面宽度 */
.reviews-section .container{ max-width: 100%; padding-left: 0; padding-right: 0; }

.reviews-card { position: relative; background: transparent; border: none; border-radius: 0; padding: 0; overflow: visible; }

.reviews-marquee { position: relative; height: 140px; overflow: hidden; }
.reviews-marquee .track { position: relative; white-space: nowrap; display: block; overflow: hidden; height: 40px; }
.reviews-marquee .t1 { margin-top: 0; }
.reviews-marquee .t2 { margin-top: 10px; filter: brightness(1.1); }
.reviews-marquee .t3 { margin-top: 10px; filter: brightness(1.05); }

.reviews-marquee .items { display: inline-flex; gap: 0; padding-left: 28px; will-change: transform; animation: marquee var(--dur,50s) linear var(--delay,0s) infinite; }
.reviews-marquee .items.clone { animation: marquee var(--dur,50s) linear infinite; animation-delay: calc(var(--dur) / -2); }

.review-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 1;
    position: relative;
    margin-right: 60px; /* 缩小基础间距 */
}

/* 左侧微光点 */
.review-item::before{
    content:''; width:6px; height:6px; border-radius:50%;
    background: linear-gradient(135deg,#ffffff,#d9e5ff);
    box-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 16px rgba(255,255,255,.35);
}

/* 无缝循环：两份内容错半周期，消除换挡卡顿 */
@keyframes marquee{ 0%{ transform: translate3d(0,0,0); } 100%{ transform: translate3d(-100%,0,0); } }

@media (max-width: 768px){
    .reviews-marquee { height: 140px; }
    .review-item { font-size: 13px; padding: 8px 12px; }
}

/* 模拟"随机"间距：用多组 nth-child 打散间距，让相邻间距不一致 */
.reviews-marquee .items .review-item:nth-child(3n)   { margin-right: 40px; }
.reviews-marquee .items .review-item:nth-child(4n)   { margin-right: 80px; }
.reviews-marquee .items .review-item:nth-child(5n)   { margin-right: 60px; }
.reviews-marquee .items .review-item:nth-child(7n)   { margin-right: 100px; }
.reviews-marquee .items .review-item:nth-child(11n)  { margin-right: 120px; }
.reviews-marquee .items .review-item:last-child      { margin-right: 28px; }

/* 隧道特效响应式样式 */
@media (max-width: 1200px) {
    .hero-right-tunnel {
        right: -25%; /* 中等屏幕，稍微减少移动距离 */
        width: 125%;
    }
    .hero-right-tunnel #tunnel-canvas {
        filter: blur(0.3px);
        transform: translateX(20%); /* 调整Canvas位置 */
    }
}

@media (max-width: 768px) {
    .hero-right-tunnel {
        right: -20%; /* 平板屏幕，进一步减少移动距离 */
        width: 120%;
    }
    .hero-right-tunnel #tunnel-canvas {
        filter: blur(0.2px);
        transform: translateX(17%); /* 调整Canvas位置 */
    }
}

@media (max-width: 480px) {
    .hero-right-tunnel {
        right: -15%; /* 手机屏幕，最小移动距离 */
        width: 115%;
    }
    .hero-right-tunnel #tunnel-canvas {
        filter: blur(0.1px);
        transform: translateX(13%); /* 调整Canvas位置 */
    }
}

/* 副标题响应式缩放通用规则 */
/* 
 * 响应式缩放优化 - 不影响位置计算
 * 
 * 优化说明：
 	 * 1. 副标题位置使用百分比定位：left: calc(50% - 15% - 350px)
	 * 2. 主标题位置：页面中心（50%）
	 * 3. 副标题位置：页面中心左侧15%位置，再向左移动350px
	 * 4. 差值始终为15%，随屏幕宽度按比例变化
	 * 5. 不再需要在各断点下单独设置位置，自动响应式适配
	 * 6. 缩放效果不影响位置关系，只改变视觉大小
 */
@media (max-width: 1400px) {
    .hero-subline { transform: translateX(-30%) translateX(30px) scale(0.85); }
}

@media (max-width: 1200px) {
    .hero-subline { transform: translateX(-30%) translateX(30px) scale(0.75); }
}

@media (max-width: 968px) {
    .hero-subline { transform: translateX(-30%) translateX(30px) scale(0.65); }
}

@media (max-width: 768px) {
    .hero-subline { transform: translateX(-30%) translateX(30px) scale(0.50); }
}

@media (max-width: 480px) {
    .hero-subline { transform: translateX(-30%) translateX(30px) scale(0.40); }
}

@media (max-width: 360px) {
    .hero-subline { transform: translateX(-30%) translateX(30px) scale(0.30); }
}

/* 响应式位置微调已移除 - 现在使用统一的对齐系统 */

@media (max-width: 360px) {
    .main-title { font-size: clamp(24px, 7vw, 32px); } /* 360px以下主标题字体大小优化 */
    .hero-subline .subline-link { font-size: clamp(2.4px, 0.7vw, 3.2px); } /* 保持与主标题10%的比例关系 */
    
    .hero-subline .subtitle-container {
        padding: 3px 10px; /* 360px以下最小内边距 */
        gap: 4px;
    }
    
    .hero-subline .decoration-arrow {
        border-left-width: 3px;
        border-top-width: 1.5px;
        border-bottom-width: 1.5px;
    }
}

/* 主标题四角星装饰 */
.title-star {
    position: absolute;
    top: 180px; /* 位于主标题下方20px处，而不是上方 */
    right: -20px; /* 相对于主标题右边缘定位，考虑主标题的translateX变换 */
    z-index: -1; /* 降低层级，避免遮挡副标题等交互元素 */
    opacity: 0; /* 初始隐藏 */
    transform: scale(0.5);
    transition: all 0.6s ease;
}

.title-star svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

/* 四角星闪烁动画 */
@keyframes starTwinkle {
    0%, 100% { 
        opacity: 1; 
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }
    25% { 
        opacity: 0.3; 
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
    }
    50% { 
        opacity: 0.8; 
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1));
    }
    75% { 
        opacity: 0.5; 
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    }
}

/* 四角星出现后的状态 */
.title-star.visible {
    opacity: 1;
    transform: scale(1);
    animation: starTwinkle 3s ease-in-out infinite;
}

/* 响应式调整四角星位置 - 基于top: 180px基准值优化 */
@media (max-width: 1400px) {
    .title-star {
        top: 160px; /* 1400px以下稍微上移 */
        right: -15px; /* 相对于主标题右边缘定位 */
    }
}

@media (max-width: 1200px) {
    .title-star {
        top: 140px; /* 1200px以下继续上移 */
        right: -10px; /* 相对于主标题右边缘定位 */
    }
}

@media (max-width: 968px) {
    .title-star {
        top: 120px; /* 968px以下进一步上移 */
        right: -5px; /* 相对于主标题右边缘定位 */
    }
}

@media (max-width: 768px) {
    .title-star {
        top: 100px; /* 768px以下继续上移 */
        right: 0px; /* 相对于主标题右边缘定位 */
    }
}

@media (max-width: 480px) {
    .title-star {
        top: 80px; /* 480px以下进一步上移 */
        right: 5px; /* 相对于主标题右边缘定位 */
    }
}

@media (max-width: 360px) {
    .title-star {
        top: 60px; /* 360px以下最小屏幕上移更多 */
        right: 8px; /* 相对于主标题右边缘定位 */
    }
}

/* 新增：英雄区副标题（可点击跳转服务流程） */
.hero-subline {
	margin-top: 20px; /* 与主标题保持适当间距 */
	max-width: 820px;
	text-align: left;
	/* 改为相对定位，继承父容器的左对齐设置 */
	position: relative; /* 改为相对定位，继承父容器的text-align */
	z-index: 9999;
	/* 向左移动43% - 与主标题的50%保持7%的差异，再向右移动5% */
	left: 3%; /* 左对齐，与主标题左边缘对齐 */
	transform: translateX(-43%) translateX(30px); /* 向左移动43%后再向右移动30px */
	/* 
	 * 主副标题统一对齐系统：
	 * - 主标题：transform: translateX(-50%) = 向左移动50%
	 * - 副标题：transform: translateX(-43%) = 向左移动43%
	 * - 两者保持7%的差异，在任何屏幕尺寸下都保持一致
	 * - 通过margin-top控制垂直间距
	 */
	/* 添加响应式缩放支持 - 以中心为基准点，确保缩放不影响位置关系 */
	transform-origin: center center;
	transition: all 0.3s ease;
}

/* 副标题容器 - 白色长条圆角框 */
.hero-subline .subtitle-container {
	display: inline-flex;
	align-items: center;
	/* 简约透明玻璃样式 */
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 25px;
	padding: 8px 20px;
	/* 玻璃质感阴影效果 */
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 4px 16px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	/* 移除原有的绝对定位，使用相对定位 */
	position: relative;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
	gap: 12px;
	/* 添加响应式缩放支持 - 以左侧为基准点，确保缩放不影响位置关系 */
	transform-origin: left center;
	will-change: transform;
	/* 为青光效果设置 */
	overflow: hidden;
}

.hero-subline .subtitle-container:hover {
	/* 悬停时玻璃效果增强 */
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 
		0 12px 40px rgba(0, 0, 0, 0.15),
		0 6px 20px rgba(0, 0, 0, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

/* 副标题装饰元素容器 */
.hero-subline .subtitle-decoration {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* 左侧圆点装饰 - 已隐藏 */
.hero-subline .decoration-dot {
	display: none; /* 去掉左边的小圆点 */
}

/* 左侧箭头装饰 */
.hero-subline .decoration-arrow {
	width: 0;
	height: 0;
	border-left: 6px solid rgba(255, 255, 255, 0.8);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	opacity: 0.7;
	transition: all 0.3s ease;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
	position: relative;
	z-index: 3; /* 确保装饰在青光效果之上 */
}

/* 悬停时装饰元素效果 */
.hero-subline .subtitle-container:hover .decoration-arrow {
	opacity: 1;
	transform: scale(1.1);
}

/* 装饰元素进入动画 */
.hero-subline .subtitle-container .decoration-arrow {
	animation: arrowSlideIn 0.6s ease-out 0.5s both;
}



@keyframes arrowSlideIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 0.7;
		transform: translateX(0);
	}
}

.hero-subline .subline-link {
	/* 玻璃样式下的字体样式：白色、清晰 */
	font-size: clamp(12px, 1.2vw, 16px); /* 减小字体大小，确保与主标题比例协调 */
	font-weight: 500; /* 改为中等粗细的字重 */
	text-decoration: none;
	display: inline-block;
	/* 移除原有的margin，因为已经移到容器上 */
	margin: 0;
	position: relative;
	/* 透明玻璃上使用更亮的灰色文字 */
	color: rgba(200, 200, 200, 0.95);
	/* 添加轻微文字阴影提升可读性 */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	z-index: 3; /* 确保文字在青光效果之上 */
}

.hero-subline .subline-link:hover {
	/* 悬停时文字更亮 */
	color: rgba(240, 240, 240, 1);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 副标题青光闪过效果 */
.hero-subline .subtitle-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(14, 241, 253, 0.12), transparent);
	transition: left 0.6s ease;
	z-index: 2; /* 在背景之上，内容之下 */
	pointer-events: none;
	border-radius: 25px; /* 与容器圆角一致 */
}

.hero-subline .subtitle-container:hover::after {
	left: 100%;
}

@media (max-width: 400px) {
	.main-title { font-size: clamp(28px, 8vw, 36px); } /* 400px以下主标题字体大小优化 */
	.hero-subline .subline-link { font-size: clamp(2.8px, 0.8vw, 3.6px); } /* 保持与主标题10%的比例关系 */
	
	.hero-subline .subtitle-container {
		padding: 4px 12px; /* 400px以下进一步减小内边距 */
		gap: 5px;
	}
	
	.hero-subline .decoration-arrow {
		border-left-width: 3.5px;
		border-top-width: 2px;
		border-bottom-width: 2px;
	}
}

@media (max-width: 480px) {
	.main-title {
		font-size: clamp(32px, 9vw, 40px); /* 统一字体大小，确保与副标题比例协调 */
		margin-left: 0; /* 左对齐显示 */
		transform: translateX(-40%); /* 向左移动40% */
		margin-top: 0; /* 与三角形顶点对齐 */
		/* 移动端保持从左到右渐变亮度效果，"奇点"更加明亮 */
		background: linear-gradient(
			to right,
			#333333 0%,           /* 左侧"智"字 - 深灰色 */
			#555555 20%,          /* "域"字开始 - 中灰色 */
			#999999 40%,          /* "域"字结束/"奇"字开始 - 明显调亮 */
			#cccccc 60%,          /* "奇"字中部 - 大幅调亮 */
			#f0f0f0 80%,          /* "点"字开始 - 极亮灰色 */
			#FFFFFF 100%          /* "点"字结束 - 最亮的纯白色 */
		);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	

	/* 480px断点副标题保持统一对齐系统 - 无需额外设置 */
	
	.hero-subline .subtitle-container {
		padding: 5px 14px; /* 进一步减小内边距，确保在小屏幕上不会过长 */
		gap: 6px;
	}
	
	.hero-subline .subtitle-decoration {
		gap: 5px;
	}
	
	.hero-subline .decoration-arrow {
		border-left-width: 4px;
		border-top-width: 2.5px;
		border-bottom-width: 2.5px;
	}
	
	.hero-subline .subline-link {
		font-size: clamp(3.2px, 0.9vw, 4px); /* 保持与主标题10%的比例关系 */
		/* 移动端保持黑色字体 */
		color: #333333;
	}
}

/* 案例卡片青色光效 */
.case-content-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(14, 241, 253, 0.06), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.case-content-item:hover::after {
    left: 100%;
}

/* 装饰性播放图标样式 - 位于视频上层，无交互功能 */
.demo-video-decoration-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; /* 缩小30%：40px × 0.7 = 28px */
    height: 28px; /* 缩小30%：40px × 0.7 = 28px */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 13px; /* 缩小30%：18px × 0.7 = 13px */
    z-index: 2; /* 位于视频上层，但低于video-overlay */
    pointer-events: none; /* 禁用交互功能 */
    opacity: 0.6; /* 半透明效果 */
    transition: opacity 0.3s ease;
}

.demo-video-decoration-icon i {
    color: #000;
    font-size: 18px;
    line-height: 1;
}

/* 视频播放时隐藏装饰图标 */
.demo-video-container:not(.paused) .demo-video-decoration-icon {
    opacity: 0;
}

/* 全屏状态下隐藏装饰图标 */
.demo-video-container.fullscreen .demo-video-decoration-icon {
    display: none;
}

/* 响应式调整装饰图标 */
@media (max-width: 768px) {
    .demo-video-decoration-icon {
        width: 25px; /* 缩小30%：35px × 0.7 = 25px */
        height: 25px; /* 缩小30%：35px × 0.7 = 25px */
    }
    
    .demo-video-decoration-icon i {
        font-size: 11px; /* 缩小30%：16px × 0.7 = 11px */
    }
}

@media (max-width: 480px) {
    .demo-video-decoration-icon {
        width: 22px; /* 缩小30%：32px × 0.7 = 22px */
        height: 22px; /* 缩小30%：32px × 0.7 = 22px */
    }
    
    .demo-video-decoration-icon i {
        font-size: 11px; /* 缩小30%：15px × 0.7 = 11px */
    }
}

/* ===== 视频控制样式 ===== */
.demo-video-container {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.demo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 3; /* 确保在装饰图标之上 */
}

.video-overlay:hover {
    background: rgba(0, 0, 0, 0.5);
}

.play-button {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.play-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.play-button i {
    font-size: 24px;
    color: #333;
    margin-left: 2px; /* 播放图标稍微向右偏移，视觉更居中 */
}

.play-button.playing {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(0.9);
}



/* 全屏状态样式 */
.demo-video-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    border-radius: 0;
}

.demo-video-container.fullscreen .demo-video {
    object-fit: contain;
}

.demo-video-container.fullscreen .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.demo-video-container.fullscreen .play-button {
    width: 80px;
    height: 80px;
}

.demo-video-container.fullscreen .play-button i {
    font-size: 32px;
}



/* 视频控制按钮样式 */
.video-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.control-btn {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.control-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.control-btn i {
    font-size: 14px;
}

/* 全屏状态下显示控制按钮 */
.demo-video-container.fullscreen .video-controls {
    opacity: 1;
}

/* 全屏状态样式 */
.demo-video-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    border-radius: 0;
}

.demo-video-container.fullscreen .demo-video {
    object-fit: contain;
}

.demo-video-container.fullscreen .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.demo-video-container.fullscreen .play-button {
    width: 80px;
    height: 80px;
}

.demo-video-container.fullscreen .play-button i {
    font-size: 32px;
}

.demo-video-container.fullscreen .video-controls {
    bottom: 20px;
    right: 20px;
}

.demo-video-container.fullscreen .control-btn {
    width: 40px;
    height: 40px;
}

.demo-video-container.fullscreen .control-btn i {
    font-size: 18px;
}

/* 全屏状态下确保视频可以直接点击 */
.demo-video-container.fullscreen .demo-video {
    pointer-events: auto;
    cursor: pointer;
}

/* 全屏状态下视频覆盖层不阻止点击 */
.demo-video-container.fullscreen .video-overlay {
    pointer-events: none;
}

/* 全屏状态下播放按钮可以点击 */
.demo-video-container.fullscreen .play-button {
    pointer-events: auto;
    cursor: pointer;
}

/* 非全屏状态下视频播放时隐藏播放按钮 */
.demo-video-container:not(.paused) .video-overlay {
    opacity: 0;
    pointer-events: none;
}

.demo-video-container:not(.paused):hover .video-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* 非全屏状态下视频播放时隐藏播放按钮 */
.demo-video-container:not(.paused) .video-overlay {
    opacity: 0;
    pointer-events: none;
}

.demo-video-container:not(.paused):hover .video-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .demo-video-container {
        height: 140px;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
    }
    
    .play-button i {
        font-size: 20px;
    }
    
    .control-btn {
        width: 28px;
        height: 28px;
    }
    
    .control-btn i {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .demo-video-container {
        height: 120px;
    }
    
    .play-button {
        width: 45px;
        height: 45px;
    }
    
    .play-button i {
        font-size: 18px;
    }
    
    .video-controls {
        bottom: 8px;
        right: 8px;
        gap: 6px;
    }
    
    .control-btn {
        width: 26px;
        height: 26px;
    }
    
    .control-btn i {
        font-size: 11px;
    }
}

/* 粒子波浪特效装饰区域样式 */
.particle-wave-decoration {
    position: absolute;
    top: 85%;
    right: 0%;
    width: 100vw;
    height: 562px;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
    transform: translateY(-50%);
    display: none; /* 暂时隐藏粒子波浪动画 */
}

.particle-wave-decoration canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 100;
}

/* 确保相关区块在中层，低于变幻球体特效但高于背景 */
.cta-section {
    position: relative;
    z-index: 10;
}

.philosophy-section {
    position: relative;
    z-index: 10;
}

.architecture-section {
    position: relative;
    z-index: 1;
}

.cases-section {
    position: relative;
    z-index: 1;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .particle-wave-decoration {
        top: 50%;
        right: 0%;
        width: 100vw;
        height: 450px;
    }
}

@media (max-width: 968px) {
    .particle-wave-decoration {
        top: 50%;
        right: 0%;
        width: 100vw;
        height: 405px;
    }
}

@media (max-width: 768px) {
    .particle-wave-decoration {
        top: 50%;
        right: 0%;
        width: 100vw;
        height: 337px;
    }
}

@media (max-width: 480px) {
    .particle-wave-decoration {
        top: 50%;
        right: 0%;
        width: 100vw;
        height: 225px;
    }
}

/* ===== 流程卡片位置强化规则 - 确保手动调整位置始终生效 ===== */
/* 强制确保流程卡片位置不被其他规则覆盖 */
.process-step[data-step="1"],
.process-step[data-step="2"],
.process-step[data-step="3"],
.process-step[data-step="4"],
.process-step[data-step="5"],
.process-step[data-step="6"],
.process-step[data-step="7"] {
    position: absolute !important;
    z-index: 10 !important;
    /* 确保不会被其他transform规则覆盖 */
    transform-origin: center center !important;
    /* 强制清除可能的内联样式影响 */
    box-sizing: border-box !important;
    /* 确保动画完成后位置正确 */
    animation-fill-mode: forwards !important;
    /* 确保动画完成后完全清晰，无模糊效果 */
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
    filter: blur(0) !important;
    -moz-filter: blur(0) !important;
    -ms-filter: blur(0) !important;
}

/* 强制确保流程点位置不被其他规则覆盖 */
.process-point.point-1,
.process-point.point-2,
.process-point.point-3,
.process-point.point-4,
.process-point.point-5,
.process-point.point-6,
.process-point.point-7 {
    position: absolute !important;
    z-index: 8 !important;
    /* 确保不会被其他transform规则覆盖 */
    transform-origin: center center !important;
    /* 强制清除可能的内联样式影响 */
    box-sizing: content-box !important;
    /* 确保动画完成后位置正确 */
    animation-fill-mode: forwards !important;
    /* 确保动画完成后状态正确，无模糊效果 */
    filter: brightness(1) !important;
    -webkit-filter: brightness(1) !important;
    filter: brightness(1) !important;
    -moz-filter: brightness(1) !important;
    -ms-filter: brightness(1) !important;
}

/* 流程卡片相对于服务流程点的位置 - 根据标准图重新调整 */