/* =========================================================
   FENGYUAN DISPLAY — pages/home.css
   Homepage-specific sections.
   ========================================================= */

/* ===== Hero ======================================================== */

.hero-home {
	position: relative;
	min-height: 620px;
	background-size: cover;
	background-position: center;
	background-color: var(--color-dark);
	color: var(--color-white);
	padding: 180px 0 140px;
	display: flex;
	align-items: center;
}

.hero-home__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.15) 100%);
	z-index: 1;
}

.hero-home__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.hero-home__title {
	color: var(--color-white);
	font-size: 54px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

.hero-home__subtitle {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255,255,255,0.86);
	margin: 0 0 36px;
	max-width: 560px;
}

.hero-home__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ===== Product categories (home) ================================== */

.product-categories__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
}

/* ===== Featured projects ========================================== */

.featured-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* ===== Why choose us ============================================== */

.why-choose-us__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

/* ===== Process section ============================================ */

.process-steps {
	background: var(--color-white);
}