/*****************************************************************
    Template Name    : Techvia - IT Solutions & Business Services HTML5 Responsive Website Template
    Modified to     : AI智能体深蓝紫色主题
    Version          : 2.0
    Created          : 2024
    File Description : 主CSS文件 - AI深蓝紫色主题
*****************************************************************/

/*****************************************************************

** - 01 - 默认CSS (深色主题)
** - 02 - 预加载器
** - 03 - 导航栏
** - 04 - 首页区域
** - 05 - 关于我们
** - 06 - 服务部分
** - 07 - 技术工作区
** - 08 - 行业标签
** - 09 - 博客部分
** - 10 - 分页
** - 11 - 页面标题
** - 12 - 错误页面
** - 13 - 联系表单
** - 14 - 页脚
** - 15 - 版权信息

*****************************************************************/

/**************************************
 ** - 01 - 默认CSS (深色主题)
 **************************************/
*, *:before, *:after {
	box-sizing: inherit;
}

* {
	scroll-behavior: inherit !important;
}

/* 渐入动画类 */
.fade-in-section {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	transition-delay: 0.2s;
}

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

/* 从左侧滑入 */
.slide-in-left {
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* 从右侧滑入 */
.slide-in-right {
	opacity: 0;
	transform: translateX(60px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* 从底部滑入 */
.slide-in-bottom {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-bottom.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 缩放淡入 */
.scale-in {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* 为服务卡片添加初始动画样式 */
.single-services-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.single-services-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 为案例卡片添加初始动画样式 */
.case-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.case-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 为应用领域的feature-card添加初始动画样式 */
.feature-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.feature-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 延迟类 */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

html, body {
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-family: 'Cabin', sans-serif;
	background: #0a0a1a; /* 深蓝色背景 */
	color: #e0e0ff; /* 浅蓝色文字 */
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

button {
	outline: 0 !important;
}

dl, ol, ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.d-table {
	width: 100%;
	height: 100%;
}

.d-table-cell {
	vertical-align: middle;
}

/* 间距工具类 */
.ptb-100 { padding-top: 100px; padding-bottom: 100px; }
.pb-50 { padding-bottom: 50px; }
.pb-70 { padding-bottom: 70px; }
.pb-100 { padding-bottom: 100px; }
.pt-50 { padding-top: 50px; }
.pt-70 { padding-top: 70px; }
.pt-100 { padding-top: 100px; }

/* 背景类 */
.bg-grey {
	/* 主背景：深蓝渐变 */
	background:
		linear-gradient(135deg, #0d0d1f 0%, #14142e 50%, #0a0a1a 100%),
		radial-gradient(circle at top right, rgba(123, 104, 238, 0.08) 0%, transparent 50%),
		radial-gradient(circle at bottom left, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
	background-attachment: fixed;
	position: relative;
}

/* 为各个section添加装饰性背景 */
/* 移除旧的网格背景，改用浮动光球效果 */

/* 课程介绍视频区域背景 */
.technology-section {
	background:
		linear-gradient(180deg, #0a0a1a 0%, #12122a 100%),
		radial-gradient(circle at 50% 30%, rgba(123, 104, 238, 0.1) 0%, transparent 60%);
	position: relative;
	overflow: hidden;
}

.technology-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 80%;
	height: 200%;
	background: radial-gradient(ellipse, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
	pointer-events: none;
}

/* 核心能力区域背景 */
.services-section {
	position: relative;
}

.services-section::before {
	content: '';
	position: absolute;
	top: 10%;
	right: 15%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	animation: floatLight 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.services-section::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(transparent, rgba(0, 212, 255, 0.03));
	pointer-events: none;
}

/* 应用领域（Tab）区域背景 */
.tab-section {
	background:
		linear-gradient(135deg, #0e0e24 0%, #161630 50%, #0c0c1a 100%);
	position: relative;
}

.tab-section::before {
	content: '';
	position: absolute;
	top: 20%;
	left: 10%;
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	animation: floatLight 10s ease-in-out infinite 2s;
	pointer-events: none;
}

.tab-section::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(transparent, rgba(123, 104, 238, 0.03));
	pointer-events: none;
}

/* 成功案例区域背景 */
.cases-section {
	background:
		linear-gradient(180deg, #0a0a1a 0%, #14142e 100%),
		radial-gradient(circle at 30% 50%, rgba(123, 104, 238, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 70% 50%, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
	position: relative;
}

.cases-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(rgba(123, 104, 238, 0.03), transparent);
	pointer-events: none;
}

.cases-section::after {
	content: '';
	position: absolute;
	bottom: 15%;
	right: 10%;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(255, 107, 157, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	animation: floatLight 9s ease-in-out infinite 1s;
	pointer-events: none;
	z-index: 0;
}

/* 课程亮点（Overview）区域背景 */
.overview-section {
	background:
		linear-gradient(135deg, #0d0d1f 0%, #181832 100%),
		radial-gradient(circle at top, rgba(255, 107, 157, 0.04) 0%, transparent 50%);
	position: relative;
}

.overview-section::before {
	content: '';
	position: absolute;
	top: 15%;
	left: 5%;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(255, 107, 157, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	animation: floatLight 11s ease-in-out infinite 3s;
	pointer-events: none;
	z-index: 0;
}

.overview-section::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(transparent, rgba(255, 107, 157, 0.02));
	pointer-events: none;
}

/* 添加动态光效装饰 */
@keyframes floatLight {
	0%, 100% {
		transform: translateY(0) translateX(0);
		opacity: 0.5;
	}
	33% {
		transform: translateY(-30px) translateX(15px);
		opacity: 0.7;
	}
	66% {
		transform: translateY(-15px) translateX(-10px);
		opacity: 0.6;
	}
}

/* 为各个section添加浮动光球 - 统一在后面定义 */

/* 确保内容在装饰背景之上 */
.section-title,
.services-section .section-title,
.tab-section .section-title,
.cases-section .section-title,
.overview-section .section-title {
	position: relative;
	z-index: 1;
}

/* 确保卡片在装饰背景之上 */
.single-services-item,
.case-card,
.feature-card,
.tab-container,
.timeline-container {
	position: relative;
	z-index: 1;
}

/* 添加边框装饰线 */
.services-section,
.tab-section,
.cases-section,
.overview-section,
.technology-section {
	border-top: 1px solid rgba(123, 104, 238, 0.1);
	border-bottom: 1px solid rgba(123, 104, 238, 0.1);
}

/* 为卡片添加发光边框效果 */
.single-services-item,
.case-card {
	border: 1px solid rgba(123, 104, 238, 0.1);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(10px);
}

.single-services-item:hover,
.case-card:hover {
	border-color: rgba(123, 104, 238, 0.3);
	box-shadow: 0 8px 30px rgba(123, 104, 238, 0.2);
}

/* 为feature-card添加样式 */
.feature-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(0, 212, 255, 0.1);
	border-radius: 8px;
	padding: 15px 20px;
	transition: all 0.3s ease;
}

.feature-card:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(0, 212, 255, 0.3);
	box-shadow: 0 5px 20px rgba(0, 212, 255, 0.15);
}

.section-padding {
	padding: 100px 0;
}

/* 链接样式 */
a {
	text-decoration: none;
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline: 0 !important;
	color: #a0a0ff;
}

a:hover {
	text-decoration: none;
	color: #7b68ee;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.4;
	font-family: 'Dosis', sans-serif;
	color: #ffffff;
}

/* 段落样式 */
p {
	font-size: 16px;
	line-height: 1.7;
	color: #b0b0d0;
	margin-bottom: 15px;
	font-weight: 400;
	letter-spacing: 0.3px;
	font-family: 'Cabin', sans-serif;
}

p:last-child {
	margin-bottom: 0;
}

/* ========================================
   统一按钮样式系统
   ======================================== */

/* 基础按钮样式 */
.btn-unified {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 40px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 30px;
	border: 2px solid;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	outline: none;
	overflow: hidden;
}

/* 主按钮 - 紫色渐变 */
.btn-unified.btn-primary {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	border-color: #7b68ee;
	color: #ffffff;
	box-shadow: 0 8px 25px rgba(123, 104, 238, 0.4);
}

.btn-unified.btn-primary:hover {
	background: linear-gradient(135deg, #8b78fe 0%, #5a4ca9 100%);
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(123, 104, 238, 0.5);
}

/* 次按钮 - 蓝色渐变 */
.btn-unified.btn-secondary {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	border-color: #00d4ff;
	color: #ffffff;
	box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}

.btn-unified.btn-secondary:hover {
	background: linear-gradient(135deg, #00e4ff 0%, #00a9ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(0, 212, 255, 0.5);
}

/* 描边按钮 - 紫色 */
.btn-unified.btn-outline {
	background: transparent;
	border-color: #7b68ee;
	color: #7b68ee;
	box-shadow: none;
}

.btn-unified.btn-outline:hover {
	background: rgba(123, 104, 238, 0.2);
	color: #ffffff;
	border-color: #7b68ee;
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(123, 104, 238, 0.3);
}

/* 描边按钮 - 白色 */
.btn-unified.btn-outline-white {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.8);
	color: #ffffff;
	box-shadow: none;
}

.btn-unified.btn-outline-white:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	border-color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* 小按钮 */
.btn-unified.btn-sm {
	padding: 10px 25px;
	font-size: 14px;
	border-radius: 25px;
}

/* 大按钮 */
.btn-unified.btn-lg {
	padding: 18px 50px;
	font-size: 18px;
	border-radius: 35px;
}

/* 禁用状态 */
.btn-unified:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

/* 按钮图标动画 */
.btn-unified i {
	transition: transform 0.3s ease;
}

.btn-unified:hover i {
	transform: translateX(3px) scale(1.1);
}

/* ========================================
   保留旧按钮样式（向后兼容）
   ======================================== */

.default-btn {
	border: none;
	position: relative;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 30px;
	font-weight: 600;
	font-size: 16px;
	padding: 16px 40px;
	box-shadow: 0 8px 25px rgba(123, 104, 238, 0.4);
	border: 2px solid #7b68ee;
}

.default-btn:hover, .default-btn:focus {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(123, 104, 238, 0.5);
}

.default-btn-one {
	border: none;
	position: relative;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	color: #ffffff;
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 30px;
	font-weight: 600;
	font-size: 16px;
	padding: 16px 40px;
	margin-right: 20px;
	box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
	border: 2px solid #00d4ff;
}

.default-btn-one:hover, .default-btn-one:focus {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(0, 212, 255, 0.5);
}

/* 刷新按钮（用于article-section页面） */
.btn-refresh {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	border: 2px solid #7b68ee;
	padding: 10px 20px;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-refresh:hover {
	background: linear-gradient(135deg, #8b78fe 0%, #5a4ca9 100%);
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(123, 104, 238, 0.3);
}

.btn-refresh i {
	transition: transform 0.3s ease;
}

.btn-refresh:hover i {
	transform: rotate(180deg);
}

/* 操作按钮（用于article-detail页面） */
.btn-action {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 30px;
	background: rgba(26, 26, 58, 0.8);
	color: #b0b0d0;
	border: 2px solid rgba(123, 104, 238, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.btn-action:hover {
	background: rgba(123, 104, 238, 0.2);
	color: #ffffff;
	border-color: rgba(123, 104, 238, 0.5);
	transform: translateY(-2px);
}

/* 区块标题 */
.section-title {
	text-align: center;
	margin-bottom: 65px;
	line-height: 1.5;
}

.section-title h6 {
	font-size: 26px;
	font-weight: 700;
	color: #00d4ff; /* AI蓝色 */
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.section-title h2 {
	font-size: 42px;
	color: #ffffff;
	margin: 10px 0 0 0;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.color-text {
	color: #7b68ee;
}

/*****************************************
 ** - 00 - 返回顶部按钮
 *****************************************/
.go-top {
	position: fixed;
	cursor: pointer;
	top: 0;
	right: 30px;
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	z-index: 4;
	width: 50px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 50%;
	box-shadow: 0 5px 20px rgba(123, 104, 238, 0.3);
}

.go-top.active {
	top: 95%;
	transform: translateY(-98%);
	opacity: 1;
	visibility: visible;
}

.go-top:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(123, 104, 238, 0.4);
}

/**************************************
 ** - 02 - 预加载器
 **************************************/
/**************************************
 ** - 02 - Preloader Section CSS
 **************************************/

.preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader .loader {
	position: relative;
	text-align: center;
	margin: 0 auto;
	width: 80px;
	/*height: 80px;*/
}

.preloader .loader .box {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #7b68ee 0%, #00d4ff 100%);
	animation: animate 1.5s ease-in-out infinite;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 15px;
	box-shadow: 0 0 30px rgba(123, 104, 238, 0.5);
}

.preloader .loader .shadow {
	width: 100%;
	height: 10px;
	background: rgba(123, 104, 238, 0.3);
	position: absolute;
	bottom: -15px;
	left: 0;
	border-radius: 50%;
	animation: shadow 1.5s ease-in-out infinite;
	filter: blur(5px);
}

.preloader::before, .preloader::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #7b68ee;
	transition: .9s;
}

.preloader::after {
	left: auto;
	right: 0;
}

.preloader.preloader-deactivate {
	opacity: 0;
	visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
	width: 0;
}

.preloader.preloader-deactivate .loader {
	opacity: 0;
	visibility: hidden;
}

@keyframes animate {
	0% {
		transform: rotate(0deg) scale(1);
		box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
	}
	50% {
		transform: rotate(180deg) scale(0.8);
		box-shadow: 0 0 40px rgba(123, 104, 238, 0.8);
	}
	100% {
		transform: rotate(360deg) scale(1);
		box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
	}
}

@keyframes shadow {
	0%, 100% {
		transform: scale(1);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

/* 加载文字样式 */
.loading-text {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	margin-top: 100px;
	text-align: center;
	font-family: 'Dosis', sans-serif;
	text-shadow: 0 0 10px rgba(123, 104, 238, 0.5);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

/**************************************
 ** - 04 - 首页区域
 **************************************/
.home-section {
	position: relative;
	z-index: 1;
	height: 100vh;
	/* 使用多层渐变背景 */
	background:
		/* 顶部渐变 */
		linear-gradient(180deg, rgba(123, 104, 238, 0.1) 0%, transparent 40%),
		/* 底部渐变 */
		linear-gradient(0deg, rgba(0, 212, 255, 0.1) 0%, transparent 40%),
		/* 主背景渐变 */
		linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0f0f2f 100%),
		/* 右下角光效 */
		radial-gradient(ellipse at bottom right, rgba(123, 104, 238, 0.15) 0%, transparent 50%),
		/* 左上角光效 */
		radial-gradient(ellipse at top left, rgba(0, 212, 255, 0.12) 0%, transparent 50%);
	background-size:
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 添加网格背景效果 */
.home-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(rgba(123, 104, 238, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(123, 104, 238, 0.03) 1px, transparent 1px);
	background-size: 50px 50px;
	background-position: 0 0;
	animation: gridMove 20s linear infinite;
	z-index: -3;
}

@keyframes gridMove {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 50px 50px;
	}
}

/* 添加动态光斑效果 */
.home-section::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background:
			radial-gradient(circle at 20% 50%, rgba(123, 104, 238, 0.12) 0%, transparent 50%),
			radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 40% 80%, rgba(255, 107, 157, 0.06) 0%, transparent 50%),
			radial-gradient(circle at 60% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 40%);
	z-index: -2;
	animation: bgPulse 8s ease-in-out infinite, lightMove 15s ease-in-out infinite alternate;
}

@keyframes bgPulse {
	0%, 100% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
}

@keyframes lightMove {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(30px, 30px);
	}
}

.main-banner-content {
	padding-top: 50px;
	position: relative;
	z-index: 2;
	text-align: center;
}

.main-banner-content h1 {
	font-size: 60px;
	color: #ffffff;
	margin: 0 0 20px 0;
	font-weight: 800;
	line-height: 1.2;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.main-banner-content p {
	color: #b0b0d0;
	font-size: 20px;
	margin: 0 0 25px 0;
	line-height: 1.6;
}

.main-banner-content .banner-btn {
	margin-top: 35px;
	display: flex;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.video-box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 25px;
}

.video-box .popup-video {
	display: inline-block;
	position: relative;
	z-index: 9;
	font-size: 24px;
	color: #7b68ee;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.video-box:hover .popup-video {
	background: #7b68ee;
	color: #ffffff;
	transform: scale(1.1);
}

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

/**************************************
 ** - 05 - 关于我们
 **************************************/
.about-section {
	position: relative;
	z-index: 1;
}

.about-content {
	padding: 10px;
}

.about-content h6 {
	color: #00d4ff;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.about-content h2 {
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 25px;
	color: #ffffff;
}

.about-content p {
	margin-bottom: 20px;
	color: #ffffff;
}

.about-section .skills {
	margin-top: 35px;
}

.about-section .skills .skill-item {
	margin-bottom: 25px;
}

.about-section .skills .skill-item:last-child {
	margin-bottom: 0;
}

.about-section .skills .skill-item h6 {
	position: relative;
	z-index: 4;
	font-size: 16px;
	letter-spacing: 0px;
	text-transform: capitalize;
	font-weight: 600;
	margin-bottom: 10px;
	color: #ffffff;
}

.about-section .skills .skill-item h6 em {
	float: right;
	font-size: 16px;
	font-style: normal;
	color: #00d4ff;
}

.about-section .skills .skill-item .skill-progress {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.about-section .skills .skill-item .skill-progress .progres {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #7b68ee 0%, #00d4ff 100%);
	transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 4px;
}

.about-btn-box {
	margin-top: 35px;
	display: inline-block;
}

.about-image {
	position: relative;
	text-align: center;
	margin-left: 0;
}

.about-image img {
	border-radius: 15px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.2);
}

.about-image .sub-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	padding: 20px;
	border-radius: 15px;
	max-width: 370px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: rgba(16, 18, 40, 0.9);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.about-image .sub-content img {
	max-width: 135px;
	border-radius: 10px;
	margin-right: 20px;
}

.about-image .sub-content h3 {
	color: #00d4ff;
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 0;
}

.about-image .sub-content span {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
}

/*************************************
 ** - 06 - 服务部分
 *************************************/
.services-section .section-title {
	margin-bottom: 35px;
}

.single-services-item {
	position: relative;
	z-index: 1;
	display: block;
	padding: 40px 30px;
	text-align: left;
	border-radius: 15px;
	background: rgba(16, 18, 40, 0.8);
	margin-top: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.single-services-item:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 20px 40px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
	background: rgba(16, 18, 40, 0.95);
}

.services-icon {
	display: inline-block;
	margin-bottom: 20px;
	transition: 0.5s;
}

.services-icon i {
	color: #00d4ff;
	font-size: 50px;
	transition: 0.5s;
}

.single-services-item:hover .services-icon i {
	color: #7b68ee;
	transform: rotateY(180deg);
}

.single-services-item h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 0;
	color: #ffffff;
	transition: all 0.4s;
}

.single-services-item p {
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 0;
	color: #b0b0d0;
	transition: all 0.4s;
}

/*****************************************
 ** - 08 - 技术工作区
 *****************************************/
.single-technology-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px 10px 20px 10px;
	text-align: center;
	border-radius: 15px;
	background: rgba(16, 18, 40, 0.8);
	margin-bottom: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.single-technology-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
}

.single-technology-item .technology-icon {
	display: inline-block;
	width: 70px;
	margin-right: 10px;
}

.single-technology-item .technology-icon img {
	width: 50px;
}

.single-technology-item h3 {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

/**************************************
 ** - 10 - 行业标签
 **************************************/
.tab .tabs_item {
	display: none;
}

.tab .tabs_item:first-child {
	display: block;
}

.solutions-list-tab .tabs {
	padding-left: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 50px;
	gap: 15px;
}

.solutions-list-tab .tabs li {
	flex: 1;
	/*max-width: 200px;*/
	text-align: center;
}

.solutions-list-tab .tabs li a {
	display: block;
	color: #ffffff;
	background: rgba(16, 18, 40, 0.8);
	font-size: 17px;
	font-weight: 700;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.solutions-list-tab .tabs li.current a,
.solutions-list-tab .tabs li:hover a {
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
	transform: translateY(-5px);
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content h3 {
	font-size: 36px;
	color: #ffffff;
	margin: 0 0 20px 0;
	font-weight: 800;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content p {
	margin: 0 0 20px 0;
	color: #b0b0d0;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list {
	padding-left: 0;
	margin-bottom: 25px;
	margin-top: 25px;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li {
	font-size: 16px;
	color: #b0b0d0;
	list-style-type: none;
	padding-bottom: 12px;
	padding-left: 25px;
	position: relative;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li:last-child {
	padding-bottom: 0;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li i {
	font-size: 16px;
	color: #00d4ff;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 3px;
}

.tab-image {
	text-align: center;
}

.tab-image img {
	border-radius: 15px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.2);
}

/**************************************
 ** - 18 - 博客部分
 **************************************/
.blog-single-item {
	border-radius: 15px;
	overflow: hidden;
	background: rgba(16, 18, 40, 0.8);
	position: relative;
	margin-bottom: 30px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.blog-single-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
}

.blog-single-item .blog-image {
	position: relative;
	overflow: hidden;
}

.blog-single-item .blog-image img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.blog-single-item:hover .blog-image img {
	transform: scale(1.05);
}

.blog-single-item .category-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}

.blog-single-item .blog-description {
	padding: 30px;
	border-top: none;
}

.blog-single-item .blog-description .blog-info {
	padding-left: 0;
	margin-bottom: 15px;
}

.blog-single-item .blog-description .blog-info li {
	list-style-type: none;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	margin-right: 15px;
	color: #00d4ff;
}

.blog-single-item .blog-description .blog-info li:last-child {
	margin-right: 0;
}

.blog-single-item .blog-description .blog-info li i {
	margin-right: 5px;
}

.blog-single-item .blog-description .blog-text h3 {
	color: #ffffff;
	font-size: 22px;
	margin: 10px 0px 15px 0;
	line-height: 1.4;
	font-weight: 700;
	transition: color 0.3s ease;
}

.blog-single-item .blog-description .blog-text h3:hover {
	color: #00d4ff;
}

.blog-single-item .blog-description .blog-text p {
	margin: 0 0 20px 0;
	font-size: 16px;
	color: #b0b0d0;
	line-height: 1.6;
}

.blog-single-item .blog-description .blog-text .blog-btn {
	margin-top: 15px;
}

.blog-single-item .blog-description .blog-text .blog-btn .blog-btn-one {
	display: inline-block;
	font-size: 16px;
	color: #ffffff;
	font-weight: 600;
	padding: 12px 25px;
	border-radius: 8px;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	transition: all 0.3s ease;
}

.blog-single-item .blog-description .blog-text .blog-btn .blog-btn-one:hover {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}

/*****************************************************
 ** - 20 - 分页
 *****************************************************/
.pagination-area {
	margin-top: 40px;
	text-align: center;
}

.pagination-area .page-numbers {
	width: 50px;
	height: 50px;
	margin: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 18, 40, 0.8);
	color: #ffffff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	font-size: 18px;
	font-weight: 700;
	border-radius: 8px;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.1);
}

.pagination-area .page-numbers.current,
.pagination-area .page-numbers:hover,
.pagination-area .page-numbers:focus {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.3);
	transform: translateY(-3px);
}

/************************************************
 ** - 21 - 页面标题
 ************************************************/
.page-title-area {
	position: relative;
	z-index: 1;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
	height: 400px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.page-title-area::before {
	content: "";
	position: absolute;
	z-index: -1;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background:
			radial-gradient(circle at 30% 50%, rgba(123, 104, 238, 0.2) 0%, transparent 50%),
			radial-gradient(circle at 70% 20%, rgba(0, 212, 255, 0.2) 0%, transparent 50%);
}

.page-title-content {
	text-align: center;
	margin-top: 0;
}

.page-title-content h2 {
	margin-bottom: 20px;
	color: #ffffff;
	font-size: 48px;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.page-title-content ul {
	padding-left: 0;
	list-style-type: none;
	margin-top: 15px;
	margin-bottom: 0;
}

.page-title-content ul li {
	color: #b0b0d0;
	display: inline-block;
	position: relative;
	font-weight: 500;
	font-size: 17px;
	margin: 0 15px;
}

.page-title-content ul li a {
	display: inline-block;
	color: #00d4ff;
	transition: 0.3s ease;
}

.page-title-content ul li a:hover {
	color: #7b68ee;
}

.page-title-content ul li::before {
	content: '›';
	position: absolute;
	right: -18px;
	top: 50%;
	transform: translateY(-50%);
	color: #00d4ff;
	font-size: 20px;
}

.page-title-content ul li:last-child::before {
	display: none;
}

/**************************************
 ** - 26 - 联系表单
 **************************************/
.contact-section {
	position: relative;
}

.contact-form .form-group {
	margin-bottom: 30px;
}

.contact-form form .form-control {
	background: rgba(16, 18, 40, 0.8);
	border: none;
	height: 55px;
	font-size: 16px;
	color: #ffffff;
	border-left: 4px solid #7b68ee;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 15px 20px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.contact-form form .form-control:focus {
	border-left: 4px solid #00d4ff;
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	background: rgba(16, 18, 40, 0.9);
}

.contact-form form textarea.form-control {
	height: 180px;
	padding-top: 15px;
	line-height: 1.6;
	resize: none;
}

.contact-form form .btn {
	margin-top: 20px;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	border: none;
	padding: 16px 40px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.3s ease;
	box-shadow: 0 10px 30px rgba(123, 104, 238, 0.3);
}

.contact-form form .btn:hover {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 15px 35px rgba(0, 212, 255, 0.3);
}

/*****************************************
 ** - 30 - 页脚
 *****************************************/
.footer-subscribe-wrapper {
	position: relative;
	z-index: 1;
	background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
}

.footer-subscribe-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
			radial-gradient(circle at 20% 30%, rgba(123, 104, 238, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
	z-index: -1;
}

.footer-logo {
	display: inline-block;
	margin-bottom: 25px;
}

.footer-heading {
	margin-bottom: 25px;
}

.footer-heading h3 {
	font-size: 22px;
	color: #ffffff;
	font-weight: 700;
	margin: 0 0 0 0;
	position: relative;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(123, 104, 238, 0.3);
}

.single-footer-widget .footer-social {
	padding-left: 0;
	margin-bottom: 0;
	margin-top: 20px;
}

.single-footer-widget .footer-social li {
	display: inline-block;
	margin-right: 10px;
}

.single-footer-widget .footer-social li:last-child {
	margin-right: 0;
}

.single-footer-widget .footer-social i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	line-height: 40px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 50%;
	color: #ffffff;
	transition: all 0.3s ease;
	font-size: 18px;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.single-footer-widget .footer-social i:hover {
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
}

.single-footer-widget p {
	font-size: 16px;
	color: #b0b0d0;
	font-weight: 400;
	line-height: 1.7;
}

.single-footer-widget .footer-quick-links {
	padding-left: 0;
	margin-bottom: 0;
}

.single-footer-widget .footer-quick-links li {
	list-style-type: none;
	padding-bottom: 15px;
}

.single-footer-widget .footer-quick-links li:last-child {
	padding-bottom: 0;
}

.single-footer-widget .footer-quick-links li a {
	display: inline-block;
	color: #b0b0d0;
	font-size: 16px;
	font-weight: 400;
	transition: all 0.3s ease;
}

.single-footer-widget .footer-quick-links li a:hover {
	color: #00d4ff;
	padding-left: 10px;
}

.single-footer-widget .footer-info-contact {
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
}

.single-footer-widget .footer-info-contact:last-child {
	margin-bottom: 0;
}

.single-footer-widget .footer-info-contact i {
	color: #00d4ff;
	position: absolute;
	left: 0;
	top: 0px;
	font-size: 20px;
}

.single-footer-widget .footer-info-contact h3 {
	font-size: 16px;
	color: #ffffff;
	font-weight: 600;
	margin: 0 0 8px 0;
}

.single-footer-widget .footer-info-contact span {
	font-size: 16px;
	color: #b0b0d0;
	font-weight: 400;
}

.single-footer-widget .footer-info-contact span a {
	font-size: 16px;
	color: #b0b0d0;
	font-weight: 400;
	transition: color 0.3s ease;
}

.single-footer-widget .footer-info-contact span a:hover {
	color: #00d4ff;
}

/*****************************************
 ** - 31 - 版权信息
 *****************************************/
.copyright-section {
	padding: 35px 0;
	background: rgba(10, 10, 26, 0.9);
	border-top: 1px solid rgba(123, 104, 238, 0.2);
	backdrop-filter: blur(10px);
}

.copyright-section p {
	color: #b0b0d0;
	font-size: 16px;
	margin: 0;
}

.copyright-section p a {
	color: #00d4ff;
	display: inline-block;
	font-weight: 600;
	transition: color 0.3s ease;
}

.copyright-section p a:hover {
	color: #7b68ee;
}

.beian-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
}

.vertical-center {
	display: inline-flex;
	align-items: center;
}

/* 新增：项目详情页样式 */
.project-details-info {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 15px;
	padding: 30px;
	margin-top: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(123, 104, 238, 0.1);
	backdrop-filter: blur(10px);
}

.project-details-info .single-info-box {
	text-align: center;
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid rgba(123, 104, 238, 0.2);
}

.project-details-info .single-info-box:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.project-details-info .single-info-box h4 {
	color: #b0b0d0;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.project-details-info .single-info-box span {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
}

/* 文章内容样式 */
.article-content {
	color: #b0b0d0;
	line-height: 1.8;
	font-size: 17px;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
	color: #ffffff;
	margin-top: 30px;
	margin-bottom: 20px;
}

.article-content p {
	margin-bottom: 20px;
	color: #b0b0d0;
}

.article-content ul,
.article-content ol {
	padding-left: 20px;
	margin: 20px 0;
}

.article-content li {
	margin-bottom: 10px;
	color: #b0b0d0;
}

.article-content blockquote {
	border-left: 4px solid #7b68ee;
	padding-left: 25px;
	margin: 30px 0;
	font-style: italic;
	color: #ffffff;
	font-size: 20px;
	background: rgba(123, 104, 238, 0.1);
	padding: 25px;
	border-radius: 8px;
}

/* 搜索框样式 */
.search-box {
	position: relative;
	margin-bottom: 30px;
}

.search-box input {
	width: 100%;
	padding: 15px 50px 15px 20px;
	background: rgba(16, 18, 40, 0.8);
	border: 1px solid rgba(123, 104, 238, 0.3);
	border-radius: 8px;
	color: #ffffff;
	font-size: 16px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.search-box input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.1);
	border-color: #7b68ee;
}

.search-box i {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #7b68ee;
	pointer-events: none;
}

#refresh-btn {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: #ffffff;
	border: none;
	padding: 12px 25px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 600;
}

#refresh-btn:hover {
	background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}

#refresh-btn i {
	transition: transform 0.3s ease;
}

#refresh-btn:hover i {
	transform: rotate(180deg);
}

/* 响应式设计 */
@media (max-width: 991px) {
	.section-title h2 {
		font-size: 36px;
	}

	.main-banner-content h1 {
		font-size: 48px;
	}

	.solutions-list-tab .tabs {
		flex-direction: column;
		align-items: center;
	}

	.solutions-list-tab .tabs li {
		max-width: 100%;
		width: 100%;
		margin-bottom: 15px;
	}
}

@media (max-width: 767px) {
	.section-title h2 {
		font-size: 32px;
	}

	.main-banner-content h1 {
		font-size: 36px;
	}

	.main-banner-content .banner-btn {
		flex-direction: column;
		align-items: flex-start;
	}

	.video-box {
		margin-left: 0;
		margin-top: 20px;
	}

	.page-title-content h2 {
		font-size: 36px;
	}
}

@media (max-width: 480px) {
	.section-title h2 {
		font-size: 28px;
	}

	.main-banner-content h1 {
		font-size: 32px;
	}

	.page-title-content h2 {
		font-size: 32px;
	}
}
/**************************************
 ** - 优化：课程亮点模块 - 与其他模块协调
 **************************************/

/* 课程亮点主容器 - 与其他section保持一致 */
.overview-section {
	background: transparent;
	border: none;
	box-shadow: none;
	margin: 0;
	position: relative;
}

.overview-section::before,
.overview-section::after {
	content: none; /* 移除装饰性元素 */
}

/* 内容区域 - 保持与about-section一致 */
.overview-content {
	padding: 0;
	position: relative;
	z-index: 2;
}

.overview-content h6 {
	color: #00d4ff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 15px;
	display: inline-block;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.overview-content h2 {
	font-size: 42px;
	color: #ffffff;
	margin: 10px 0 25px 0;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.3;
	padding-bottom: 15px;
	border-bottom: 2px solid rgba(123, 104, 238, 0.3);
}

.overview-content p {
	font-size: 18px;
	color: #b0b0d0;
	line-height: 1.8;
	margin-bottom: 30px;
	padding: 0;
}

/* 亮点列表 - 与services模块协调 */
.features-list {
	position: relative;
	padding-left: 0;
	margin: 30px 0 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.features-list li {
	position: relative;
	padding: 20px;
	margin-bottom: 0;
	background: rgba(16, 18, 40, 0.8);
	border-radius: 12px;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10px);
	list-style: none;
	transform: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.features-list li::before {
	content: none; /* 移除左侧竖条 */
}

.features-list li:hover {
	transform: translateY(-5px);
	background: rgba(26, 26, 58, 0.9);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
}

.features-list li span {
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	text-align: left;
}

.features-list li span::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	width: 24px;
	height: 24px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	color: #ffffff;
	border-radius: 50%;
	font-size: 14px;
	font-weight: bold;
	margin-right: 12px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* 图片区域优化 - 与about-image一致 */
.overview-image {
	position: relative;
	padding: 0;
	text-align: center;
}

.overview-image img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(123, 104, 238, 0.2);
	transform: none;
	transition: all 0.3s ease;
}

.overview-image img:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(123, 104, 238, 0.3);
	border-color: rgba(123, 104, 238, 0.4);
}

/* 响应式设计 */
@media (max-width: 991px) {
	.overview-content h2 {
		font-size: 36px;
	}

	.features-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.overview-image img {
		margin-top: 30px;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {
	.overview-content h2 {
		font-size: 32px;
	}

	.overview-content p {
		font-size: 16px;
	}

	.features-list li {
		padding: 18px;
	}

	.features-list li span {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.overview-content h2 {
		font-size: 28px;
	}

	.features-list li {
		padding: 15px;
	}

	.features-list li span {
		font-size: 14px;
	}

	.features-list li span::before {
		min-width: 20px;
		width: 20px;
		height: 20px;
		font-size: 12px;
		margin-right: 10px;
	}
}

/* 与首页其他部分统一的动画 */
.features-list li {
	animation: fadeInUp 0.5s ease forwards;
	opacity: 0;
}

.features-list li:nth-child(1) { animation-delay: 0.1s; }
.features-list li:nth-child(2) { animation-delay: 0.2s; }
.features-list li:nth-child(3) { animation-delay: 0.3s; }
.features-list li:nth-child(4) { animation-delay: 0.4s; }
.features-list li:nth-child(5) { animation-delay: 0.5s; }
.features-list li:nth-child(6) { animation-delay: 0.6s; }

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

/* 添加与其他模块统一的装饰效果 */
.overview-section .row {
	position: relative;
}

.overview-section .row::before {
	content: '';
	position: absolute;
	width: 80px;
	height: 80px;
	right: -20px;
	bottom: -20px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.1) 0%, transparent 70%);
	z-index: 0;
	opacity: 0.5;
}

/* 为保持一致性，移除之前的复杂动画，采用与其他模块相似的过渡效果 */
.overview-section {
	transition: all 0.3s ease;
}
/**************************************
 ** - 新增：优化布局样式
 **************************************/

/* 关于我们 - 居中布局优化 */
.about-section .about-content.text-center .skills {
	max-width: 600px;
	margin: 40px auto 0;
}

.about-section .skill-item {
	text-align: left;
	margin-bottom: 25px;
}

.about-section .skill-item h6 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.about-section .skill-item h6 em {
	font-style: normal;
	color: #00d4ff;
	font-weight: 700;
	font-size: 18px;
}

/* 课程亮点 - 网格布局 */
.overview-section .features-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	margin-top: 40px;
}

.overview-section .feature-item {
	background: rgba(16, 18, 40, 0.8);
	border: 1px solid rgba(123, 104, 238, 0.2);
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	text-align: left;
	display: flex;
	align-items: flex-start;
}

.overview-section .feature-item:hover {
	transform: translateY(-5px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 10px 30px rgba(123, 104, 238, 0.2);
}

.overview-section .feature-item i {
	color: #00d4ff;
	font-size: 20px;
	margin-right: 15px;
	margin-top: 2px;
	flex-shrink: 0;
}

.overview-section .feature-item span {
	color: #ffffff;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
}

/* 应用领域 - 标签优化 */
.solutions-list-tab .tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 50px;
}

.solutions-list-tab .tabs li {
	flex: 0 0 auto;
}

.solutions-list-tab .tabs li a {
	min-width: 160px;
	text-align: center;
	padding: 15px 25px;
	font-size: 16px;
	white-space: nowrap;
}

/* 移动端菜单栏修复 */
@media (max-width: 991px) {
	/* 确保移动端菜单显示 */
	.techvia-responsive-nav {
		display: block !important;
	}

	.techvia-nav {
		display: none !important;
	}

	/* 移动端菜单按钮 */
	.navbar-toggler {
		display: block !important;
		border: 1px solid rgba(123, 104, 238, 0.3);
		background: rgba(123, 104, 238, 0.1);
		padding: 8px 12px;
		border-radius: 8px;
	}

	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28123, 104, 238, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		width: 24px;
		height: 24px;
	}

	/* 移动端菜单容器 */
	.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: rgba(10, 10, 26, 0.98);
		backdrop-filter: blur(20px);
		border: 1px solid rgba(123, 104, 238, 0.3);
		border-radius: 0 0 15px 15px;
		padding: 15px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	/* 移动端菜单项 */
	.navbar-nav {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.navbar-nav .nav-item {
		margin: 0;
	}

	.navbar-nav .nav-item > a {
		display: block;
		padding: 15px 20px;
		color: rgba(255, 255, 255, 0.9);
		font-size: 16px;
		font-weight: 600;
		border-radius: 10px;
		transition: all 0.3s ease;
	}

	.navbar-nav .nav-item > a:hover,
	.navbar-nav .nav-item.active > a {
		background: rgba(123, 104, 238, 0.2);
		color: #ffffff;
	}

	/* 下拉菜单 */
	.navbar-nav .nav-item .dropdown-menu {
		position: static !important;
		float: none;
		width: 100%;
		background: rgba(16, 18, 40, 0.8);
		border: 1px solid rgba(123, 104, 238, 0.2);
		margin-top: 5px;
		padding: 10px 0;
	}

	.navbar-nav .nav-item .dropdown-menu li a {
		padding: 10px 30px;
		font-size: 15px;
	}

	/* 优化布局响应式 */
	.overview-section .features-list {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.solutions-list-tab .tabs {
		flex-direction: column;
		align-items: center;
	}

	.solutions-list-tab .tabs li {
		width: 100%;
		max-width: 300px;
	}

	.solutions-list-tab .tabs li a {
		width: 100%;
	}
}

/* 小屏幕优化 */
@media (max-width: 576px) {
	.overview-section .feature-item {
		padding: 20px;
	}

	.overview-section .feature-item i {
		font-size: 18px;
		margin-right: 12px;
	}

	.overview-section .feature-item span {
		font-size: 15px;
	}

	.about-section .skill-item h6 {
		font-size: 15px;
	}

	.about-section .skill-item h6 em {
		font-size: 16px;
	}

	.section-title h2 {
		font-size: 32px;
	}

	.section-title h6 {
		font-size: 15px;
	}
}

/* 移动端菜单栏激活状态 */
.navbar-collapse.show {
	display: block !important;
}









/**************************************
 ** 大胆布局调整 - 去除图片后的创意设计
 **************************************/

/* 1. 课程介绍部分 - 现代卡片式设计 */
.about-section {
	position: relative;
	overflow: hidden;
}

.about-section::before {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.2) 0%, transparent 70%);
	top: 10%;
	left: 5%;
	z-index: 0;
}

.about-section::after {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
	bottom: 10%;
	right: 5%;
	z-index: 0;
}

.about-content {
	position: relative;
	z-index: 2;
	padding: 50px;
	background: rgba(16, 18, 40, 0.6);
	border-radius: 25px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(20px);
	box-shadow:
			0 20px 50px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.about-content h6 {
	color: #00d4ff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
	display: inline-block;
	padding: 8px 20px;
	background: rgba(0, 212, 255, 0.1);
	border-radius: 50px;
	border: 1px solid rgba(0, 212, 255, 0.3);
}

.about-content h2 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	margin: 20px 0 30px 0;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.about-content > p {
	font-size: 20px;
	line-height: 1.8;
	color: #ffffff;
	margin-bottom: 40px;
	padding-left: 25px;
	border-left: 3px solid #7b68ee;
	background: rgba(123, 104, 238, 0.05);
	padding: 20px 25px;
	border-radius: 0 15px 15px 0;
}

/* 技能条创新设计 */
.skills-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.skill-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.15) 0%,
	rgba(0, 212, 255, 0.1) 100%);
	border-radius: 20px;
	padding: 30px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(10px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.skill-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #7b68ee, #00d4ff);
	border-radius: 4px 4px 0 0;
}

.skill-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow:
			0 25px 50px rgba(123, 104, 238, 0.2),
			0 0 100px rgba(0, 212, 255, 0.1);
	border-color: rgba(123, 104, 238, 0.5);
}

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

.skill-header h3 {
	font-size: 20px;
	color: #ffffff;
	font-weight: 700;
	margin: auto;
}

.skill-percent {
	font-size: 28px;
	font-weight: 800;
	color: #00d4ff;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.skill-progress-wrapper {
	background: rgba(10, 10, 26, 0.4);
	border-radius: 15px;
	padding: 5px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.skill-progress {
	height: 20px;
	border-radius: 12px;
	background: linear-gradient(90deg,
	#7b68ee 0%,
	#00d4ff 50%,
	#7b68ee 100%);
	background-size: 200% 100%;
	animation: progressGlow 2s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.skill-progress::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg,
	transparent 0%,
	rgba(255, 255, 255, 0.2) 50%,
	transparent 100%);
	animation: shimmer 3s infinite;
}

@keyframes progressGlow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* 2. 课程亮点部分 - 时间轴设计 */
.overview-section {
	position: relative;
	padding: 100px 0;
}

.timeline-container {
	position: relative;
	max-width: 1000px;
	margin: 60px auto 0;
}

.timeline-container::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(to bottom,
	#7b68ee,
	#00d4ff,
	#7b68ee);
	transform: translateX(-50%);
	border-radius: 2px;
	box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
}

.timeline-item {
	position: relative;
	width: calc(50% - 60px);
	/*margin-bottom: 50px;*/
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease;
}

.timeline-item.show {
	opacity: 1;
	transform: translateY(0);
}

.timeline-item:nth-child(odd) {
	left: 0;
	text-align: right;
	padding-right: 80px;
}

.timeline-item:nth-child(even) {
	left: calc(50% + 60px);
	padding-left: 80px;
}

.timeline-dot {
	position: absolute;
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	top: 20px;
	right: -68px;
	z-index: 2;
	box-shadow:
			0 0 20px rgba(123, 104, 238, 0.8),
			0 0 40px rgba(0, 212, 255, 0.4);
	border: 4px solid #0a0a1a;
}

.timeline-item:nth-child(even) .timeline-dot {
	left: -68px;
	right: auto;
}

.timeline-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 20px;
	padding: 30px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(15px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.timeline-content:hover {
	transform: translateY(-10px);
	border-color: rgba(123, 104, 238, 0.5);
	box-shadow:
			0 25px 50px rgba(123, 104, 238, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.timeline-content h4 {
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
}

.timeline-content h4 i {
	color: #00d4ff;
	font-size: 24px;
}

.timeline-content p {
	color: #b0b0d0;
	line-height: 1.7;
	margin: 0;
}

/* 3. 应用领域部分 - 现代卡片切换 */
.tab-section {
	position: relative;
	padding: 100px 0;
	background: rgba(10, 10, 26, 0.5);
}

.tab-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
	transparent,
	rgba(123, 104, 238, 0.5),
	transparent);
}

.tab-container {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 40px;
	max-width: 1200px;
	margin: 40px auto 0;
}

.tab-navigation {
	position: sticky;
	top: 120px;
	height: fit-content;
}

.tab-nav-item {
	background: rgba(16, 18, 40, 0.8);
	padding: 20px 25px;
	margin-bottom: 15px;
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.2);
	position: relative;
	overflow: hidden;
}

.tab-nav-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg,
	rgba(123, 104, 238, 0.3),
	rgba(0, 212, 255, 0.2));
	transition: width 0.3s ease;
	z-index: 0;
}

.tab-nav-item:hover::before {
	width: 100%;
}

.tab-nav-item:hover {
	transform: translateX(10px);
	border-color: rgba(123, 104, 238, 0.4);
}

.tab-nav-item.active {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.3),
	rgba(0, 212, 255, 0.2));
	border-color: rgba(123, 104, 238, 0.5);
	transform: translateX(10px);
}

.tab-nav-item.active::before {
	width: 100%;
}

.tab-nav-item span {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tab-nav-item i {
	color: #7b68ee;
	font-size: 18px;
	transition: all 0.3s ease;
}

.tab-nav-item.active i {
	color: #00d4ff;
	transform: scale(1.2);
}

.tab-content-area {
	position: relative;
}

.tab-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 25px;
	padding: 50px;
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(20px);
	box-shadow:
			0 20px 50px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	min-height: 600px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
}

.tab-content.active {
	opacity: 1;
	transform: translateY(0);
}

.tab-content h3 {
	font-size: 36px;
	color: #ffffff;
	margin-bottom: 25px;
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tab-content .description {
	font-size: 18px;
	line-height: 1.8;
	color: #d0d0ff;
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(123, 104, 238, 0.3);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	margin-top: 40px;
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.1) 0%,
	rgba(0, 212, 255, 0.05) 100%);
	border-radius: 20px;
	padding: 30px;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,
	transparent 0%,
	rgba(255, 255, 255, 0.03) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-10px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 20px 40px rgba(123, 104, 238, 0.2),
			0 0 50px rgba(0, 212, 255, 0.1);
}

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

.feature-card i {
	font-size: 40px;
	color: #00d4ff;
	margin-bottom: 20px;
	display: block;
}

.feature-card h4 {
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 15px;
	font-weight: 700;
}

.feature-card p {
	color: #b0b0d0;
	line-height: 1.6;
	margin: 0;
	font-size: 15px;
}

/* 响应式设计 */
@media (max-width: 991px) {
	.about-content {
		padding: 40px 30px;
	}

	.about-content h2 {
		font-size: 36px;
	}

	.skills-container {
		grid-template-columns: 1fr;
	}

	.timeline-container::before {
		left: 30px;
	}

	.timeline-item {
		width: calc(100% - 60px);
		left: 0 !important;
		text-align: left !important;
		padding-left: 80px !important;
		padding-right: 0 !important;
	}

	.timeline-dot {
		left: 16px !important;
		right: auto !important;
	}

	.tab-container {
		grid-template-columns: 1fr;
	}

	.tab-navigation {
		position: static;
		display: flex;
		overflow-x: auto;
		gap: 10px;
		padding-bottom: 10px;
	}

	.tab-nav-item {
		min-width: 180px;
		margin-bottom: 0;
		text-align: center;
	}

	.tab-content {
		padding: 40px 30px;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.about-content {
		padding: 30px 20px;
	}

	.about-content h2 {
		font-size: 32px;
	}

	.about-content > p {
		font-size: 18px;
		padding: 15px;
	}

	.skill-card {
		padding: 25px;
	}

	.timeline-item {
		width: calc(100% - 40px);
		padding-left: 60px !important;
	}

	.timeline-dot {
		left: 11px !important;
		width: 25px;
		height: 25px;
	}

	.timeline-content {
		padding: 25px;
	}

	.tab-content h3 {
		font-size: 28px;
	}

	.feature-card {
		padding: 25px;
	}
}

@media (max-width: 480px) {
	.about-content h2 {
		font-size: 28px;
	}

	.skill-header h3 {
		font-size: 18px;
	}

	.skill-percent {
		font-size: 24px;
	}

	.timeline-content h4 {
		font-size: 20px;
	}

	.tab-content {
		padding: 30px 20px;
	}

	.tab-content h3 {
		font-size: 24px;
	}

	.feature-card h4 {
		font-size: 18px;
	}
}

/* 动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-on-scroll {
	animation: fadeInUp 0.8s ease forwards;
}









/**************************************
 ** 优化调整 - 字体大小协调、布局紧凑、Tabs体验优化
 **************************************/

/* 1. 课程介绍部分字体调整 - 更加协调 */
.about-content h2 {
	font-size: 42px; /* 从48px调小 */
	font-weight: 800;
	line-height: 1.2;
	margin: 15px 0 25px 0; /* 减少上下边距 */
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 50%, #00d4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-align: center;
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.about-content > p {
	font-size: 18px; /* 从20px调小 */
	line-height: 1.7;
	color: #ffffff;
	text-align: center;
	margin-bottom: 30px; /* 减少下边距 */
	padding-left: 20px;
	border-left: 3px solid #7b68ee;
	background: rgba(123, 104, 238, 0.05);
	padding: 18px 22px;
	border-radius: 0 12px 12px 0;
}

.about-content h6 {
	color: #00d4ff;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 15px;
	display: inline-block;
	padding: 6px 18px;
	background: rgba(0, 212, 255, 0.1);
	border-radius: 50px;
	border: 1px solid rgba(0, 212, 255, 0.3);
	width: 100%;
}

.skill-header h3 {
	font-size: 20px; /* 从20px调小 */
	color: #ffffff;
	font-weight: 600; /* 从700调小 */
	margin: auto;
}

.skill-percent {
	font-size: 24px; /* 从28px调小 */
	font-weight: 700; /* 从800调小 */
	color: #00d4ff;
	text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* 2. 课程亮点部分 - 紧凑布局 */
.overview-section {
	position: relative;
	padding: 80px 0; /* 从100px减少 */
}

.timeline-container {
	position: relative;
	max-width: 1000px;
	margin: 40px auto 0; /* 从60px减少 */
}

.timeline-item {
	position: relative;
	width: calc(50% - 50px); /* 从60px减少，更紧凑 */
	margin-bottom: -70px; /* 从80px减少 */
}

.timeline-item:nth-child(odd) {
	left: 0;
	text-align: right;
	padding-right: 60px; /* 从80px减少 */
}

.timeline-item:nth-child(even) {
	left: calc(50% + 50px); /* 从60px调整 */
	padding-left: 60px; /* 从80px减少 */
}

.timeline-dot {
	position: absolute;
	width: 24px; /* 从30px减小 */
	height: 24px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	top: 15px; /* 从20px上移 */
	right: -47px; /* 从68px调整 */
	z-index: 2;
	box-shadow:
			0 0 15px rgba(123, 104, 238, 0.7),
			0 0 30px rgba(0, 212, 255, 0.3);
	border: 3px solid #0a0a1a; /* 从4px减小 */
}

.timeline-item:nth-child(even) .timeline-dot {
	left: -47px; /* 从68px调整 */
	right: auto;
}

.timeline-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 16px; /* 从20px减小 */
	padding: 25px; /* 从30px减少 */
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(12px); /* 从15px减小 */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); /* 从15px/35px调整 */
}

.timeline-content:hover {
	transform: translateY(-8px); /* 从10px减小 */
	border-color: rgba(123, 104, 238, 0.5);
	box-shadow:
			0 20px 40px rgba(123, 104, 238, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.timeline-content h4 {
	font-size: 20px; /* 从22px减小 */
	color: #ffffff;
	margin-bottom: 12px; /* 从15px减少 */
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

.timeline-content h4 i {
	color: #00d4ff;
	font-size: 20px; /* 从24px减小 */
}

.timeline-content p {
	color: #b0b0d0;
	line-height: 1.6; /* 从1.7减小 */
	margin: 0;
	font-size: 20px; /* 从16px减小 */
}

/* 3. 应用领域部分 - Tabs体验优化 */
.tab-section {
	position: relative;
	padding: 80px 0; /* 从100px减少 */
}

.tab-content {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 22px; /* 从25px减小 */
	padding: 40px; /* 从50px减少 */
	border: 1px solid rgba(123, 104, 238, 0.3);
	backdrop-filter: blur(16px); /* 从20px减小 */
	box-shadow:
			0 16px 40px rgba(0, 0, 0, 0.25), /* 从20px/50px减小 */
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	min-height: 500px; /* 从600px减少 */
	opacity: 0;
	transform: translateY(15px); /* 从20px减小 */
	transition: all 0.4s ease;
	position: relative;
}

/* 添加滚动锚点，确保切换时内容在顶部 */
.tab-content.active {
	opacity: 1;
	transform: translateY(0);
	animation: fadeInUp 0.4s ease;
}

.tab-content h3 {
	font-size: 32px; /* 从36px减小 */
	color: #ffffff;
	margin-bottom: 20px; /* 从25px减少 */
	font-weight: 800;
	background: linear-gradient(135deg, #ffffff 0%, #7b68ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tab-content .description {
	font-size: 17px; /* 从18px减小 */
	line-height: 1.7;
	color: #d0d0ff;
	margin-bottom: 30px; /* 从40px减少 */
	padding-bottom: 25px; /* 从30px减少 */
	border-bottom: 1px solid rgba(123, 104, 238, 0.3);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 从300px减小 */
	gap: 20px; /* 从25px减小 */
	margin-top: 30px; /* 从40px减少 */
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.1) 0%,
	rgba(0, 212, 255, 0.05) 100%);
	border-radius: 18px; /* 从20px减小 */
	padding: 25px; /* 从30px减少 */
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s ease; /* 从0.4s加快 */
	position: relative;
	overflow: hidden;
	min-height: 180px; /* 确保卡片有最小高度 */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.feature-card:hover {
	transform: translateY(-8px); /* 从10px减小 */
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 16px 35px rgba(123, 104, 238, 0.2),
			0 0 40px rgba(0, 212, 255, 0.1);
}

.feature-card i {
	font-size: 36px; /* 从40px减小 */
	color: #00d4ff;
	margin-bottom: 15px; /* 从20px减少 */
	display: block;
}

.feature-card h4 {
	font-size: 18px; /* 从20px减小 */
	color: #ffffff;
	margin-bottom: 12px; /* 从15px减少 */
	font-weight: 700;
}

.feature-card p {
	color: #b0b0d0;
	line-height: 1.6;
	margin: 0;
	font-size: 14px; /* 从15px减小 */
	flex-grow: 1;
}

/* 4. 导航标签样式调整 */
.tab-navigation {
	position: sticky;
	top: 120px;
	height: fit-content;
	background: rgba(16, 18, 40, 0.6);
	border-radius: 16px; /* 从15px增加 */
	padding: 15px; /* 从原样式添加 */
	border: 1px solid rgba(123, 104, 238, 0.2);
}

.tab-nav-item {
	background: rgba(26, 26, 58, 0.6);
	padding: 18px 22px; /* 从20px/25px减少 */
	margin-bottom: 10px; /* 从15px减少 */
	border-radius: 12px; /* 从15px减小 */
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.2);
	position: relative;
	overflow: hidden;
}

.tab-nav-item:last-child {
	margin-bottom: 0;
}

.tab-nav-item:hover {
	transform: translateX(8px); /* 从10px减小 */
	border-color: rgba(123, 104, 238, 0.4);
}

.tab-nav-item.active {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.3),
	rgba(0, 212, 255, 0.2));
	border-color: rgba(123, 104, 238, 0.5);
	transform: translateX(8px); /* 从10px减小 */
}

.tab-nav-item span {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-size: 15px; /* 从16px减小 */
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.tab-nav-item i {
	color: #7b68ee;
	font-size: 16px; /* 从18px减小 */
	transition: all 0.3s ease;
}

/* 5. 添加平滑滚动和焦点管理 */
.tab-content-area {
	position: relative;
	scroll-margin-top: 20px; /* 添加滚动边距 */
}

.tab-content {
	scroll-margin-top: 120px; /* 确保滚动到正确位置 */
}

/* 添加标签切换时的滚动平滑效果 */
.tab-container {
	scroll-behavior: smooth;
}

/* 6. 响应式调整优化 */
@media (max-width: 991px) {
	.about-content h2 {
		font-size: 36px;
	}

	.about-content > p {
		font-size: 16px;
		padding: 15px 18px;
	}

	.timeline-item {
		width: calc(100% - 40px);
		padding-left: 50px !important;
		padding-right: 0 !important;
		/*margin-bottom: 50px;*/
	}

	.timeline-dot {
		left: 13px !important;
		right: auto !important;
		width: 20px;
		height: 20px;
		top: 12px;
	}

	.timeline-content {
		padding: 20px;
	}

	.tab-content {
		padding: 30px;
		min-height: auto;
	}

	.feature-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.feature-card {
		padding: 20px;
		min-height: 160px;
	}

	.feature-card i {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.about-content h2 {
		font-size: 32px;
	}

	.about-content h6 {
		font-size: 14px;
		padding: 5px 15px;
	}

	.skill-header h3 {
		font-size: 16px;
	}

	.skill-percent {
		font-size: 22px;
	}

	.timeline-content h4 {
		font-size: 18px;
		gap: 8px;
	}

	.timeline-content p {
		font-size: 14px;
	}

	.tab-content h3 {
		font-size: 28px;
	}

	.tab-content .description {
		font-size: 16px;
	}

	.tab-nav-item span {
		font-size: 14px;
	}

	.tab-nav-item i {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.about-content h2 {
		font-size: 28px;
	}

	.about-content > p {
		font-size: 15px;
		padding: 12px 15px;
		margin-bottom: 25px;
	}

	.skill-card {
		padding: 20px;
	}

	.skill-header h3 {
		font-size: 15px;
	}

	.skill-percent {
		font-size: 20px;
	}

	.timeline-content {
		padding: 18px;
	}

	.timeline-content h4 {
		font-size: 16px;
	}

	.timeline-content h4 i {
		font-size: 18px;
	}

	.tab-content {
		padding: 25px;
	}

	.tab-content h3 {
		font-size: 24px;
	}

	.feature-card h4 {
		font-size: 16px;
	}

	.feature-card p {
		font-size: 15px;
	}
}

/* 7. 添加焦点样式，提高可访问性 */
.tab-nav-item:focus {
	outline: 2px solid #00d4ff;
	outline-offset: 2px;
}

.tab-content:focus-within {
	border-color: #00d4ff;
	box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* 8. 添加切换时的动画优化 */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tab-content.active {
	animation: slideIn 0.4s ease forwards;
}

/* 9. 添加内容区域的粘性导航指示器 */
.tab-container {
	position: relative;
}

.tab-navigation::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: linear-gradient(to bottom, #7b68ee, #00d4ff);
	border-radius: 3px;
	transition: height 0.3s ease, top 0.3s ease;
	z-index: 1;
}

/* 10. 优化技能条的紧凑度 */
.skill-card {
	padding: 25px; /* 从30px减少 */
	border-radius: 18px; /* 从20px减小 */
}

.skill-progress-wrapper {
	border-radius: 12px; /* 从15px减小 */
	padding: 4px; /* 从5px减少 */
}

.skill-progress {
	height: 10px; /* 从20px减小 */
	border-radius: 10px; /* 从12px减小 */
}

/* 修改应用领域部分 - 右侧内容区域一行一个 */
.feature-grid {
	display: flex;
	flex-direction: column;
	gap: 15px; /* 减小间距，更加紧凑 */
	margin-top: 25px;
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.1) 0%,
	rgba(0, 212, 255, 0.05) 100%);
	border-radius: 15px;
	padding: 20px 25px;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	min-height: auto; /* 移除固定高度 */
	display: flex;
	align-items: center;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 10px 25px rgba(123, 104, 238, 0.15),
			0 0 30px rgba(0, 212, 255, 0.1);
}

.feature-card i {
	font-size: 28px;
	color: #00d4ff;
	margin-right: 20px;
	flex-shrink: 0;
	margin-bottom: 0;
}

.feature-card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.feature-card h4 {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 8px;
	font-weight: 700;
	line-height: 1.4;
}

.feature-card p {
	color: #b0b0d0;
	line-height: 1.6;
	margin: 0;
	font-size: 14px;
	flex-grow: 0; /* 不占用额外空间 */
}

/* 调整标签内容区域的整体布局 */
.tab-content {
	min-height: 400px; /* 减少最小高度 */
}

/* 响应式调整 */
@media (max-width: 991px) {
	.feature-card {
		padding: 18px 22px;
	}

	.feature-card i {
		font-size: 24px;
		margin-right: 15px;
	}

	.feature-card h4 {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.feature-card {
		padding: 16px 20px;
	}

	.feature-card i {
		font-size: 22px;
		margin-right: 12px;
	}

	.feature-card h4 {
		font-size: 16px;
		margin-bottom: 6px;
	}

	.feature-card p {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.feature-card {
		padding: 14px 16px;
		flex-direction: column;
		align-items: flex-start;
	}

	.feature-card i {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.feature-card-content {
		width: 100%;
	}
}

/* 应用领域卡片布局优化 - 紧凑型 */
.feature-grid {
	display: flex;
	flex-direction: column;
	gap: 12px; /* 进一步减小间距 */
	margin-top: 20px;
}

.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.12) 0%,
	rgba(0, 212, 255, 0.06) 100%);
	border-radius: 12px; /* 减小圆角 */
	padding: 16px 20px; /* 减小内边距 */
	border: 1px solid rgba(123, 104, 238, 0.25);
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	min-height: auto;
	height: auto; /* 确保高度自适应内容 */
	display: flex;
	align-items: center;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
	backdrop-filter: blur(8px);
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow:
			0 8px 20px rgba(123, 104, 238, 0.15),
			0 0 25px rgba(0, 212, 255, 0.08);
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.18) 0%,
	rgba(0, 212, 255, 0.09) 100%);
}

/* 左侧对号图标 */
.feature-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 10px; /* 稍微减小圆角 */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 18px; /* 减小右边距 */
	box-shadow: 0 4px 12px rgba(123, 104, 238, 0.25);
}

.feature-icon i {
	font-size: 18px; /* 减小图标大小 */
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 右侧内容区域 */
.feature-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 50px; /* 设置最小高度 */
}

.feature-title {
	font-size: 20px; /* 减小标题字体 */
	color: #ffffff;
	margin-bottom: 4px; /* 减小与描述的间距 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
}

.feature-desc {
	color: #b0b0d0;
	line-height: 1.5;
	margin: 0;
	font-size: 15px; /* 减小描述字体 */
	font-weight: 400;
	opacity: 0.9;
}

/* 调整整体内容区域，确保卡片紧凑 */
.tab-content {
	min-height: 350px; /* 进一步减小最小高度 */
}

/* 响应式调整 */
@media (max-width: 991px) {
	.feature-card {
		padding: 14px 18px;
	}

	.feature-icon {
		width: 34px;
		height: 34px;
		margin-right: 16px;
		border-radius: 9px;
	}

	.feature-icon i {
		font-size: 17px;
	}

	.feature-title {
		font-size: 18px;
	}

	.feature-desc {
		font-size: 12.5px;
	}
}

@media (max-width: 767px) {
	.feature-grid {
		gap: 10px;
	}

	.feature-card {
		padding: 12px 16px;
		border-radius: 10px;
	}

	.feature-icon {
		width: 32px;
		height: 32px;
		margin-right: 14px;
		border-radius: 8px;
	}

	.feature-icon i {
		font-size: 16px;
	}

	.feature-title {
		font-size: 16px;
		margin-bottom: 3px;
	}

	.feature-desc {
		font-size: 12px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	.feature-card {
		padding: 10px 14px;
	}

	.feature-icon {
		width: 30px;
		height: 30px;
		margin-right: 12px;
		border-radius: 7px;
	}

	.feature-icon i {
		font-size: 15px;
	}

	.feature-title {
		font-size: 14px;
	}

	.feature-desc {
		font-size: 11.5px;
	}
}

/* 为不同标签页的卡片添加微妙的背景区别 */
.tab-content:nth-child(1) .feature-icon { background: linear-gradient(135deg, #7b68ee, #4a3c99); }
.tab-content:nth-child(2) .feature-icon { background: linear-gradient(135deg, #00d4ff, #0099ff); }
.tab-content:nth-child(3) .feature-icon { background: linear-gradient(135deg, #ff6b9d, #ff8e53); }
.tab-content:nth-child(4) .feature-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }

/* 添加卡片之间的分割线效果 */
.feature-card:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg,
	transparent,
	rgba(123, 104, 238, 0.1),
	transparent);
}


/**************************************
 ** 优化：应用领域卡片样式 - 修复内容混乱
 **************************************/

/* 清除冲突的样式定义 */
.feature-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

/* 统一的卡片样式 - 修复内容混乱 */
.feature-card {
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.12) 0%,
	rgba(0, 212, 255, 0.06) 100%);
	border-radius: 12px;
	padding: 16px 20px;
	border: 1px solid rgba(123, 104, 238, 0.25);
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
	min-height: auto;
	display: flex;
	align-items: center;
	text-align: left;
	width: 100%;
	margin-bottom: 0;
	backdrop-filter: blur(8px);
	height: auto !important; /* 确保高度自适应 */
}

.feature-card:hover {
	transform: translateY(-3px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 8px 20px rgba(123, 104, 238, 0.15),
	0 0 25px rgba(0, 212, 255, 0.08);
	background: linear-gradient(135deg,
	rgba(123, 104, 238, 0.18) 0%,
	rgba(0, 212, 255, 0.09) 100%);
}

/* 图标区域 - 固定大小 */
.feature-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 18px;
	box-shadow: 0 4px 12px rgba(123, 104, 238, 0.25);
}

.feature-icon i {
	font-size: 18px;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	margin: 0 !important; /* 清除所有边距 */
	line-height: 1;
}

/* 内容区域 - 确保正确显示 */
.feature-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 40px; /* 减小最小高度 */
}

.feature-title {
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 4px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
	display: block !important;
}

.feature-desc {
	color: #b0b0d0;
	line-height: 1.5;
	margin: 0 !important;
	font-size: 15px;
	font-weight: 400;
	opacity: 0.9;
	display: block !important;
}

/* 为不同标签页的卡片添加颜色区别 */
.tab-content:nth-child(1) .feature-icon {
	background: linear-gradient(135deg, #7b68ee, #4a3c99);
}
.tab-content:nth-child(2) .feature-icon {
	background: linear-gradient(135deg, #00d4ff, #0099ff);
}
.tab-content:nth-child(3) .feature-icon {
	background: linear-gradient(135deg, #ff6b9d, #ff8e53);
}
.tab-content:nth-child(4) .feature-icon {
	background: linear-gradient(135deg, #a855f7, #ec4899);
}

/* 添加卡片之间的分割线效果 */
.feature-card:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50px;
	right: 20px;
	height: 1px;
	background: linear-gradient(90deg,
	transparent,
	rgba(123, 104, 238, 0.1),
	transparent);
}

/* 确保tab内容区域高度正确 */
.tab-content {
	min-height: 350px;
	display: flex;
	flex-direction: column;
}

/* 确保卡片容器不会溢出 */
.tab-content .feature-grid {
	flex: 1;
	overflow: visible;
}

/* 移除所有可能导致冲突的旧样式 */
.feature-card i[class*="fa-"],
.feature-card i[class*="fas"],
.feature-card i[class*="far"],
.feature-card i[class*="fab"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
}

/* 响应式调整 */
@media (max-width: 991px) {
	.feature-card {
		padding: 14px 18px;
	}

	.feature-icon {
		width: 34px;
		height: 34px;
		margin-right: 16px;
		border-radius: 9px;
	}

	.feature-icon i {
		font-size: 17px;
	}

	.feature-title {
		font-size: 18px;
	}

	.feature-desc {
		font-size: 12.5px;
	}
}

@media (max-width: 767px) {
	.feature-grid {
		gap: 10px;
	}

	.feature-card {
		padding: 12px 16px;
		border-radius: 10px;
	}

	.feature-icon {
		width: 32px;
		height: 32px;
		margin-right: 14px;
		border-radius: 8px;
	}

	.feature-icon i {
		font-size: 16px;
	}

	.feature-title {
		font-size: 16px;
		margin-bottom: 3px;
	}

	.feature-desc {
		font-size: 12px;
		line-height: 1.4;
	}
}

@media (max-width: 480px) {
	.feature-card {
		padding: 10px 14px;
	}

	.feature-icon {
		width: 30px;
		height: 30px;
		margin-right: 12px;
		border-radius: 7px;
	}

	.feature-icon i {
		font-size: 15px;
	}

	.feature-title {
		font-size: 14px;
	}

	.feature-desc {
		font-size: 11.5px;
	}
}

/* 确保卡片内元素垂直居中 */
.feature-card {
	align-items: flex-start; /* 改为顶部对齐，防止文本被拉伸 */
}

.feature-content {
	padding-top: 2px; /* 稍微向下偏移，使文本与图标顶部对齐 */
}

/* 清除可能干扰的浮动样式 */
.feature-card::before,
.feature-card::after {
	content: none;
}

.feature-icon::before,
.feature-icon::after {
	content: none;
}


/**************************************
 ** 案例展示模块样式
 **************************************/
.cases-section {
	position: relative;
	background: linear-gradient(135deg, rgba(10, 10, 26, 0.9) 0%, rgba(26, 26, 58, 0.9) 100%);
}

.cases-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(123, 104, 238, 0.5), transparent);
}

.cases-container {
	margin-top: 30px;
}

.case-card {
	background: rgba(16, 18, 40, 0.8);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(123, 104, 238, 0.2);
	backdrop-filter: blur(10px);
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.case-card:hover {
	transform: translateY(-10px);
	border-color: rgba(123, 104, 238, 0.4);
	box-shadow: 0 20px 40px rgba(123, 104, 238, 0.3);
}

.case-header {
	padding: 20px 20px 0;
}

.author-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.author-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(123, 104, 238, 0.3);
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	font-weight: bold;
}

.author-details {
	flex: 1;
}

.author-name {
	font-size: 18px;
	color: #ffffff;
	margin: 0 0 4px 0;
	font-weight: 600;
}

.author-title {
	font-size: 14px;
	color: #00d4ff;
	background: rgba(0, 212, 255, 0.1);
	padding: 3px 10px;
	border-radius: 12px;
	border: 1px solid rgba(0, 212, 255, 0.2);
}

.case-thumbnail {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	margin: 20px 0;
}

.case-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.case-card:hover .case-thumbnail img {
	transform: scale(1.05);
}

.thumbnail-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(123, 104, 238, 0.1), rgba(0, 212, 255, 0.1));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
}

.thumbnail-placeholder i {
	font-size: 48px;
	margin-bottom: 10px;
}

.thumbnail-placeholder span {
	font-size: 14px;
}

.case-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

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

.case-link {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.case-link:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px rgba(123, 104, 238, 0.5);
}

.case-content {
	padding: 0 20px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.case-title {
	font-size: 22px;
	color: #ffffff;
	margin: 0 0 12px 0;
	font-weight: 700;
	line-height: 1.3;
}

.case-description {
	color: #b0b0d0;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 20px;
	flex: 1;
}

.case-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(123, 104, 238, 0.1);
	color: #7b68ee;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.3);
	gap: 8px;
}

.case-btn:hover {
	background: linear-gradient(135deg, #7b68ee 0%, #4a3c99 100%);
	color: white;
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(123, 104, 238, 0.3);
}

/* 响应式设计 */
@media (max-width: 991px) {
	.case-thumbnail {
		height: 180px;
	}

	.case-title {
		font-size: 20px;
	}

	.case-description {
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.case-card {
		margin-bottom: 30px;
	}

	.case-thumbnail {
		height: 200px;
	}

	.author-avatar {
		width: 45px;
		height: 45px;
	}

	.author-name {
		font-size: 16px;
	}
}

@media (max-width: 576px) {
	.cases-container .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.case-card {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}




















/* ====== 首页主图标题样式优化 - 醒目科技感 ====== */

/* 主标题容器 */
.main-title-wrapper {
	margin-bottom: 35px;
	position: relative;
	text-align: center;
}

/*!* 标题装饰背景 *!*/
/*.main-title-wrapper::before {*/
/*	content: '';*/
/*	position: absolute;*/
/*	top: -25px;*/
/*	left: -25px;*/
/*	right: -25px;*/
/*	bottom: -25px;*/
/*	background:*/
/*			radial-gradient(circle at 20% 30%, rgba(123, 104, 238, 0.15) 0%, transparent 50%),*/
/*			radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);*/
/*	border-radius: 15px;*/
/*	z-index: -1;*/
/*	opacity: 0.6;*/
/*}*/

/* 第一行主标题：三幸AI */
.title-line-1 {
	font-size: 70px;
	font-weight: 900;
	line-height: 1;
	margin: 0 0 5px 0;
	position: relative;
	display: block;
	letter-spacing: 1px;
}

.title-line-1 .title-text {
	display: inline-block;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	padding: 0 20px;
	letter-spacing: 8px;
	animation: titleGlow 4s ease-in-out infinite;
}

/* 第二行主标题：超级个体孵化营 */
.title-line-2 {
	font-size: 58px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	position: relative;
	display: block;
}

.title-line-2 .title-text {
	display: inline-block;
	background: linear-gradient(90deg,
	#ffffff 0%,
	#00d4ff 25%,
	#7b68ee 50%,
	#a28bf0 75%,
	#ffffff 100%););
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	padding: 5px 20px;
	border-bottom: 3px solid rgba(123, 104, 238, 0.4);
	letter-spacing: 6px;
	animation: subtitleGlow 5s ease-in-out infinite;
}

/* 标题下划线动画 */
.title-line-2 .title-text::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 10px;
	right: 10px;
	height: 3px;
	background: linear-gradient(90deg,
	transparent,
	#7b68ee,
	#00d4ff,
	#7b68ee,
	transparent);
	border-radius: 3px;
	opacity: 0.7;
	animation: shimmerLine 3s ease-in-out infinite;
}

/* 副标题容器 */
.subtitle-wrapper {
	margin: 30px 0 40px 0;
	position: relative;
	/*padding-left: 20px;*/
}

/* 副标题：助力全民AI进化 */
.subtitle-line {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	position: relative;
	display: inline-block;
}

.subtitle-text {
	display: inline-block;
	padding: 12px 30px;
	background: transparent;
	border-radius: 0;
	border: none;
	backdrop-filter: none;
	box-shadow: none;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 212, 255, 0.5);
	transition: all 0.3s ease;
	position: relative;
	overflow: visible;
	letter-spacing: 3px;
}



/* 动画关键帧 */

/* 标题发光效果 */
@keyframes titleGlow {
	0%, 100% {
		text-shadow:
				0 0 30px rgba(123, 104, 238, 0.7),
				0 0 60px rgba(123, 104, 238, 0.4);
	}
	50% {
		text-shadow:
				0 0 40px rgba(123, 104, 238, 0.9),
				0 0 80px rgba(123, 104, 238, 0.6),
				0 0 100px rgba(0, 212, 255, 0.3);
	}
}

/* 副标题发光效果 */
@keyframes subtitleGlow {
	0%, 100% {
		text-shadow:
				0 0 25px rgba(123, 104, 238, 0.6),
				0 0 50px rgba(123, 104, 238, 0.3),
				0 0 70px rgba(0, 212, 255, 0.2);
	}
	50% {
		text-shadow:
				0 0 35px rgba(123, 104, 238, 0.8),
				0 0 70px rgba(123, 104, 238, 0.5),
				0 0 90px rgba(0, 212, 255, 0.4),
				0 0 110px rgba(0, 212, 255, 0.2);
	}
}

/* 下划线闪烁效果 */
@keyframes shimmerLine {
	0%, 100% {
		opacity: 0.3;
		background-position: 0% 50%;
	}
	50% {
		opacity: 0.8;
		background-position: 100% 50%;
	}
}

/* 思考问题容器 */
.thoughts-wrapper {
	margin: 40px auto 50px auto;
	position: relative;
	max-width: 900px;
	text-align: center;
}

/* 思考问题项 */
.thought-item {
	margin-bottom: 25px;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease;
}

.thought-item.thought-1 {
	animation: fadeInUp 0.8s ease forwards 0.5s;
}

.thought-item.thought-2 {
	animation: fadeInUp 0.8s ease forwards 0.8s;
}

.thought-item.thought-3 {
	animation: fadeInUp 0.8s ease forwards 1.1s;
}

.thought-content {
	padding: 0;
	background: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	transition: all 0.3s ease;
	backdrop-filter: none;
	position: relative;
	overflow: visible;
	display: inline-block;
	text-align: left;
}

.thought-content::before {
	content: '';
	display: none;
}

.thought-item:hover .thought-content {
	transform: translateY(-5px);
	opacity: 1;
}

/* 思考问题前缀 */
.thought-prefix {
	color: #00d4ff;
	font-weight: 600;
	font-size: 20px;
	margin-right: 12px;
	display: inline-block;
	text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
	letter-spacing: 1px;
}

/* 思考问题内容 */
.thought-text {
	color: #ffffff;
	font-weight: 500;
	font-size: 20px;
	display: inline;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 按钮容器 */
.banner-buttons {
	margin-top: 45px;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
}

/* 使用现有Bootstrap按钮样式并增强 */
.banner-buttons .btn {
	padding: 16px 45px;
	font-size: 18px;
	font-weight: 600;
	border-radius: 30px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	border-width: 2px;
	z-index: 1;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 次按钮：立即了解 */
.banner-buttons .btn-outline-primary {
	color: #7b68ee;
	border-color: #7b68ee;
	background: rgba(26, 26, 58, 0.4);
	backdrop-filter: blur(10px);
}

.banner-buttons .btn-outline-primary:hover {
	color: #ffffff;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-color: #00d4ff;
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(123, 104, 238, 0.5);
}

/* 主按钮：立即报名 */
.banner-buttons .btn-primary {
	background: linear-gradient(135deg, #00d4ff 0%, #7b68ee 50%, #a28bf0 100%);
	border: 2px solid #7b68ee;
	color: #ffffff;
	box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
	position: relative;
	animation: btnPulse 2s ease-in-out infinite;
	overflow: visible;
}

@keyframes btnPulse {
	0%, 100% {
		box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
	}
	50% {
		box-shadow: 0 8px 35px rgba(0, 212, 255, 0.6);
	}
}

.banner-buttons .btn-primary::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, #00d4ff 0%, #7b68ee 50%, #a28bf0 100%);
	border-radius: 30px;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
	filter: blur(10px);
}

.banner-buttons .btn-primary:hover::before {
	opacity: 0.7;
}

.banner-buttons .btn-primary:hover {
	background: linear-gradient(135deg, #00e4ff 0%, #8b78fe 50%, #b29bfa 100%);
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
}

/* 按钮图标 */
.banner-buttons .btn i {
	transition: all 0.3s ease;
	margin-right: 10px;
}

.banner-buttons .btn:hover i {
	transform: translateX(5px) scale(1.1);
}

/* 主按钮脉冲效果 */
.btn-signup {
	animation: buttonPulse 2.5s ease-in-out infinite;
}

@keyframes buttonPulse {
	0%, 100% {
		box-shadow: 0 10px 30px rgba(123, 104, 238, 0.5);
	}
	50% {
		box-shadow: 0 10px 35px rgba(123, 104, 238, 0.7),
		0 0 25px rgba(123, 104, 238, 0.3);
	}
}

/* 动画序列 */
.main-title-wrapper {
	animation: fadeInUp 0.8s ease 0.3s forwards;
	opacity: 0;
	transform: translateY(30px);
}

.subtitle-wrapper {
	animation: fadeInUp 0.8s ease 0.6s forwards;
	opacity: 0;
	transform: translateY(30px);
}

.thought-1 {
	animation: fadeInLeft 0.6s ease 0.9s forwards;
}

.thought-2 {
	animation: fadeInLeft 0.6s ease 1.1s forwards;
}

.thought-3 {
	animation: fadeInLeft 0.6s ease 1.3s forwards;
}

.banner-buttons {
	animation: fadeInUp 0.8s ease 1.5s forwards;
	opacity: 0;
	transform: translateY(30px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.title-line-1 {
		font-size: 62px;
	}

	.title-line-2 {
		font-size: 52px;
	}

	.subtitle-line {
		font-size: 30px;
	}
}

@media (max-width: 991px) {
	.title-line-1 {
		font-size: 54px;
	}

	.title-line-2 {
		font-size: 44px;
	}

	.subtitle-line {
		font-size: 26px;
	}

	.subtitle-text {
		padding: 10px 20px;
	}

	.banner-buttons .btn {
		padding: 16px 35px;
		font-size: 17px;
		min-width: 170px;
	}
}

@media (max-width: 767px) {
	.title-line-1 {
		font-size: 46px;
	}

	.title-line-2 {
		font-size: 38px;
	}

	.subtitle-line {
		font-size: 24px;
	}

	.title-line-1 .title-text,
	.title-line-2 .title-text {
		display: block;
		text-align: center;
	}

	.title-line-2 .title-text::after {
		left: 50%;
		right: 50%;
		transform: translateX(-50%);
		width: 80%;
	}

	.banner-buttons {
		flex-direction: column;
		gap: 15px;
		align-items: stretch;
	}

	.banner-buttons .btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 576px) {
	.title-line-1 {
		font-size: 40px;
	}

	.title-line-2 {
		font-size: 34px;
	}

	.subtitle-line {
		font-size: 22px;
	}

	.subtitle-text {
		padding: 8px 16px;
	}

	.thought-content {
		padding: 16px 20px;
	}

	.thought-prefix,
	.thought-text {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.title-line-1 {
		font-size: 36px;
	}

	.title-line-2 {
		font-size: 30px;
	}

	.subtitle-line {
		font-size: 20px;
	}

	.banner-buttons .btn {
		padding: 15px 25px;
		font-size: 16px;
	}
}

/* 增强标题在深色背景上的可见性 */
.title-line-1 .title-text,
.title-line-2 .title-text {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* 添加标题周围的微光效果 */
/*.main-title-wrapper::after {*/
/*	content: '';*/
/*	position: absolute;*/
/*	top: -15px;*/
/*	left: -15px;*/
/*	right: -15px;*/
/*	bottom: -15px;*/
/*	background:*/
/*			radial-gradient(circle at 30% 40%, rgba(123, 104, 238, 0.1) 0%, transparent 60%),*/
/*			radial-gradient(circle at 70% 60%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);*/
/*	border-radius: 10px;*/
/*	z-index: -2;*/
/*	pointer-events: none;*/
/*}*/

/* 思考问题项的数字标记 */
.thought-item::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.thought-item:hover::before {
	opacity: 1;
}

/* 按钮波纹效果 */


/* 确保按钮在移动端有足够的触摸区域 */
@media (max-width: 767px) {
	.banner-buttons .btn {
		min-height: 56px;
	}
}










/* ============================================
   统一按钮样式系统
   ============================================ */
.btn-unified {
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 30px;
	transition: all 0.3s ease;
	border: 2px solid #7b68ee;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	letter-spacing: 0.5px;
	cursor: pointer;
	text-decoration: none;
}

.btn-unified i {
	font-size: 18px;
}

.btn-primary-gradient {
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	color: #ffffff;
	box-shadow: 0 4px 20px rgba(123, 104, 238, 0.3);
}

.btn-primary-gradient:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(123, 104, 238, 0.4);
}

.btn-secondary-gradient {
	background: rgba(123, 104, 238, 0.15);
	color: #7b68ee;
	box-shadow: 0 4px 15px rgba(123, 104, 238, 0.2);
}

.btn-secondary-gradient:hover {
	background: rgba(123, 104, 238, 0.25);
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(123, 104, 238, 0.3);
}

.btn-outline-custom {
	background: transparent;
	color: #7b68ee;
	box-shadow: none;
}

.btn-outline-custom:hover {
	background: rgba(123, 104, 238, 0.1);
	transform: translateY(-3px);
	box-shadow: 0 4px 15px rgba(123, 104, 238, 0.2);
}

/* 按钮尺寸变体 */
.btn-sm-custom {
	padding: 10px 24px;
	font-size: 14px;
	border-radius: 25px;
}

.btn-lg-custom {
	padding: 16px 40px;
	font-size: 18px;
	border-radius: 35px;
}

/* 按钮图标 */
.btn-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
}

.btn-icon-lg {
	width: 48px;
	height: 48px;
}

/* 按钮组 */
.btn-group-custom {
	display: flex;
	gap: 12px;
}

/* 禁用状态 */
.btn-unified:disabled,
.btn-unified.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 加载状态 */
.btn-unified.loading {
	position: relative;
	pointer-events: none;
}

.btn-unified.loading::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ============================================
   统一表单元素样式系统
   ============================================ */
.form-input {
	width: 100%;
	padding: 14px 20px;
	background: rgba(26, 26, 58, 0.8);
	border: 2px solid rgba(123, 104, 238, 0.3);
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 400;
	transition: all 0.3s ease;
}

.form-input:focus {
	outline: none;
	border-color: #7b68ee;
	box-shadow: 0 0 0 4px rgba(123, 104, 238, 0.1);
	background: rgba(26, 26, 58, 0.95);
}

.form-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.form-select {
	width: 100%;
	padding: 14px 20px;
	background: rgba(26, 26, 58, 0.8);
	border: 2px solid rgba(123, 104, 238, 0.3);
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.3s ease;
}

.form-select:focus {
	outline: none;
	border-color: #7b68ee;
	box-shadow: 0 0 0 4px rgba(123, 104, 238, 0.1);
}

.form-select option {
	background: #1a1a3a;
	color: #ffffff;
}

.form-textarea {
	width: 100%;
	padding: 14px 20px;
	background: rgba(26, 26, 58, 0.8);
	border: 2px solid rgba(123, 104, 238, 0.3);
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	min-height: 120px;
	resize: vertical;
	transition: all 0.3s ease;
}

.form-textarea:focus {
	outline: none;
	border-color: #7b68ee;
	box-shadow: 0 0 0 4px rgba(123, 104, 238, 0.1);
	background: rgba(26, 26, 58, 0.95);
}

.form-group {
	margin-bottom: 20px;
}

.form-label {
	display: block;
	margin-bottom: 8px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
}

/* ============================================
   统一卡片样式系统
   ============================================ */
.card-unified {
	background: rgba(26, 26, 58, 0.6);
	border: 1px solid rgba(123, 104, 238, 0.15);
	border-radius: 16px;
	padding: 24px;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.card-unified:hover {
	border-color: rgba(123, 104, 238, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(123, 104, 238, 0.15);
}

.card-header {
	padding: 20px;
	border-bottom: 1px solid rgba(123, 104, 238, 0.1);
	margin-bottom: 20px;
}

.card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
}

.card-body {
	padding: 0 20px 20px 20px;
}

.card-footer {
	padding: 20px;
	border-top: 1px solid rgba(123, 104, 238, 0.1);
	margin-top: 20px;
}

/* ============================================
   统一徽章样式系统
   ============================================ */
.badge {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.badge-primary {
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	color: #ffffff;
}

.badge-secondary {
	background: rgba(123, 104, 238, 0.15);
	color: #7b68ee;
	border: 1px solid rgba(123, 104, 238, 0.3);
}

.badge-success {
	background: rgba(0, 212, 255, 0.15);
	color: #00d4ff;
	border: 1px solid rgba(0, 212, 255, 0.3);
}

.badge-warning {
	background: rgba(255, 165, 0, 0.15);
	color: #ffa500;
	border: 1px solid rgba(255, 165, 0, 0.3);
}

.badge-danger {
	background: rgba(255, 68, 68, 0.15);
	color: #ff4444;
	border: 1px solid rgba(255, 68, 68, 0.3);
}

/* ============================================
   统一标签样式系统
   ============================================ */
.tag {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(123, 104, 238, 0.08);
	color: #7b68ee;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid rgba(123, 104, 238, 0.2);
	transition: all 0.3s ease;
	cursor: pointer;
}

.tag:hover {
	background: rgba(123, 104, 238, 0.15);
	border-color: rgba(123, 104, 238, 0.4);
	color: #ffffff;
}

.tag-active {
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	color: #ffffff;
	border-color: transparent;
}

/* ============================================
   统一分页样式系统
   ============================================ */
.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.pagination-item {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 26, 58, 0.8);
	border: 1px solid rgba(123, 104, 238, 0.2);
	border-radius: 10px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
}

.pagination-item:hover {
	border-color: #7b68ee;
	background: rgba(123, 104, 238, 0.15);
	transform: translateY(-2px);
}

.pagination-item.active {
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-color: transparent;
	box-shadow: 0 4px 20px rgba(123, 104, 238, 0.3);
}

.pagination-item.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pagination-item.disabled:hover {
	transform: none;
	border-color: rgba(123, 104, 238, 0.2);
	background: rgba(26, 26, 58, 0.8);
}

/* ============================================
   统一加载动画
   ============================================ */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(123, 104, 238, 0.2);
	border-top-color: #7b68ee;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.loading-text {
	width: 100%;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	margin: auto;
}

/* ============================================
   统一工具提示样式
   ============================================ */
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip-content {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(26, 26, 58, 0.95);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	border: 1px solid rgba(123, 104, 238, 0.3);
	z-index: 1000;
	margin-bottom: 8px;
}

.tooltip-content::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgba(123, 104, 238, 0.3);
}

.tooltip:hover .tooltip-content {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-8px);
}

/* ============================================
   统一图标按钮样式
   ============================================ */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(123, 104, 238, 0.1);
	border: 1px solid rgba(123, 104, 238, 0.2);
	border-radius: 10px;
	color: #7b68ee;
	cursor: pointer;
	transition: all 0.3s ease;
}

.icon-btn:hover {
	background: rgba(123, 104, 238, 0.2);
	border-color: #7b68ee;
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(123, 104, 238, 0.2);
}

.icon-btn i {
	font-size: 16px;
}

.icon-btn-sm {
	width: 32px;
	height: 32px;
}

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

.icon-btn-lg {
	width: 48px;
	height: 48px;
}

.icon-btn-lg i {
	font-size: 20px;
}

/* ============================================
   统一进度条样式
   ============================================ */
.progress {
	width: 100%;
	height: 8px;
	background: rgba(26, 26, 58, 0.8);
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(123, 104, 238, 0.2);
}

.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #7b68ee, #00d4ff);
	border-radius: 10px;
	transition: width 0.5s ease;
	position: relative;
	overflow: hidden;
}

.progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: progressShine 2s infinite;
}

@keyframes progressShine {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ============================================
   统一开关样式
   ============================================ */
.toggle {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
}

.toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(26, 26, 58, 0.8);
	border: 1px solid rgba(123, 104, 238, 0.2);
	border-radius: 26px;
	transition: all 0.3s ease;
}

.toggle-slider::before {
	position: absolute;
	content: '';
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.toggle input:checked + .toggle-slider {
	background: linear-gradient(135deg, #7b68ee, #00d4ff);
	border-color: transparent;
}

.toggle input:checked + .toggle-slider::before {
	transform: translateX(24px);
	background: #ffffff;
}

.toggle input:focus + .toggle-slider {
	box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.2);
}

/* ============================================
   统一分割线样式系统
   ============================================ */
.divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(123, 104, 238, 0.3), transparent);
	margin: 40px 0;
}

.divider-vertical {
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, transparent, rgba(123, 104, 238, 0.3), transparent);
	margin: 0 20px;
}

/* ============================================
   响应式优化
   ============================================ */
@media (max-width: 768px) {
	.card-unified {
		padding: 16px;
	}

	.card-header {
		padding: 16px;
	}

	.card-body {
		padding: 0 16px 16px 16px;
	}

	.card-footer {
		padding: 16px;
	}

	.pagination {
		gap: 6px;
	}

	.pagination-item {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.btn-unified {
		padding: 12px 28px;
		font-size: 14px;
	}

	.form-input,
	.form-select,
	.form-textarea {
		padding: 12px 16px;
		font-size: 14px;
	}
}

/* ============================================
   Banner柔和装饰系统 - 毫无违和感的背景装饰
   ============================================ */

.geometric-shapes {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

/* 柔和的光斑 - 使用径向渐变 */
.soft-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.3;
	animation: softPulse 8s ease-in-out infinite;
}

.soft-glow-1 {
	width: 400px;
	height: 400px;
	top: -150px;
	right: -100px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.3) 0%, transparent 70%);
	animation-duration: 10s;
}

.soft-glow-2 {
	width: 350px;
	height: 350px;
	bottom: 10%;
	left: -120px;
	background: radial-gradient(circle, rgba(0, 212, 255, 0.25) 0%, transparent 70%);
	animation-duration: 12s;
	animation-delay: 3s;
}

.soft-glow-3 {
	width: 300px;
	height: 300px;
	top: 40%;
	left: 20%;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.2) 0%, transparent 70%);
	animation-duration: 14s;
	animation-delay: 5s;
}

.soft-glow-4 {
	width: 250px;
	height: 250px;
	bottom: 30%;
	right: 10%;
	background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
	animation-duration: 9s;
	animation-delay: 7s;
}

@keyframes softPulse {
	0%, 100% {
		opacity: 0.2;
		transform: scale(1);
	}
	50% {
		opacity: 0.4;
		transform: scale(1.1);
	}
}

/* 流动的渐变条纹 */
.flow-gradient {
	position: absolute;
	width: 100%;
	height: 2px;
	opacity: 0.15;
	animation: flowMove 15s linear infinite;
}

.flow-gradient-1 {
	top: 20%;
	background: linear-gradient(90deg, transparent, rgba(123, 104, 238, 0.4), transparent);
	animation-duration: 18s;
}

.flow-gradient-2 {
	top: 45%;
	background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
	animation-duration: 22s;
	animation-delay: 5s;
}

.flow-gradient-3 {
	top: 70%;
	background: linear-gradient(90deg, transparent, rgba(123, 104, 238, 0.35), transparent);
	animation-duration: 20s;
	animation-delay: 10s;
}

@keyframes flowMove {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* 垂直渐变条纹 */
.vertical-flow {
	position: absolute;
	width: 2px;
	height: 100%;
	opacity: 0.1;
	animation: verticalMove 20s linear infinite;
}

.vertical-flow-1 {
	left: 15%;
	background: linear-gradient(180deg, transparent, rgba(123, 104, 238, 0.3), transparent);
	animation-duration: 25s;
}

.vertical-flow-2 {
	left: 45%;
	background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.25), transparent);
	animation-duration: 30s;
	animation-delay: 8s;
}

.vertical-flow-3 {
	left: 75%;
	background: linear-gradient(180deg, transparent, rgba(123, 104, 238, 0.28), transparent);
	animation-duration: 28s;
	animation-delay: 15s;
}

@keyframes verticalMove {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}

/* 抽象的背景块 */
.abstract-block {
	position: absolute;
	opacity: 0.08;
	filter: blur(40px);
	animation: abstractFloat 25s ease-in-out infinite;
}

.abstract-block-1 {
	width: 600px;
	height: 400px;
	top: -100px;
	left: -150px;
	background: linear-gradient(135deg, rgba(123, 104, 238, 0.2) 0%, transparent 100%);
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	animation-duration: 28s;
}

.abstract-block-2 {
	width: 500px;
	height: 350px;
	bottom: -50px;
	right: -100px;
	background: linear-gradient(225deg, rgba(0, 212, 255, 0.2) 0%, transparent 100%);
	border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
	animation-duration: 32s;
	animation-delay: 10s;
}

@keyframes abstractFloat {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
	}
	25% {
		transform: translate(30px, -20px) rotate(5deg) scale(1.05);
	}
	50% {
		transform: translate(-20px, 30px) rotate(-5deg) scale(0.95);
	}
	75% {
		transform: translate(20px, 20px) rotate(3deg) scale(1.02);
	}
}

