:root { 
	--primary: #12487a; 
	--accent: #ff6d00; 
	--light: #f8f9fc; 
	--dark: #1a1a1a;
	--gray: #666;
	--light-gray: #eee;
	--shadow: 0 10px 30px rgba(0,0,0,.08);
	--shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--gradient-primary: linear-gradient(135deg, var(--primary) 0%, #0d3470 100%);
	--gradient-accent: linear-gradient(135deg, var(--accent) 0%, #ff8a33 100%);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { 
	font-family: 'Inter', sans-serif; 
	line-height: 1.7; 
	color: #333; 
	background: #fff; 
	-webkit-font-smoothing: antialiased; 
	scroll-behavior: smooth;
}
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 语言切换器 */
.lang-switcher {
	position: fixed; 
	top: 18px; 
	right: 18px; 
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(12px); 
	border-radius: 50px; 
	padding: 10px 14px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.16); 
	z-index: 9999; 
	display: flex; 
	gap: 12px;
	font-weight: 600; 
	font-size: 15px; 
	border: 1px solid rgba(0,0,0,0.08);
	transition: var(--transition);
}
.lang-switcher:hover {
	box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.lang-switcher button {
	background: none; 
	border: none; 
	cursor: pointer; 
	padding: 8px 12px;
	border-radius: 30px; 
	transition: var(--transition); 
	display: flex; 
	align-items: center; 
	gap: 6px;
}
.lang-switcher button.active { 
	background: var(--accent); 
	color: white; 
	box-shadow: 0 4px 15px rgba(255,109,0,0.3);
}
.lang-switcher button:not(.active):hover {
	background: var(--light);
}

/* Hero */
.hero { 
	background: var(--gradient-primary); 
	color:#fff; 
	text-align:center; 
	padding:150px 20px 140px; 
	position:relative; 
	overflow:hidden;
}
.hero::before { 
	content:''; 
	position:absolute; 
	inset:0; 
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M0 0L1000 1000" stroke="%23ffffff08" stroke-width="3"/></svg>') repeat; 
	opacity:.15; 
	animation: bgMove 20s linear infinite;
}
@keyframes bgMove {
	0% { background-position: 0 0; }
	100% { background-position: 100px 100px; }
}
.hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to top, #fff, transparent);
	z-index: 1;
}
.hero h1 { 
	font-size:clamp(3rem,8vw,4.5rem); 
	font-weight:800; 
	margin-bottom:28px; 
	line-height: 1.2;
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 10px rgba(0,0,0,0.1);
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 1s 0.3s forwards;
}
.hero .subtitle { 
	font-size:1.5rem; 
	margin-bottom:50px; 
	opacity:0;
	transform: translateY(20px);
	animation: fadeInUp 1s 0.6s forwards;
	max-width:900px; 
	margin:0 auto 50px;
	position: relative;
	z-index: 2;
}
.hero .price-badge {
	display: inline-block;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(8px);
	padding: 12px 24px;
	border-radius: 50px;
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 40px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 1s 0.9s forwards;
}
.btn { 
	display:inline-block; 
	background: var(--gradient-accent); 
	color:#fff; 
	padding:20px 48px; 
	border-radius:12px; 
	font-size:1.3rem; 
	font-weight:700; 
	transition: var(--transition); 
	box-shadow:0 10px 30px rgba(255,109,0,.4);
	position: relative;
	z-index: 2;
	border: none;
	cursor: pointer;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 1s 1.2s forwards;
}
.btn:hover { 
	transform:translateY(-6px); 
	box-shadow:0 15px 35px rgba(255,109,0,.5);
}
.btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.1);
	border-radius: 12px;
	transform: scaleX(0);
	transition: var(--transition);
	transform-origin: left;
}
.btn:hover::after {
	transform: scaleX(1);
}
.trust { 
	display:flex; 
	flex-wrap:wrap; 
	justify-content:center; 
	gap:30px 50px; 
	margin-top:80px; 
	font-size:1.2rem; 
	font-weight:500;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 1s 1.5s forwards;
}
.trust span {
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0.9;
	transition: var(--transition);
	padding: 8px 15px;
	border-radius: 30px;
}
.trust span:hover {
	opacity: 1;
	transform: translateY(-4px);
	background: rgba(255,255,255,0.1);
}
.trust span::before {
	content: '✓';
	color: var(--accent);
	font-weight: bold;
	font-size: 1.4rem;
}

