/* ============================================================
 * meper.cn  —  主门户样式
 * 继承自华冠科技 v2.0dev 设计语言 (#3586ea + #2a323c, rem 缩放)
 * 1rem = document.documentElement.clientWidth / 19.2 px
 * ============================================================ */

:root {
	--primary: #3586ea;
	--primary-dark: #1f6cd0;
	--primary-light: #e8f2fe;
	--footer-bg: #2a323c;
	--footer-line: #656565;
	--text: #333;
	--text-2: #666;
	--text-3: #999;
	--bg: #fff;
	--bg-grey: #f5f7fa;
	--bg-grey-2: #eef2f6;
	--line: #e8e8e8;
	--success: #41b883;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
	--shadow:    0 6px 24px rgba(0, 0, 0, .08);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, .12);
	--radius:    10px;
	--radius-lg: 18px;
}

/* ============================================================
 *  全局基础 (extend common.css)
 * ============================================================ */
body { background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
.tc { text-align: center; }
.fl { float: left; }
.fr { float: right; }
.clear::after { content: ''; display: block; clear: both; }

/* ============================================================
 *  HERO
 * ============================================================ */
.hero {
	position: relative;
	height: 100vh;
	min-height: 5.6rem;
	background: url("../img/platform/MEPER-Banner.png") center top / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .72) 100%);
}
.hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #fff;
	max-width: 12rem;
	padding: 0 .3rem;
}
.hero__badge {
	display: inline-block;
	padding: .06rem .22rem;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 100px;
	font-size: .14rem;
	letter-spacing: .04em;
	margin-bottom: .3rem;
	backdrop-filter: blur(4px);
	background: rgba(255, 255, 255, .08);
}
.hero__title {
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 .25rem;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .3);
}
.hero__title .accent { color: #5fb4ff; }
.hero__sub {
	font-size: .22rem;
	font-weight: 300;
	opacity: .92;
	margin: 0 0 .6rem;
	line-height: 1.6;
}
.hero__cta { display: inline-flex; gap: .2rem; flex-wrap: wrap; justify-content: center; }
.btn {
	display: inline-block;
	padding: .14rem .36rem;
	font-size: .16rem;
	border-radius: 4px;
	cursor: pointer;
	transition: all .2s;
	border: none;
	text-decoration: none;
	line-height: 1.4;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53, 134, 234, .35); }
.btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.btn--ghost:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #369870; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(65, 184, 131, .35); }
.btn--outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn--outline:hover { background: var(--primary); color: #fff; }

.hero__scroll {
	position: absolute;
	bottom: .4rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: #fff;
	font-size: .12rem;
	opacity: .8;
	text-align: center;
	animation: scrollBounce 2.4s infinite;
}
.hero__scroll img { width: .24rem; display: block; margin: 0 auto .08rem; }
@keyframes scrollBounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}

/* ============================================================
 *  定位条
 * ============================================================ */
