/* ============================================================
   文杰GEO - 服务型官网首页区块样式
   作用于主题「首页模块组 - HTML代码模块」输出（.home-html-code）
   颜色尽量复用主题工具类（module-bg/color-main/color-meta 等），
   自动适配 theme-light / theme-dark。
   ============================================================ */

/* ---------- 通用 ---------- */
.home-html-code .wj-sec-body {
	padding: 22px 20px;
}

.home-html-code .wj-btn {
	display: inline-block;
	padding: 11px 28px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity .25s, transform .25s;
}

.home-html-code .wj-btn:hover {
	opacity: .88;
	transform: translateY(-1px);
}

.home-html-code .wj-btn-light {
	background: #fff;
	color: #1957EA;
	font-weight: 600;
}

.home-html-code .wj-btn-outline {
	border: 1px solid rgba(255, 255, 255, .75);
	color: #fff;
}

/* ---------- 区块一：品牌宣言（H1） ---------- */
.home-html-code .wj-hero {
	background: linear-gradient(120deg, #0F3BA8 0%, #1957EA 55%, #2C74E6 100%);
	border-radius: 6px;
	padding: 44px 40px 36px;
	color: #fff;
	text-align: center;
}

.home-html-code .wj-hero h1 {
	color: #fff;
	font-size: 30px;
	line-height: 1.45;
	margin-bottom: 14px;
}

.home-html-code .wj-hero h1 em {
	font-style: normal;
	color: #9CC3FF;
}

.home-html-code .wj-hero-sub {
	max-width: 760px;
	margin: 0 auto 24px;
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .86);
}

.home-html-code .wj-hero-actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.home-html-code .wj-hero-points {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 30px;
	list-style: none;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 13px;
	color: rgba(255, 255, 255, .78);
}

.home-html-code .wj-hero-points li:before {
	content: "✓";
	margin-right: 6px;
	color: #9CC3FF;
}

/* ---------- 区块二：数据实力 ---------- */
.home-html-code .wj-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	text-align: center;
}

.home-html-code .wj-stats li {
	padding: 18px 10px;
	border-radius: 6px;
	background: rgba(25, 87, 234, .06);
}

.home-html-code .wj-stats b {
	display: block;
	font-size: 34px;
	line-height: 1.2;
	margin-bottom: 6px;
}

.home-html-code .wj-stats b span {
	font-size: 16px;
	margin-left: 2px;
}

.home-html-code .wj-stats > li > span:last-child {
	font-size: 13px;
}

.home-html-code .wj-why {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-html-code .wj-why li {
	padding: 18px;
	border-radius: 6px;
	border: 1px solid rgba(25, 87, 234, .14);
	transition: box-shadow .25s, transform .25s;
}

.home-html-code .wj-why li:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(25, 87, 234, .12);
}

.home-html-code .wj-why-icon {
	font-size: 26px;
	display: inline-block;
	margin-bottom: 10px;
}

.home-html-code .wj-why h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.home-html-code .wj-why p {
	font-size: 13px;
	line-height: 1.8;
	margin: 0;
}

/* ---------- 区块三：服务流程 ---------- */
.home-html-code .wj-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: wjstep;
}

.home-html-code .wj-steps li {
	position: relative;
	padding: 20px 18px;
	border-radius: 6px;
	background: rgba(25, 87, 234, .05);
}

.home-html-code .wj-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #1957EA;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 12px;
}

.home-html-code .wj-steps h3 {
	font-size: 16px;
	margin-bottom: 8px;
}

.home-html-code .wj-steps p {
	font-size: 13px;
	line-height: 1.8;
	margin: 0;
}

/* ---------- 区块四：FAQ ---------- */
.home-html-code .wj-faq details {
	border-bottom: 1px solid rgba(128, 145, 170, .22);
	padding: 14px 4px;
}

.home-html-code .wj-faq details:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.home-html-code .wj-faq summary {
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 28px;
	line-height: 1.7;
}

.home-html-code .wj-faq summary::-webkit-details-marker {
	display: none;
}

