:root {
	/* 高级深蓝 + 工程黄（可让设计师微调） */
	--navy: #0b1f3a; /* 深海军蓝 */
	--navy-2: #112b4d; /* 次深蓝 */
	--text: #0e1a2b;
	--muted: #6b7687;
	--line: #e6eaf0;
	--bg: #f5f7fb;
	--white: #ffffff;
	--yellow: #f2c230; /* 工程黄 */
	--yellow-2: #e7b31d; /* 按下/hover */
	--radius: 6px;
	--shadow: 0 10px 30px rgba(10, 20, 40, 0.12);

	--bg-dark: #1a2233; /* 深蓝背景基调 */
	--bg-gradient-top: #24344d;
	--bg-gradient-btm: #151b26;
	--gold: #f2c230; /* 标志性工程黄 */
	--gold-dark: #cfa21f; /* 按钮渐变深色 */
	--text-main: #ffffff; /* 主文字白 */
	--text-sub: #a0aec0; /* 副文字灰 */
	--radius: 8px;
	--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
		Arial, "Noto Sans", "Helvetica Neue", sans-serif;
	background: var(--bg);
	color: var(--text);
	overflow-x: hidden;
}
a {
	color: inherit;
	text-decoration: none;
}
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
ul {
	padding-left: 20px;
	margin: 0;
}
p {
	margin: 0 0 16px 0;
	color: var(--text-sub);
	font-size: 14px;
	line-height: 1.6;
}
h2 {
	font-size: 18px;
	margin: 0 0 12px 0;
	font-weight: 700;
	color: var(--gold); /* 修改：使用统一的金色变量 */
}

/* 移除手机壳，使用全宽容器 */
.wrap {
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 顶部导航 - 固定定位 */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 5%;
	background: var(--navy);
	/* background: transparent; */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	box-shadow: var(--shadow);
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	letter-spacing: 0.6px;
	color: var(--white);
}
.brand .mark {
	width: 32px;
	height: 32px;
	border-radius: 3px;
	background-image: url("../images/shenta-logo-1.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.brand small {
	display: block;
	font-weight: 700;
	opacity: 0.85;
	letter-spacing: 0.3px;
	margin-top: 1px;
	font-size: 11px;
}
.menu {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
}
.menu span,
.menu span:before,
.menu span:after {
	content: "";
	display: block;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	position: relative;
}
.menu span:before {
	position: absolute;
	top: -6px;
	left: 0;
}
.menu span:after {
	position: absolute;
	top: 6px;
	left: 0;
}

/* 移动端菜单相关样式 */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;
  display: none;
}

.mobile-menu-content {
  position: fixed;
  top: 0;
  right: -280px;
  width: 260px;
  height: 100%;
  background: var(--navy);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 20px;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-menu-content.active {
  right: 0;
}

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

.close-menu {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-nav a {
  display: block;
  color: white;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.mobile-menu-nav a:hover {
  color: var(--yellow);
}

/* 主图样式 */
.hero-card img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 30px;
	/* box-shadow: 0 10px 30px rgba(0,0,0,0.4); */
	/* 稍微调暗图片以融入环境，可选 */
	filter: brightness(0.95);
}

/* ------------------------------------------------
Key Features 列表
------------------------------------------------ */
.feature-list h2 {
	font-size: 18px;
	color: var(--gold);
	margin: 0 0 15px 0;
	font-weight: 400;
}

.feature-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--line); 
	line-height: 1.5;
}

/* 自定义金色方框打钩图标 */
.feature-list li::before {
	content: "✔";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 防止图标被压缩 */
	width: 20px;
	height: 20px;
	margin-right: 12px;
	margin-top: 1px; /* 微调垂直对齐 */

	border: 1.5px solid var(--gold);
	border-radius: 4px;
	color: var(--gold);
	font-size: 12px;
	font-weight: bold;

	/* 添加轻微的发光效果 */
	box-shadow: 0 0 5px rgba(242, 194, 48, 0.2);
	-webkit-text-fill-color: var(--gold); /* 确保在所有浏览器中颜色正确显示 */
	-webkit-font-smoothing: antialiased; /* 改善字体渲染 */
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 6px;
	background: var(--yellow);
	color: var(--navy); /* 修改：使用navy作为按钮文字颜色，提高可读性 */
	font-weight: 900;
	font-size: clamp(14px, 1.5vw, 16px);
	box-shadow: 0 10px 18px rgba(242, 194, 48, 0.24);
	border: 0;
	cursor: pointer;
	transition: all 0.3s ease;
	width: auto;
	min-width: 180px;
}
.btn:hover {
	background: var(--yellow-2);
	transform: translateY(-2px);
}
.btn:active {
	background: var(--yellow-2);
	transform: translateY(0);
}