/* 微妙的粒子点缀 */
.subtle-particle {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(123, 104, 238, 0.3);
	animation: particleFloat 12s ease-in-out infinite;
}

.subtle-particle:nth-child(1) { top: 10%; left: 8%; animation-delay: 0s; }
.subtle-particle:nth-child(2) { top: 15%; left: 25%; animation-delay: 2s; }
.subtle-particle:nth-child(3) { top: 20%; left: 45%; animation-delay: 4s; }
.subtle-particle:nth-child(4) { top: 12%; left: 65%; animation-delay: 6s; }
.subtle-particle:nth-child(5) { top: 18%; left: 82%; animation-delay: 8s; }
.subtle-particle:nth-child(6) { top: 35%; left: 12%; animation-delay: 1s; }
.subtle-particle:nth-child(7) { top: 42%; left: 35%; animation-delay: 3s; }
.subtle-particle:nth-child(8) { top: 38%; left: 58%; animation-delay: 5s; }
.subtle-particle:nth-child(9) { top: 45%; left: 78%; animation-delay: 7s; }
.subtle-particle:nth-child(10) { top: 55%; left: 20%; animation-delay: 0.5s; }
.subtle-particle:nth-child(11) { top: 62%; left: 42%; animation-delay: 2.5s; }
.subtle-particle:nth-child(12) { top: 58%; left: 68%; animation-delay: 4.5s; }
.subtle-particle:nth-child(13) { top: 72%; left: 15%; animation-delay: 1.5s; }
.subtle-particle:nth-child(14) { top: 78%; left: 38%; animation-delay: 3.5s; }
.subtle-particle:nth-child(15) { top: 75%; left: 60%; animation-delay: 5.5s; }
.subtle-particle:nth-child(16) { top: 85%; left: 25%; animation-delay: 2s; }
.subtle-particle:nth-child(17) { top: 90%; left: 50%; animation-delay: 4s; }
.subtle-particle:nth-child(18) { top: 88%; left: 72%; animation-delay: 6s; }