.home-html-code .wj-faq summary:after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	color: #1957EA;
	font-size: 18px;
	font-weight: 400;
}

.home-html-code .wj-faq details[open] summary:after {
	content: "−";
}

.home-html-code .wj-faq details p {
	margin: 10px 0 2px;
	font-size: 14px;
	line-height: 1.9;
	padding-right: 28px;
}

/* ---------- 区块五：CTA ---------- */
.home-html-code .wj-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: linear-gradient(120deg, #0F3BA8 0%, #1957EA 60%, #2C74E6 100%);
	border-radius: 6px;
	padding: 34px 38px;
	color: #fff;
}

.home-html-code .wj-cta h2 {
	color: #fff;
	font-size: 22px;
	margin-bottom: 8px;
}

.home-html-code .wj-cta p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .85);
}

.home-html-code .wj-cta-actions {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

/* ---------- 区块：精选案例 ---------- */
.home-html-code .wj-cases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.home-html-code .wj-case-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 22px 18px;
	border: 1px solid rgba(128, 145, 170, .18);
	border-radius: 10px;
	background: rgba(25, 87, 234, .03);
	text-decoration: none;
	overflow: hidden;
	transition: transform .3s, box-shadow .3s, border-color .3s;
}

.home-html-code .wj-case-card:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #1957EA, #2C74E6, #9CC3FF);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s;
}

.home-html-code .wj-case-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(25, 87, 234, .14);
	border-color: rgba(25, 87, 234, .35);
}

.home-html-code .wj-case-card:hover:before {
	transform: scaleX(1);
}

.home-html-code .wj-case-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.home-html-code .wj-case-tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #1957EA;
	background: rgba(25, 87, 234, .1);
	padding: 3px 10px;
	border-radius: 999px;
}

.home-html-code .wj-case-date {
	font-size: 12px;
}

.home-html-code .wj-case-card h3 {
	font-size: 16px;
	line-height: 1.55;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-html-code .wj-case-card > p {
	font-size: 13px;
	line-height: 1.85;
	margin-bottom: 16px;
	flex: 1;
}

.home-html-code .wj-case-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0 0 14px;
	padding: 14px 0 0;
	border-top: 1px solid rgba(128, 145, 170, .16);
}

.home-html-code .wj-case-metrics li {
	text-align: center;
	padding: 0 6px;
}

.home-html-code .wj-case-metrics li + li {
	border-left: 1px solid rgba(128, 145, 170, .16);
}

.home-html-code .wj-case-metrics b {
	display: block;
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 2px;
	background: linear-gradient(120deg, #1957EA, #2C74E6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.home-html-code .wj-case-metrics span {
	font-size: 12px;
}

.home-html-code .wj-case-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
}

.home-html-code .wj-arrow {
	transition: transform .3s;
}

.home-html-code .wj-case-card:hover .wj-arrow {
	transform: translateX(4px);
}

.home-html-code .wj-sec-more {
	text-align: center;
	margin: 20px 0 0;
	font-size: 14px;
}

/* ---------- 区块：服务行业 ---------- */
.home-html-code .wj-industries {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-html-code .wj-industries li {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px 18px;
	border-radius: 10px;
	border: 1px solid rgba(128, 145, 170, .16);
	background: rgba(25, 87, 234, .03);
	overflow: hidden;
	transition: transform .3s, box-shadow .3s, border-color .3s;
}

.home-html-code .wj-industries li:after {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(25, 87, 234, .14), transparent 70%);
	opacity: 0;
	transition: opacity .3s;
}

.home-html-code .wj-industries li:hover {
	transform: translateY(-3px);
	border-color: rgba(25, 87, 234, .35);
	box-shadow: 0 10px 24px rgba(25, 87, 234, .12);
}

.home-html-code .wj-industries li:hover:after {
	opacity: 1;
}

.home-html-code .wj-ind-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(25, 87, 234, .14), rgba(44, 116, 230, .06));
	font-size: 22px;
	transition: transform .3s;
}

.home-html-code .wj-industries li:hover .wj-ind-icon {
	transform: scale(1.08) rotate(-4deg);
}

