@charset "utf-8";

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
		sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #333333;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

ul,
ol {
	list-style: none;
}

p {
	text-align: justify;
	/* 两端对齐 */
	text-align-last: left;
	/* 最后一行左对齐（关键） */
}

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: #f0f1f3;
}

::-webkit-scrollbar-thumb {
	background: #c4c8d0;
	border-radius: 3px;
}

/* ======================================
       BANNER  (hgsoln- prefix)
    ====================================== */
.hgsoln-banner {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
	margin-top: 0;
	/* 去除顶部导航后不再需要避开固定导航栏 */
}

.hgsoln-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	filter: brightness(0.72) saturate(0.75);
	transform: scale(1.04);
	transition: transform 8s ease;
}

.hgsoln-banner:hover .hgsoln-banner__img {
	transform: scale(1.0);
}

.hgsoln-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
			rgba(26, 26, 24, 0.62) 0%,
			rgba(26, 26, 24, 0.28) 60%,
			transparent 100%);
}

.hgsoln-banner__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 40px 40px;
	max-width: 1280px;
	margin: 0 auto;
}

.hgsoln-banner__label {
	display: inline-block;
	font-family: 'Outfit', 'Noto Sans SC', sans-serif;
	font-size: 11.2px;
	font-weight: 600;
	letter-spacing: 2.464px;
	text-transform: uppercase;
	color: #c9a96e;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(12px);
	animation: fadeUp 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hgsoln-banner__title {
	font-family: 'Outfit', 'Noto Sans SC', sans-serif;
	font-size: clamp(25.6px, 3.2vw, 38.4px);
	font-weight: 700;
	color: #f8f8f4;
	letter-spacing: -0.64px;
	line-height: 1.18;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(14px);
	animation: fadeUp 0.8s 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hgsoln-banner__sub {
	font-size: 14.08px;
	font-weight: 400;
	color: rgba(248, 248, 244, 0.72);
	letter-spacing: 0.2816px;
	max-width: 520px;
	line-height: 1.7;
	opacity: 0;
	transform: translateY(14px);
	animation: fadeUp 0.8s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ======================================
       MAIN BODY  (solunit- prefix)
    ====================================== */
.solunit-main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 40px 80px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 48px;
	align-items: start;
}

/* --- Left column --- */
.solunit-left {}

/* Header */
.solunit-header {
	text-align: center;
	margin-bottom: 52px;
}

.solunit-header__eyebrow {
	display: inline-block;
	font-size: 10.88px;
	font-weight: 600;
	letter-spacing: 2.176px;
	text-transform: uppercase;
	color: #a07c4a;
	margin-bottom: 16px;
}

.solunit-header__h1 {
	font-family: 'Outfit', 'Noto Sans SC', sans-serif;
	font-size: clamp(30.4px, 3.5vw, 44.8px);
	font-weight: 700;
	letter-spacing: -0.912px;
	line-height: 1.14;
	margin-bottom: 18px;
}

.solunit-header__desc {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.solunit-header__rule {
	width: 40px;
	height: 2px;
	background: #a07c4a;
	margin: 22px auto 0;
}

/* Card Grid */
.solunit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

/* Single Card */
.solunit-card {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	cursor: pointer;
	/* background: #efefec; */
}

.solunit-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
	filter: brightness(0.65) saturate(0.6);
}

.solunit-card:hover .solunit-card__img {
	transform: scale(1.055);
	filter: brightness(0.48) saturate(0.55);
}

/* Gradient overlay bottom */
.solunit-card__overlay {
	position: absolute;
	inset: 0;
	/* background: linear-gradient(to top,
			rgba(16, 16, 14, 0.88) 0%,
			rgba(16, 16, 14, 0.35) 45%,
			transparent 100%);
	transition: opacity 0.5s ease; */
}

.solunit-card:hover .solunit-card__overlay {
	opacity: 1;
}

/* Card text */
.solunit-card__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 22px 22px 20px;
	z-index: 2;
}

.solunit-card__tag {
	display: inline-block;
	font-size: 9.92px;
	font-weight: 600;
	letter-spacing: 1.7856px;
	text-transform: uppercase;
	color: #c9a96e;
	margin-bottom: 7px;
}

.solunit-card__title {
	font-family: 'Outfit', 'Noto Sans SC', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #f4f4f0;
	letter-spacing: -0.16px;
	line-height: 1.32;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.solunit-card:hover .solunit-card__title {
	transform: translateY(-4px);
}

/* The reveal block (p + a) */
.solunit-card__reveal {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(12px);
	transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.45s 0.06s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.45s 0.06s cubic-bezier(0.16, 1, 0.3, 1);
}

.solunit-card:hover .solunit-card__reveal {
	max-height: 120px;
	opacity: 1;
	transform: translateY(0);
}

.solunit-card__desc {
	font-size: 13px;
	color: rgba(244, 244, 240, 0.72);
	line-height: 1.7;
	margin-top: 10px;
	margin-bottom: 14px;
	width: 80%;
}

.solunit-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: #c9a96e;
	transition: gap 0.25s ease, color 0.25s ease;
}

.solunit-card__link:hover {
	gap: 10px;
	color: #e8c88a;
}

.solunit-card__link svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Pagination */
.solunit-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 44px;
}