section { 
	padding:100px 0; 
	position: relative;
}
.bg-light { 
	background:var(--light); 
	position: relative;
}
.bg-light::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to bottom, #fff, transparent);
}
h2 { 
	text-align:center; 
	font-size:3rem; 
	font-weight:700; 
	margin-bottom:40px; 
	color:var(--dark);
	padding-bottom: 20px;
}
h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 5px;
	background: var(--gradient-accent);
	border-radius: 3px;
	box-shadow: 0 2px 10px rgba(255,109,0,0.3);
}
.section-intro {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 60px;
	font-size: 1.2rem;
	color: var(--gray);
}
.grid { 
	display:grid; 
	grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); 
	gap:40px; 
	max-width:1200px; 
	margin:0 auto; 
}
.card { 
	background:#fff; 
	padding:45px 35px; 
	border-radius:20px; 
	box-shadow: var(--shadow); 
	transition: var(--transition);
	border: 1px solid rgba(0,0,0,0.03);
	position: relative;
	overflow: hidden;
}
.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background: var(--gradient-primary);
	transform: scaleX(0);
	transition: var(--transition);
}
.card:hover { 
	transform:translateY(-12px); 
	box-shadow: var(--shadow-hover);
}
.card:hover::before {
	transform: scaleX(1);
}
.card h3 {
	font-size: 1.7rem;
	margin-bottom: 20px;
	color: var(--primary);
	display: flex;
	align-items: center;
	gap: 15px;
}
/* 服务卡片图标优化 - 标准图标+统一风格 */
.card h3 i {
	color: var(--accent);
	font-size: 2.5rem;
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, rgba(255,109,0,0.15), rgba(255,109,0,0.05));
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	box-shadow: 0 4px 15px rgba(255,109,0,0.1);
}
.card:hover h3 i {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(255,109,0,0.2);
}
.card p {
	font-size: 1.1rem;
	color: var(--gray);
	line-height: 1.8;
}

/* Process cards - 序号居中显示优化 */
.process {
	position: relative;
}
/* 连接线 - 增强流程感 */
.process::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--light-gray), transparent);
	z-index: -1;
	transform: translateY(-50%);
}
.process .card {
	padding: 60px 35px 45px;
	text-align: center;
	z-index: 1;
	/* 确保卡片相对定位，让伪元素能基于卡片定位 */
	position: relative;
	/* 移除可能导致遮挡的overflow属性（如果存在） */
	overflow: visible;
}
/* 序号居中样式 */
.process .card::after {
	/* 核心修改：设置绝对定位并调整位置 */
	position: absolute;
	top: -25px; /* 向上移动半个圆圈高度，露出完整圆圈 */
	left: 50%; /* 水平居中 */
	transform: translateX(-50%); /* 精确居中 */
	z-index: 2; /* 确保在卡片上方显示 */
	
	/* 保留原有样式并补充圆圈样式 */
	width: 50px;
	height: 50px;
	font-size: 1.5rem;
	content: attr(data-step); /* 使用data-step属性作为序号 */
	background: var(--accent); /* 背景色（与主题匹配） */
	color: white;
	border-radius: 50%; /* 圆形 */
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 增加阴影突出显示 */
}
.process .card:hover::after {
	transform: translateX(-50%) scale(1.1);
	box-shadow: 0 8px 20px rgba(18, 72, 122, 0.4);
}
.process .card p {
	font-size: 1.15rem;
	color: #444;
}

/* Testimonials */
.testimonials .card {
	position: relative;
	padding: 50px 35px 40px;
	text-align: center;
}
.testimonials .card::before {
	content: '"';
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 7rem;
	color: rgba(18, 72, 122, 0.06);
	font-family: Georgia, serif;
	line-height: 1;
}
.testimonials .card p:last-child {
	margin-top: 30px;
	color: var(--primary);
	font-weight: 600;
	font-size: 1.2rem;
}
.testimonial-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--light-gray);
	margin: 0 auto 25px;
	overflow: hidden;
	border: 4px solid white;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transition: var(--transition);
}
.testimonials .card:hover .testimonial-avatar {
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.testimonial-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 评分星星 */
.testimonial-rating {
	margin-bottom: 20px;
	color: #ffc107;
	font-size: 1.5rem;
}

.cta { 
	background:var(--gradient-accent); 
	color:#fff; 
	text-align:center; 
	padding:140px 20px;
	position: relative;
	overflow: hidden;
}
.cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><circle cx="25" cy="25" r="2" fill="%23ffffff10"/></svg>') repeat;
	animation: bgMove 15s linear infinite reverse;
}
.form-wrapper { 
	max-width:750px; 
	margin:0 auto; 
	position: relative;
	z-index: 2;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(10px);
	padding: 50px;
	border-radius: 25px;
	box-shadow: 0 15px 50px rgba(0,0,0,0.15);
	transform: translateY(30px);
	opacity: 0;
	animation: fadeInUp 1s 0.5s forwards;
}
.form-grid { 
	display:grid; 
	gap:25px; 
}
input,select,textarea { 
	width:100%; 
	padding:20px 25px; 
	border:none; 
	border-radius:15px; 
	background:#fff; 
	color:#333; 
	box-shadow:0 5px 18px rgba(0,0,0,.08); 
	transition: var(--transition);
	font-family: inherit;
	font-size: 1.1rem;
	border: 2px solid transparent;
}
input:focus,select:focus,textarea:focus { 
	outline:none; 
	box-shadow:0 0 0 4px rgba(255,255,255,0.4), 0 6px 20px rgba(0,0,0,.15);
	border-color: rgba(18, 72, 122, 0.2);
	transform: translateY(-2px);
}
select { 
	appearance:none; 
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' width='22' height='22' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); 
	background-repeat:no-repeat; 
	background-position:right 25px center; 
}
textarea { 
	min-height:180px; 
	resize:vertical; 
}
.submit-btn { 
	background:#fff; 
	color:var(--accent); 
	font-weight:800; 
	font-size:1.4rem; 
	padding:22px 40px; 
	cursor:pointer; 
	border-radius:15px; 
	transition: var(--transition); 
	box-shadow:0 10px 30px rgba(0,0,0,.2);
	border: none;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.submit-btn:hover { 
	transform:translateY(-6px); 
	box-shadow:0 15px 35px rgba(0,0,0,.25);
	color: #e65c00;
}
.submit-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,109,0,0.1), transparent);
	transform: translateX(-100%);
	transition: var(--transition);
}
.submit-btn:hover::after {
	transform: translateX(100%);
}