/* 通用 section */
.section {
	padding: clamp(40px, 6vw, 80px) 5%;
	background: var(--line);
	margin-top: 80px; /* 添加顶部边距以避免被固定导航遮挡 */
}
.section h2 {
	margin: 0 0 20px;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 600;
	letter-spacing: 0.2px;
}
.section p {
	margin: 0 0 30px;
	color: var(--line);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
	max-width: 800px;
}
.section-bg {
	background: url(../images/section-bg-4.jpg);
	background-size: 100% 100%;
}

/* ------------------------------------------------
Hero 区域：标题与图片
------------------------------------------------ */
.hero-card {
	display: flex;
	flex-direction: column;
}

/* 标题文字区域 */
.hero-overlay {
	margin-bottom: 0px;
}

.hero-overlay h2 {
	/* 图片中的标题使用了衬线体 (Serif) */
	font-size: 28px;
	font-weight: 600;
	color: var(--gold);
	margin: 0 0 10px 0;
	line-height: 1.2;
	letter-spacing: 0.5px;
}

.hero-overlay p {
	font-size: 15px;
	color: var(--text-sub);
	line-height: 1.5;
	margin: 0;
}

/* CTA Bottom */
.cta {
	padding: clamp(40px, 6vw, 80px) 5%;
	background: linear-gradient(
		180deg,
		rgba(11, 31, 58, 0.94),
		rgba(11, 31, 58, 0.9)
	);
	background-size: cover;
	background-position: center;
	color: var(--white); /* 修改：使用变量 */
}
.cta .row {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	margin-bottom: 40px;
}
.cta .icon {
	width: 80px;
	height: 80px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	display: grid;
	place-items: center;
	font-size: 36px;
}
.cta h3 {
	margin: 0;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 900;
}
.cta .btn {
	margin: 0 auto;
}

/* 页脚 */
.footer {
	padding: 20px 5%;
	background: var(--navy);
	color: rgba(255, 255, 255, 0.8); /* 修改：使用更一致的页脚文字颜色 */
	text-align: center;
	font-size: 14px;
}

/* 移动端适配 */
@media (max-width: 768px) {
	.topbar {
		padding: 12px 4%;
		/* background: transparent; */
	}

	.section {
		padding: 40px 4%;
		margin-top: 0px; /* 移动端调整顶部边距 */
	}

	.cta {
		padding: 40px 4%;
	}

	.cta .row {
		margin-bottom: 30px;
	}

	.cta .icon {
		width: 60px;
		height: 60px;
		font-size: 28px;
	}

	.btn {
		padding: 12px 20px;
		width: 100%;
		max-width: 280px;
	}
}

@media (max-width: 480px) {
	.hero h1 {
		font-size: 28px;
	}

	.badge {
		padding: 10px 14px;
	}
}

.product-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.product-item {
	background: var(--white);
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.product-item h3 {
	margin: 0 0 10px;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 800;
}

.product-item p {
	margin: 0 0 15px;
	color: var(--text); /* 修改：使用统一文本颜色 */
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
}

.product-item img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	object-fit: cover;
}

/* 添加响应式图片样式 */
.section img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	object-fit: cover;
	margin: 20px 0;
}

/* 增加背景颜色 */
.section#block-production-solutions {
	background-color: var(--navy-2);
	color: #fff;
	margin-top: 50px; /* 为这个特定section也添加边距 */
	padding-top: 10px;
}

.suitability-text {
	color: var(--gold) !important;
}

/* --- [重点优化] 产品列表区域 --- */
.products-section {
	padding: 40px 3%;
/*	background: #28344D;*/
	background: url(../images/section-bg-4.jpg);
	background-size: 300% 100%;
}
.section-title {
	font-size: clamp(28px, 4vw, 36px);
	color: var(--gold);
	font-weight: 800;
	margin-bottom: 50px;
	text-align: center;
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
}
/* 标题下方装饰线 */
.section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	background: var(--yellow);
	margin: 16px auto 0;
	border-radius: 2px;
}

/* Grid 布局 */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

/* 卡片优化 */
.product-card {
	background: var(--line);
	padding: 20px 10px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.product-card h2 {
	margin: 0 0 10px;
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 800;
	color: var(--yellow-2);
}

.product-card p {
	margin: 0 0 15px;
	color: var(--line); /* 修改：使用统一文本颜色 */
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
}

.product-card img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	object-fit: cover;
}