.solunit-page-btn {
	width: 36px;
	height: 36px;
	border-radius: 2px;
	border: 1px solid #ddddd8;
	background: #fafaf8;
	color: #5a5a54;
	font-size: 13.12px;
	font-family: 'Outfit', 'Noto Sans SC', sans-serif;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.25s ease,
		background 0.25s ease,
		color 0.25s ease;
}

.solunit-page-btn:hover {
	border-color: #a07c4a;
	color: #a07c4a;
}

.solunit-page-btn.active {
	background: #1a1a18;
	border-color: #1a1a18;
	color: #f4f4f2;
}

.solunit-page-btn.arrow svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ======================================
       RIGHT SIDEBAR
    ====================================== */
.solunit-sidebar {
	position: sticky;
	top: 24px;
	/* 去除导航后无需再避开导航栏高度 */
}

.solunit-sidebar__block {
	margin-bottom: 32px;
}

.solunit-sidebar__label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2.112px;
	text-transform: uppercase;
	color: #666666;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddddd8;
}

.solunit-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.solunit-sidebar__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	transition: border-color 0.25s ease,
		background 0.25s ease;
	cursor: pointer;
}

.solunit-sidebar__item:hover {
	border-color: #ddddd8;
	background: #fafaf8;
}

.solunit-sidebar__icon {
	width: 32px;
	height: 32px;
	background: #efefec;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.solunit-sidebar__icon svg {
	width: 15px;
	height: 15px;
	stroke: #a07c4a;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.solunit-sidebar__text {}

.solunit-sidebar__name {
	font-size: 13.12px;
	font-weight: 600;
	color: #1a1a18;
	line-height: 1.3;
}

.solunit-sidebar__sub {
	font-size: 11.2px;
	color: #8f8f88;
	margin-top: 2px;
}

.solunit-sidebar__arrow {
	margin-left: auto;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.solunit-sidebar__item:hover .solunit-sidebar__arrow {
	opacity: 1;
	transform: translateX(3px);
}

.solunit-sidebar__arrow svg {
	width: 13px;
	height: 13px;
	stroke: #a07c4a;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sidebar CTA */
.solunit-sidebar__cta {
	display: block;
	text-align: center;
	padding: 13px 20px;
	background: #1a1a18;
	color: #f4f4f2;
	border-radius: 4px;
	font-size: 12.8px;
	font-weight: 600;
	letter-spacing: 0.768px;
	transition: background 0.28s ease, transform 0.2s ease;
	margin-top: 16px;
}

.solunit-sidebar__cta:hover {
	background: #7a5c2e;
	transform: translateY(-1px);
}

/* ======================================
       FOOTER  (home- prefix)
    ====================================== */
.home-footer {
	/* background: #fafafa; */
	background: rgba(245, 245, 243, 0.90);
	/* 	background: rgba(220, 220, 220, 0.9); */
	/* color: rgba(244, 244, 242, 0.75); */
	/* padding: 48px 0 48px; */
	margin: 48px 0 48px;
}

.home-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 40px 56px;
	display: grid;
	/* grid-template-columns: 1.6fr 1fr 1fr 160px; */
	grid-template-columns: 520px 1fr 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* Left: About */
.home-footer__about {
	/* background-color: #c4c8d0;
	border-radius: 8px; */
	padding: 0 60px 0 0;
}

.home-footer__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.home-footer__about-h4 {
	font-size: 16px;
	font-weight: 600;
	/* color: rgba(244, 244, 242, 0.62); */
	/* color: #333333; */
	margin-bottom: 8px;
	letter-spacing: 0.4992px;
}

.home-footer__about-p {
	font-size: 13px;
	font-weight: 200;
	/* color: rgba(244, 244, 242, 0.62); */
	/* color: #333333; */
	margin-bottom: 10px;
}

.home-footer__about-note {
	font-size: 14px;
	font-weight: 200;
	/* color: rgba(244, 244, 242, 0.62); */
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgb(0 0 0 / 16%);
}

.home-footer__about-note strong {
	font-size: 17px;
	font-weight: 600;
	color: #0071BC;
	margin-top: 10px;
	padding-top: 8px;
}

/* Mid: Nav columns */
.home-footer__nav-col {}

.home-footer__nav-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	/* color: rgba(244, 244, 242, 0.62); */
	margin-bottom: 18px;
}

.home-footer__nav-list {}

.home-footer__nav-list li {
	margin-bottom: 10px;
}

.home-footer__nav-list a {
	font-size: 14px;
	/* color: rgba(244, 244, 242, 0.62); */
	transition: color 0.2s ease;
}

.home-footer__nav-list a:hover {
	color: #c9a96e;
}

/* Right: WeChat */
.home-footer__wechat {}

.home-footer__wechat-label {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.9584px;
	text-transform: uppercase;
	/* color: rgba(244, 244, 242, 0.62); */
	margin-bottom: 16px;
}

.home-footer__wechat-text {
	font-size: 13px;
	margin-bottom: 6px;
}

.home-footer__wechat-img {
	width: 128px;
	height: 128px;
	object-fit: cover;
	/* 	border: 1px solid rgba(244, 244, 242, 0.12); */
	z-index: 100;
}

/* Bottom bar */
.home-footer__bottom {
	border-top: 1px solid rgba(244, 244, 242, 0.08);
	/* margin: 0 0 40px 0; */
}

.home-footer__bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 40px 18px;
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
	background-color: #fafafa;
	border-top: 1px solid #e2e2e2;
}

.home-footer__copy {
	font-size: 13px;
	/* color: rgba(244, 244, 242, 0.35); */
}

.home-footer__icp {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	/* color: rgba(244, 244, 242, 0.35); */
	transition: color 0.2s ease;
}

.home-footer__icp:hover {
	color: rgba(244, 244, 242, 0.6);
}

.home-footer__icp img {
	width: 18px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	/* opacity: 0.5; */
}

.home-footer__legal {
	display: flex;
	align-items: center;
	gap: 14px;
}

.home-footer__legal a {
	font-size: 13px;
	/* color: rgba(244, 244, 242, 0.35); */
	transition: color 0.2s ease;
}

.home-footer__legal a:hover {
	color: rgba(244, 244, 242, 0.6);
}

.home-footer__legal-sep {
	color: rgba(244, 244, 242, 0.2);
	font-size: 13px;
}

/* ======================================
       SCROLL REVEAL ANIMATION
    ====================================== */
.js-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.js-reveal-delay-1 {
	transition-delay: 0.08s;
}

.js-reveal-delay-2 {
	transition-delay: 0.16s;
}

.js-reveal-delay-3 {
	transition-delay: 0.24s;
}

.js-reveal-delay-4 {
	transition-delay: 0.32s;
}

/* ======================================
       RESPONSIVE
    ====================================== */
@media (max-width: 1100px) {
	.solunit-main {
		grid-template-columns: 1fr 260px;
		gap: 36px;
	}

	.home-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}

	.home-footer__wechat {
		grid-column: span 1;
	}
}