.positioning {
	background: linear-gradient(135deg, #f8fbff 0%, #eef4fc 100%);
	padding: .4rem 0;
	border-bottom: 1px solid var(--line);
}
.positioning__inner {
	max-width: 16rem;
	margin: 0 auto;
	padding: 0 .4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .3rem;
	flex-wrap: wrap;
}
.positioning__text { font-size: .2rem; color: var(--text-2); line-height: 1.7; flex: 1; min-width: 5rem; }
.positioning__text strong { color: var(--text); font-weight: 600; }
.positioning__stats { display: flex; gap: .4rem; }
.stat__item { text-align: center; }
.stat__num { font-size: .42rem; font-weight: 700; color: var(--primary); line-height: 1; }
.stat__num small { font-size: .16rem; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.stat__lbl { font-size: .14rem; color: var(--text-3); margin-top: .06rem; }

/* ============================================================
 *  通用 section
 * ============================================================ */
.section { padding: 1rem .4rem; max-width: 16rem; margin: 0 auto; }
.section__head { text-align: center; margin-bottom: .6rem; }
.section__eyebrow {
	display: inline-block;
	font-size: .16rem;
	color: var(--primary);
	letter-spacing: .16em;
	font-weight: 500;
	margin-bottom: .14rem;
}
.section__title {
	font-size: .38rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 .16rem;
	line-height: 1.3;
}
.section__sub {
	font-size: .2rem;
	color: var(--text-2);
	max-width: 8rem;
	margin: 0 auto;
	line-height: 1.7;
}

/* ============================================================
 *  产品网格 (4 cards)
 * ============================================================ */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .3rem;
}
.product-card {
	position: relative;
	display: block;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: .5rem .4rem;
	border: 1px solid var(--line);
	overflow: hidden;
	transition: transform .35s, box-shadow .35s, border-color .35s;
	color: var(--text);
}
.product-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary) 0%, #5fb4ff 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary); color: var(--text); }
.product-card:hover::before { transform: scaleX(1); }
.product-card__icon {
	width: .6rem;
	height: .6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	margin-bottom: .25rem;
	color: #fff;
	font-size: .28rem;
}
.product-card__icon.modelhub     { background: linear-gradient(135deg, #3586ea 0%, #5fb4ff 100%); }
.product-card__icon.agent       { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%); }
.product-card__icon.neuro       { background: linear-gradient(135deg, #00b894 0%, #55efc4 100%); }
.product-card__icon.meper-cloud { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); }
.product-card__name { font-size: .22rem; font-weight: 600; margin: 0 0 .08rem; }
.product-card__tag { font-size: .15rem; color: var(--primary); margin-bottom: .16rem; }
.product-card__desc { font-size: .18rem; color: var(--text-2); line-height: 1.7; margin: 0 0 .25rem; }
.product-card__features { display: flex; flex-wrap: wrap; gap: .06rem; margin-bottom: .25rem; }
.product-card__features span {
	font-size: .14rem;
	padding: .04rem .12rem;
	background: var(--bg-grey);
	color: var(--text-2);
	border-radius: 4px;
}
.product-card__link { font-size: .16rem; color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: .04rem; }
.product-card__link::after { content: '→'; transition: transform .2s; }
.product-card:hover .product-card__link::after { transform: translateX(4px); }

/* ============================================================
 *  平台能力
 * ============================================================ */
.capability {
	background: var(--bg-grey);
}
.capability-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .2rem;
}
.capability-card {
	background: #fff;
	padding: .35rem .22rem;
	border-radius: var(--radius);
	text-align: center;
	transition: transform .25s, box-shadow .25s;
}
.capability-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.capability-card__icon {
	width: .5rem;
	height: .5rem;
	margin: 0 auto .18rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-light);
	color: var(--primary);
	border-radius: 12px;
}
.capability-card__icon svg { width: .28rem; height: .28rem; }
.capability-card__name { font-size: .2rem; font-weight: 600; margin: 0 0 .08rem; color: var(--text); }
.capability-card__desc { font-size: .15rem; color: var(--text-2); line-height: 1.6; margin: 0; }

/* ============================================================
 *  客户 logo (15个客户 - 5x3 完美布局)
 * ============================================================ */
.clients-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .25rem;
}
.client-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: .3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1rem;
	opacity: 0.8;
	transition: opacity 0.3s, transform 0.3s, border-color 0.3s, filter 0.3s, box-shadow 0.3s;
}
.client-item:hover { 
	opacity: 1; 
	transform: translateY(-6px) scale(1.15); 
	border-color: var(--primary); 
	box-shadow: 0 12px 28px rgba(53, 134, 234, 0.2);
	filter: brightness(1.08);
	z-index: 10;
}
.client-item img { 
	max-width: 85%; 
	max-height: .6rem; 
	object-fit: contain; 
	transition: transform 0.3s;
}
.client-item:hover img {
	transform: scale(1.12);
}

/* 响应式布局 */
@media (max-width: 1024px) and (min-width: 768px) {
	.clients-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: .2rem;
	}
}

@media (max-width: 767px) and (min-width: 481px) {
	.clients-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: .15rem;
	}
	.client-item {
		height: .8rem;
		padding: .2rem;
	}
	.client-item img {
		max-height: .45rem;
	}
}