footer { 
	background:var(--dark); 
	color:#ddd; 
	text-align:center; 
	padding:100px 20px 50px; 
	font-size:1.1rem;
	position: relative;
}
footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to bottom, var(--light), transparent);
}
.footer-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
}
.footer-logo {
	font-size: 1.8rem;
	font-weight: 700;
	color: white;
	margin-bottom: 25px;
}
.footer-links {
	display: flex;
	justify-content: center;
	gap: 25px;
	margin: 35px 0;
}
.footer-links a {
	color: #ddd;
	transition: var(--transition);
	font-size: 1.8rem;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-links a:hover {
	color: var(--accent);
	background: rgba(255,255,255,0.1);
	transform: translateY(-5px) scale(1.1);
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.copyright {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 1rem;
	opacity: 0.8;
}

@media (max-width:768px) { 
	section{padding:90px 0;} 
	.hero{padding:140px 20px 100px;} 
	.lang-switcher{top:10px;right:10px;padding:8px 10px;gap:8px;font-size:14px;}
	h2 { font-size: 2.4rem; margin-bottom: 60px; }
	.trust { gap: 15px 25px; margin-top: 60px; font-size: 1rem; }
	.card { padding: 35px 25px; }
	.process .card { padding: 50px 25px 35px; }
	.process .card::after {
		width: 50px;
		height: 50px;
		font-size: 1.5rem;
	}
	.form-wrapper {
		padding: 35px 25px;
		border-radius: 20px;
	}
	.form-grid {
		gap: 20px;
	}
	.footer-links a {
		width: 50px;
		height: 50px;
		font-size: 1.5rem;
	}
}

/* Animation classes */
@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}
/* 延迟动画，让卡片依次出现 */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }
.fade-in:nth-child(5) { transition-delay: 0.4s; }
.fade-in:nth-child(6) { transition-delay: 0.5s; }
.fade-in:nth-child(7) { transition-delay: 0.6s; }
.fade-in:nth-child(8) { transition-delay: 0.7s; }
.fade-in:nth-child(9) { transition-delay: 0.8s; }

/* RTL语言通用样式 */
[dir="rtl"] {
	direction: rtl;
	unicode-bidi: embed;
}

/* 文本对齐调整 */
[dir="rtl"] body,
[dir="rtl"] .card p,
[dir="rtl"] .testimonials .card {
	text-align: right;
}

/* 标题对齐调整 */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
	text-align: center;
}

/* 服务卡片图标位置调整（RTL语言图标应在右侧） */
[dir="rtl"] .card h3 {
	flex-direction: row-reverse; /* 图标和文字调换位置 */
}

/* 信任标识调整（RTL语言勾选符号在右侧） */
[dir="rtl"] .trust span {
	flex-direction: row-reverse;
}

/* 表单元素调整（RTL语言占位符右对齐） */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
	text-align: right;
}

/* 下拉菜单图标位置调整（RTL语言箭头在左侧） */
[dir="rtl"] select {
	background-position: left 25px center;
}

/* Cookie弹窗样式（优化适配多语言） */
#cookieBanner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	padding: 20px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
	display: none;
	z-index: 9998;
	border-top: 2px solid var(--light-gray);
}

#cookieBanner .container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

#cookieBanner p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

#cookieBanner .button-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

#cookieBanner button {
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 500;
	border: none;
	transition: all 0.3s ease;
}

#acceptCookies {
	background: var(--accent);
	color: var(--white);
}

#acceptCookies:hover {
	background: #e66a10; /* 深色 hover 效果 */
}

#rejectCookies {
	background: var(--light-gray);
	color: var(--dark);
}

#rejectCookies:hover {
	background: #e2e8f0; /* 深色 hover 效果 */
}