/* =========================================================
   FENGYUAN DISPLAY — components.css
   Shared UI primitives (buttons, chips, cards, form, etc.).
   ========================================================= */

/* ===== Buttons ===================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease),
				color var(--dur-fast) var(--ease),
				border-color var(--dur-fast) var(--ease),
				transform var(--dur-fast) var(--ease);
	text-decoration: none;
	white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
}
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-white); }

.btn--outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }

.btn--ghost {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255,255,255,0.6);
}
.btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--color-white); border-color: var(--color-white); }

.btn--dark {
	background: var(--color-dark);
	color: var(--color-white);
}
.btn--dark:hover { background: #000; color: var(--color-white); }

.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--lg { padding: 15px 30px; font-size: 15px; }

/* Icons */
.fd-icon {
	display: inline-block;
	vertical-align: middle;
	color: currentColor;
}

/* ===== Trust bar (4-column credibility tiles below hero) =========== */

.trust-bar {
	background: var(--color-white);
	padding: 28px 0;
	margin-top: -40px;
	position: relative;
	z-index: 5;
}

.trust-bar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.trust-bar__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.trust-bar__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.trust-bar__icon {
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-primary);
	flex: 0 0 44px;
}

.trust-bar__label {
	font-weight: 600;
	font-size: 15px;
	color: var(--color-dark);
	letter-spacing: .01em;
}

/* ===== Category card =============================================== */

.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--color-dark);
	padding: 16px 10px 20px;
	border-radius: var(--radius);
	transition: transform var(--dur) var(--ease);
}
.category-card:hover { transform: translateY(-4px); color: var(--color-dark); }

.category-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	border-radius: var(--radius);
	margin-bottom: 16px;
	background-color: var(--color-panel);
}

.category-card__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
	max-width: 160px;
	margin-bottom: 10px;
}

.category-card__arrow {
	color: var(--color-primary);
	transition: transform var(--dur-fast) var(--ease);
}
.category-card:hover .category-card__arrow { transform: translateX(4px); }

/* ===== Project card ================================================ */

.project-card {
	display: block;
	text-decoration: none;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--color-dark); }

.project-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--color-panel);
}

.project-card__body {
	position: relative;
	display: block;
	padding: 18px 22px 22px;
}

.project-card__title {
	display: block;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 6px;
	color: var(--color-dark);
}

.project-card__subtitle {
	display: block;
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.55;
	padding-right: 36px;
}

.project-card__arrow {
	position: absolute;
	right: 22px;
	bottom: 22px;
	color: var(--color-primary);
	transition: transform var(--dur-fast) var(--ease);
}
.project-card:hover .project-card__arrow { transform: translateX(4px); }

/* ===== Feature item (Why Choose Us / Product features) ============ */

.feature-item {
	text-align: center;
	padding: 8px 12px;
}

.feature-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	color: var(--color-dark);
	margin-bottom: 16px;
}

.feature-item__title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--color-dark);
}

.feature-item__text {
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.65;
	max-width: 240px;
	margin: 0 auto;
}

/* ===== Process step =============================================== */

.process-steps__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}

.process-step {
	position: relative;
	padding: 10px 36px 10px 0;
}

.process-step__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.process-step__number {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: .02em;
}

.process-step__icon {
	color: var(--color-dark);
}

.process-step__title {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--color-dark);
}

.process-step__text {
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.6;
	max-width: 260px;
	margin: 0;
}

.process-step__connector {
	position: absolute;
	top: 28px;
	right: 6px;
	color: var(--color-primary);
}

/* ===== CTA banner ================================================= */

.cta-banner {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin: 48px 0;
}

.cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 24px 28px;
}

.cta-banner__left {
	display: flex;
	align-items: center;
	gap: 20px;
}

.cta-banner__icon {
	width: 56px; height: 56px;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	flex: 0 0 56px;
}

.cta-banner__title {
	margin: 0 0 4px;
	font-size: 18px;
	color: var(--color-dark);
}

.cta-banner__subtitle {
	margin: 0;
	color: var(--color-muted);
	font-size: 14px;
}