@keyframes particleFloat {
	0%, 100% {
		opacity: 0.2;
		transform: translateY(0);
	}
	50% {
		opacity: 0.5;
		transform: translateY(-20px);
	}
}

/* 柔和的边框光晕 */
.soft-border-glow {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.soft-border-glow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(180deg, rgba(123, 104, 238, 0.05) 0%, transparent 100%);
	animation: borderGlowPulse 10s ease-in-out infinite;
}

.soft-border-glow::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 200px;
	background: linear-gradient(0deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
	animation: borderGlowPulse 12s ease-in-out infinite;
	animation-delay: 5s;
}

@keyframes borderGlowPulse {
	0%, 100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.6;
	}
}

/* 网格光效 */
.grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(123, 104, 238, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(123, 104, 238, 0.03) 1px, transparent 1px);
	background-size: 100px 100px;
	opacity: 0.5;
	animation: gridMove 40s linear infinite;
}

@keyframes gridMove {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(100px, 100px);
	}
}

/* 中心光晕 */
.center-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(123, 104, 238, 0.03) 0%, transparent 70%);
	opacity: 0.5;
	animation: centerGlowPulse 15s ease-in-out infinite;
	pointer-events: none;
}

@keyframes centerGlowPulse {
	0%, 100% {
		opacity: 0.3;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(1.1);
	}
}

/* 响应式优化 - 移动端简化 */
@media (max-width: 991px) {
	.soft-glow-1,
	.soft-glow-3 {
		opacity: 0.15;
	}

	.abstract-block-1,
	.abstract-block-2 {
		opacity: 0.04;
	}

	.subtle-particle {
		display: none;
	}
}

@media (max-width: 768px) {
	.flow-gradient,
	.vertical-flow {
		display: none;
	}

	.center-glow {
		width: 400px;
		height: 400px;
	}

	.grid-overlay {
		background-size: 60px 60px;
		opacity: 0.3;
	}
}