.home-html-code .wj-industries h3 {
	font-size: 15px;
	margin-bottom: 5px;
}

.home-html-code .wj-industries p {
	font-size: 12px;
	line-height: 1.7;
	margin: 0;
}

.home-html-code .wj-ind-arrow {
	position: absolute;
	right: 14px;
	bottom: 12px;
	color: #1957EA;
	font-size: 14px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .3s, transform .3s;
}

.home-html-code .wj-industries li:hover .wj-ind-arrow {
	opacity: 1;
	transform: none;
}

/* ---------- 区块：客户评价 ---------- */
.home-html-code .wj-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-html-code .wj-quotes li {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px 22px;
	border-radius: 10px;
	border: 1px solid rgba(128, 145, 170, .16);
	background: rgba(25, 87, 234, .03);
	transition: transform .3s, box-shadow .3s, border-color .3s;
}

.home-html-code .wj-quotes li:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(25, 87, 234, .12);
	border-color: rgba(25, 87, 234, .3);
}

.home-html-code .wj-quote-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.home-html-code .wj-quote-stars {
	color: #FFB400;
	font-size: 13px;
	letter-spacing: 3px;
}

.home-html-code .wj-quote-mark {
	font-family: Georgia, serif;
	font-size: 44px;
	line-height: .8;
	color: rgba(25, 87, 234, .22);
}

.home-html-code .wj-quote-text {
	font-size: 13px;
	line-height: 1.95;
	margin: 0 0 18px;
	flex: 1;
}

.home-html-code .wj-quote-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid rgba(128, 145, 170, .16);
}

.home-html-code .wj-quote-avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1957EA, #2C74E6);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(25, 87, 234, .3);
}

.home-html-code .wj-quote-who b {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}

.home-html-code .wj-quote-who em {
	font-style: normal;
	font-size: 12px;
}

/* ---------- 暗色模式适配 ---------- */
.theme-dark .home-html-code .wj-case-card,
.theme-dark .home-html-code .wj-industries li,
.theme-dark .home-html-code .wj-quotes li {
	background: rgba(255, 255, 255, .03);
	border-color: rgba(255, 255, 255, .08);
}

.theme-dark .home-html-code .wj-case-tag {
	background: rgba(44, 116, 230, .2);
	color: #7FB0FF;
}

.theme-dark .home-html-code .wj-case-metrics,
.theme-dark .home-html-code .wj-case-metrics li + li,
.theme-dark .home-html-code .wj-quote-foot {
	border-color: rgba(255, 255, 255, .1);
}

.theme-dark .home-html-code .wj-case-metrics b {
	background: linear-gradient(120deg, #5B96FF, #9CC3FF);
	-webkit-background-clip: text;
	background-clip: text;
}

.theme-dark .home-html-code .wj-ind-icon {
	background: rgba(44, 116, 230, .18);
}

/* ---------- 响应式 ---------- */
@media only screen and (max-width: 1024px) {
	.home-html-code .wj-stats,
	.home-html-code .wj-why,
	.home-html-code .wj-steps,
	.home-html-code .wj-industries {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-html-code .wj-cases,
	.home-html-code .wj-quotes {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width: 640px) {
	.home-html-code .wj-hero {
		padding: 32px 18px 26px;
	}

	.home-html-code .wj-hero h1 {
		font-size: 22px;
	}

	.home-html-code .wj-sec-body {
		padding: 16px 12px;
	}

	.home-html-code .wj-stats b {
		font-size: 26px;
	}

	.home-html-code .wj-industries {
		grid-template-columns: 1fr;
	}

	.home-html-code .wj-cta {
		flex-direction: column;
		text-align: center;
		padding: 26px 18px;
	}

	.home-html-code .wj-cta h2 {
		font-size: 19px;
	}
}

/* ---------- 标题层级适配：module-title 使用 h2（父主题仅对 h3 提供 white-space） ---------- */
.home-html-code .module-title h2 {
	white-space: nowrap;
	font-size: 18px;
	margin: 0;
}