.product-card {
	background: rgba(17, 43, 77, 0.58);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: var(--transition);
	border: 1px solid var(--line);
	position: relative;
	box-shadow: 0 4px 6px rgba(11, 31, 58, 0.02);

	border-color: rgba(11, 31, 58, 0.1);
}

/* 顶部装饰条：Hover时变黄 */
.product-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #0b1f3a 0%, #f2c230 100%);
	transition: var(--transition);
	z-index: 2;
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: rgba(11, 31, 58, 0.1);
}
.product-card:hover::before {
	background: linear-gradient(90deg, #f2c230 0%, #0b1f3a 100%); 
	height: 4px;
}
.product-card:hover h2 {
	color: var(--yellow-2);
}

/* 图片区域 */
.card-img-wrap {
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
/*	background: #f8f9fa;*/
	position: relative;
}

.card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.6s ease;
}

.product-card:hover .card-img-wrap img {
	transform: scale(1.05); /* 微放大 */
}

.card-body {
	padding: 28px 10px;
	display: flex;
	flex-direction: column;
	flex: 1;
/*	background: var(--white);*/
}

.card-body p {
	color: var(--line);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 0; /* 移除底部margin */
	flex-grow: 1;
}

/* 原HTML中card-link是注释掉的，这里保留注释状态，但提供样式以防您想打开 */
.card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--navy);
	font-weight: 700;
	font-size: 14px;
	margin-top: 20px;
	opacity: 0;
	transform: translateY(10px);
	transition: var(--transition);
}
.product-card:hover .card-link {
	opacity: 1;
	transform: translateY(0);
}

/* 产品参数图片样式 */
.product-parameter-img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	object-fit: cover;
	margin: 0;
	max-width: 100%;
}

/* 响应式适配 */
@media (max-width: 768px) {

	.section#block-production-solutions {
		padding-top: 80px; /* 移动端调整 */
		margin-top: 0px;
	}
	
	.product-list {
		flex-direction: column;
	}

	/* 移动端图片样式调整 */
	.section img {
		margin: 15px 0;
	}

	.product-parameter-img {
		margin: 0;
	}
}

.jaw-crusher-card .feature-list h2 {
	color: #0b1f3a;
	font-weight: 600;
}

.jaw-crusher-card {
/*	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);*/
}

.jaw-crusher-card::before {
	background: linear-gradient(90deg, #0b1f3a 0%, #f2c230 100%);
}

.jaw-crusher-card:hover::before {
	background: linear-gradient(90deg, #f2c230 0%, #0b1f3a 100%);
}

.jaw-crusher-card h2 {
/*	color: #0b1f3a;*/
}

.jaw-crusher-card h3 {
	color: var(--line);
	font-weight: 600;
	font-size: clamp(16px, 2vw, 24px);
}

.jaw-crusher-card:hover h2 {
	color: #f2c230;
}

.jaw-crusher-card .card-body p {
/*	color: #4a5568;*/
}

.jaw-crusher-card .feature-list h2 {
	color: #0b1f3a;
	font-weight: 600;
}
/* Jaw Crusher 产品列表特定样式 */
.jaw-crusher-card .feature-list ul {
	color: #4a5568;
	padding-left: 5px;
}

.jaw-crusher-card .feature-list li {
	color: var(--line);
}

.jaw-crusher-card .feature-list li::before {
	content: "✔";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* 防止图标被压缩 */
	width: 20px;
	height: 20px;
	margin-right: 12px;
	margin-top: 1px; /* 微调垂直对齐 */

	border: 1.5px solid var(--gold);
	border-radius: 4px;
	color: var(--gold);
	font-size: 12px;
	font-weight: bold;

	/* 添加轻微的发光效果 */
	box-shadow: 0 0 5px rgba(242, 194, 48, 0.2);
	-webkit-text-fill-color: var(--gold); /* 确保在所有浏览器中颜色正确显示 */
	-webkit-font-smoothing: antialiased; /* 改善字体渲染 */
}

.jaw-crusher-card:hover .feature-list li::before {
	border: 1.5px solid var(--gold);
	color: var(--gold);
	/* 添加轻微的发光效果 */
	box-shadow: 0 0 5px rgba(242, 194, 48, 0.2);
	-webkit-text-fill-color: var(--gold); /* 确保在所有浏览器中颜色正确显示 */
	-webkit-font-smoothing: antialiased; /* 改善字体渲染 */
}