@media (max-width: 480px) {
	.clients-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .12rem;
	}
	.client-item {
		height: .7rem;
		padding: .15rem;
	}
	.client-item img {
		max-height: .4rem;
	}
}

/* ============================================================
 *  推荐语
 * ============================================================ */
.testimonial {
	background: linear-gradient(135deg, #fff 0%, #f0f6ff 100%);
}
.testimonial-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .4rem;
	align-items: center;
}
.testimonial__quote {
	background: #fff;
	padding: .4rem;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	position: relative;
}
.testimonial__quote::before {
	content: '“';
	position: absolute;
	top: -.1rem;
	left: .2rem;
	font-size: .8rem;
	color: var(--primary);
	opacity: .2;
	font-family: Georgia, serif;
}
.testimonial__text { font-size: .2rem; line-height: 1.9; color: var(--text); margin: 0 0 .25rem; }
.testimonial__author { display: flex; align-items: center; gap: .15rem; }
.testimonial__avatar {
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary) 0%, #5fb4ff 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .14rem;
	font-weight: 600;
}
.testimonial__author strong { display: block; font-size: .14rem; color: var(--text); }
.testimonial__author span { font-size: .12rem; color: var(--text-3); }
.testimonial__image {
	background: #fff;
	border-radius: var(--radius-lg);
	height: 3.2rem;
	overflow: hidden;
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-3);
	font-size: .14rem;
	background-image:
		linear-gradient(135deg, rgba(53, 134, 234, .1) 0%, rgba(95, 180, 255, .05) 100%),
		radial-gradient(circle at 30% 30%, rgba(53, 134, 234, .15) 0%, transparent 50%),
		radial-gradient(circle at 70% 70%, rgba(108, 92, 231, .12) 0%, transparent 50%);
}

/* ============================================================
 *  CTA banner
 * ============================================================ */
.cta {
	background: linear-gradient(135deg, var(--primary) 0%, #1f6cd0 100%);
	color: #fff;
	padding: .7rem .4rem;
	text-align: center;
}
.cta h2 { font-size: .38rem; margin: 0 0 .16rem; font-weight: 700; }
.cta p { font-size: .2rem; opacity: .9; margin: 0 0 .3rem; }
.cta__buttons { display: inline-flex; gap: .16rem; flex-wrap: wrap; justify-content: center; }
.cta .btn--ghost { background: rgba(255, 255, 255, .12); }
.cta .btn--white { background: #fff; color: var(--primary); font-weight: 600; }
.cta .btn--white:hover { background: #f0f6ff; color: var(--primary-dark); }

/* ============================================================
 *  滚动揭示
 * ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.product-card, .capability-card, .client-item, .btn { transition: none; }
}

/* ============================================================
 *  性能卓越 见即所得
 * ============================================================ */
.performance {
	background: linear-gradient(135deg, #f8fbff 0%, #eef4fc 100%);
}
.performance-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .3rem;
}
.performance-card {
	background: #fff;
	padding: .4rem .3rem;
	border-radius: var(--radius-lg);
	text-align: center;
	transition: transform .25s, box-shadow .25s;
	border: 1px solid var(--line);
}
.performance-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--primary);
}
.performance-card__icon {
	width: .52rem;
	height: .52rem;
	margin: 0 auto .2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(53, 134, 234, .12) 0%, rgba(95, 180, 255, .12) 100%);
	border-radius: 14px;
	color: var(--primary);
}
.performance-card__icon svg {
	width: .24rem;
	height: .24rem;
}
.performance-card__value {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: .36rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: .08rem;
	background: linear-gradient(120deg, var(--primary) 0%, #1f6cd0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.performance-card__label {
	font-size: .14rem;
	color: var(--text-2);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.performance-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: .2rem;
	}
}
@media (max-width: 480px) {
	.performance-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
	.clients-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: .15rem;
	}
}

@media (max-width: 480px) {
	.clients-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: .12rem;
	}
	.client-item {
		height: .7rem;
	}
	.client-item img {
		max-height: .4rem;
	}
}