@media (max-width: 900px) {
	.solunit-main {
		grid-template-columns: 1fr;
		padding: 40px 20px 60px;
		gap: 52px;
	}

	.solunit-sidebar {
		position: static;
		border-top: 1px solid #ddddd8;
		padding-top: 40px;
	}

	.hgsoln-banner__content {
		padding: 0 20px 32px;
	}

	.breadcrumb__inner {
		padding: 12px 20px;
	}
}

@media (max-width: 680px) {
	.solunit-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.solunit-card {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 900px) {
	.home-footer__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0 20px 44px;
	}

	.home-footer__nav-col--secondary {
		display: none;
	}

	.home-footer__nav-mobile {
		display: flex;
		justify-content: center;
		gap: 10px;
		flex-wrap: wrap;
	}

	.home-footer__nav-mobile a {
		font-size: 14px;
		/* color: rgba(244, 244, 242, 0.72); */
		border: 1px solid rgba(244, 244, 242, 0.18);
		/* background: rgb(53 53 53 / 10%); */
		backdrop-filter: blur(6px);
		padding: 8px 18px;
		border-radius: 100px;
		transition: border-color 0.25s ease, background 0.25s ease;
	}

	.home-footer__nav-mobile a:hover {
		border-color: #a07c4a;
		background: rgba(160, 124, 74, 0.12);
	}

	.home-footer__nav-mobile a {
		font-size: 14px;
		padding: 8px 18px;
		border-radius: 100px;
		display: inline-block;
		/* 从纯白半透改为浅灰半透，视觉上更深一点 */
		background: rgba(220, 220, 218, 0.50);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.03);
		border: 1px solid rgba(0, 0, 0, 0.08);
		color: rgba(0, 0, 0, 0.75);
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.home-footer__nav-mobile a:hover {
		transform: translateY(-2px);
		background: rgba(200, 200, 198, 0.60);
		/* 悬浮时再深一点点 */
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(0, 0, 0, 0.06);
		border-color: rgba(0, 0, 0, 0.12);
		color: #000;
	}


	.home-footer__nav-col--primary {
		display: none;
	}

	.home-footer__wechat {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.home-footer__wechat-img {
		margin: 0 auto;
	}

	.home-footer__bottom-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 12px 20px;
		gap: 6px;
	}

	.home-footer__about {
		padding: 32px 20px 12px;
	}
}

@media (min-width: 901px) {
	.home-footer__nav-mobile {
		display: none;
	}
}

/* ======================================
       METAL SHIMMER on accent lines
    ====================================== */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.solunit-header__rule {
	background: linear-gradient(90deg,
			#7a5c2e 0%,
			#c9a96e 50%,
			#7a5c2e 100%);
	background-size: 200% 100%;
	animation: shimmer 3s linear infinite;
}

/* Page transition fade */
.solunit-grid {
	transition: opacity 0.3s ease;
}

.solunit-grid.fading {
	opacity: 0;
}