.fbs-product-hub,
.fbs-product-hub * { box-sizing: border-box; }

.fbs-product-hub {
	--fbs-ink: #142f43;
	--fbs-muted: #586979;
	--fbs-paper: #fffaf6;
	width: min(96vw, 92rem);
	margin: clamp(2rem, 5vw, 5rem) auto;
	color: var(--fbs-ink);
	font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.fbs-product-hub__hero {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 5vw, 5rem);
	text-align: center;
	background:
		radial-gradient(circle at 15% 15%, rgba(232, 170, 91, .26), transparent 28%),
		radial-gradient(circle at 88% 20%, rgba(158, 116, 173, .24), transparent 30%),
		linear-gradient(135deg, #fff8ed 0%, #f7edf4 52%, #eef5fb 100%);
	border: 1px solid rgba(101, 74, 87, .16);
	border-radius: 2rem 2rem .75rem .75rem;
	box-shadow: 0 1.5rem 4rem rgba(50, 44, 59, .12);
}

.fbs-product-hub__hero::before,
.fbs-product-hub__hero::after {
	position: absolute;
	width: 18rem;
	aspect-ratio: 1;
	content: "";
	border: 1px solid rgba(138, 80, 80, .14);
	border-radius: 50%;
}
.fbs-product-hub__hero::before { top: -11rem; left: -6rem; }
.fbs-product-hub__hero::after { right: -7rem; bottom: -12rem; }

.fbs-product-kicker {
	margin: 0 0 .7rem !important;
	color: #a04858 !important;
	font-size: clamp(.72rem, 1vw, .84rem) !important;
	font-weight: 900 !important;
	letter-spacing: .13em;
}

.fbs-product-hub__hero h2 {
	margin: 0;
	color: var(--fbs-ink);
	font-family: Georgia, "Noto Serif TC", serif;
	font-size: clamp(2.15rem, 5vw, 4.8rem);
	line-height: 1.12;
}

.fbs-product-hub__hero > p:not(.fbs-product-kicker):not(.fbs-product-hub__languages) {
	max-width: 52rem;
	margin: 1.25rem auto 0;
	color: var(--fbs-muted);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.85;
}

.fbs-product-hub__languages { margin: 1.25rem 0 0; color: #765a6e; font-weight: 800; letter-spacing: .06em; }
.fbs-product-grid { display: grid; gap: 1.25rem; margin-top: 1.25rem; }

.fbs-product-card {
	--accent: #7e5d8f;
	--accent-soft: #f0e6f3;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.5rem, 3.5vw, 3rem);
	background: rgba(255, 255, 255, .9);
	border: 1px solid color-mix(in srgb, var(--accent) 25%, white);
	border-radius: 1.5rem;
	box-shadow: 0 1rem 3rem rgba(44, 53, 66, .09);
}
.fbs-product-card--blogger { --accent: #d16b2f; --accent-soft: #fff0e4; }
.fbs-product-card--wordpress { --accent: #277a99; --accent-soft: #e4f3f8; }
.fbs-product-card--mohan { --accent: #8f526e; --accent-soft: #f6e8ef; }

.fbs-product-card__copy h2 { margin: 0; color: var(--fbs-ink); font: 800 clamp(2rem, 4vw, 3.75rem)/1.08 Georgia, "Noto Serif TC", serif; }
.fbs-product-card__copy h2 span { display: block; margin-top: .45rem; color: var(--accent); font-family: inherit; font-size: .42em; letter-spacing: .04em; }
.fbs-product-card__copy > strong { display: block; margin-top: 1.25rem; color: var(--accent); font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.fbs-product-card__copy > p:not(.fbs-product-kicker) { margin: .75rem 0 0; color: var(--fbs-muted); line-height: 1.8; }

.fbs-product-card__release { padding: 1.2rem; background: var(--accent-soft); border-radius: 1.15rem; }
.fbs-product-card__release > p { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .85rem; }
.fbs-product-card__release > p span { color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.fbs-product-card__release > p strong { color: var(--fbs-ink); font-family: ui-monospace, Consolas, monospace; }
.fbs-product-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fbs-product-download-item { min-width: 0; }

.fbs-product-download {
	display: flex;
	min-height: 4.5rem;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: .9rem 1.25rem;
	color: #fff !important;
	font-size: 1.05rem;
	font-weight: 900;
	text-align: center;
	text-decoration: none !important;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #101f32), var(--accent));
	border-radius: 1rem;
	box-shadow: 0 .7rem 1.4rem color-mix(in srgb, var(--accent) 23%, transparent);
	transition: transform .18s ease, box-shadow .18s ease;
}
.fbs-product-download:hover,
.fbs-product-download:focus-visible { color: #fff !important; transform: translateY(-2px); box-shadow: 0 1rem 1.7rem color-mix(in srgb, var(--accent) 30%, transparent); }
.fbs-product-download:active { transform: translateY(1px) scale(.99); }
.fbs-product-download small { margin-top: .25rem; font-size: .72rem; font-weight: 600; opacity: .82; }
.fbs-product-download__file { overflow-wrap: anywhere; }
.fbs-product-download em { margin-bottom: .35rem; padding: .16rem .48rem; color: #fff; font-size: .62rem; font-style: normal; letter-spacing: .08em; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; }

.fbs-product-card details { margin-top: .75rem; color: var(--fbs-muted); font-size: .78rem; }
.fbs-product-card summary { cursor: pointer; font-weight: 800; }
.fbs-product-card code { display: block; overflow-wrap: anywhere; margin-top: .45rem; padding: .55rem; color: #33485a; background: rgba(255,255,255,.7); border-radius: .5rem; }
.fbs-product-card nav { display: flex; flex-wrap: wrap; gap: .5rem .85rem; margin-top: .85rem; }
.fbs-product-card nav a { color: var(--accent) !important; font-size: .78rem; font-weight: 800; text-decoration: none !important; }
.fbs-product-card nav a:hover,
.fbs-product-card nav a:focus-visible { text-decoration: underline !important; }

.fbs-product-hub__manifesto { margin-top: 1.25rem; padding: clamp(1.75rem, 4vw, 3.5rem); text-align: center; background: #142f43; border-radius: .75rem 2rem 2rem; }
.fbs-product-hub__manifesto h2 { margin: 0; color: #fff5df; font: 700 clamp(1.6rem, 3vw, 2.7rem)/1.35 Georgia, "Noto Serif TC", serif; }
.fbs-product-hub__manifesto p { max-width: 55rem; margin: 1rem auto 0; color: #d8e1e7; line-height: 1.85; }

.fbs-product-hub--featured .fbs-product-hub__hero { padding-block: clamp(1.75rem, 4vw, 3rem); }
.fbs-product-hub--featured .fbs-product-hub__hero h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.fbs-product-hub--featured .fbs-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fbs-product-hub--featured .fbs-product-card { display: flex; min-width: 0; flex-direction: column; align-items: stretch; padding: 1.4rem; }
.fbs-product-hub--featured .fbs-product-card__copy { flex: 1; }
.fbs-product-hub--featured .fbs-product-card__copy h2 { font-size: clamp(1.7rem, 2.4vw, 2.5rem); }
.fbs-product-hub--featured .fbs-product-card__release { width: 100%; }

.fbs-product-card--feature {
	width: min(100%, 78rem);
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	margin: clamp(2rem, 5vw, 4rem) auto;
}
.fbs-product-card--feature .fbs-product-card__copy { text-align: center; }
.fbs-product-card--feature .fbs-product-card__release { width: 100%; }
.fbs-product-card--feature .fbs-product-downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
	.fbs-product-hub--featured .fbs-product-grid { grid-template-columns: 1fr; }
	.fbs-product-hub--featured .fbs-product-card,
	.fbs-product-card { grid-template-columns: 1fr; }
	.fbs-product-card--feature .fbs-product-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.fbs-product-hub { width: min(100%, calc(100vw - 1rem)); margin-block: 1rem 2rem; }
	.fbs-product-hub__hero { padding: 1.5rem 1.1rem; border-radius: 1.25rem .5rem .5rem; }
	.fbs-product-hub__hero h2 { font-size: clamp(1.85rem, 10vw, 2.7rem); }
	.fbs-product-hub__languages { font-size: .78rem; line-height: 1.7; }
	.fbs-product-card { gap: 1.2rem; padding: 1.2rem; border-radius: 1.1rem; }
	.fbs-product-card__copy h2 { font-size: clamp(1.75rem, 11vw, 2.6rem); }
	.fbs-product-card__release > p { align-items: flex-start; flex-direction: column; }
	.fbs-product-downloads { grid-template-columns: 1fr; }
	.fbs-product-card--feature .fbs-product-downloads { grid-template-columns: 1fr; }
	.fbs-product-card nav { gap: .65rem 1rem; }
	.fbs-product-hub__manifesto { padding: 1.5rem 1.1rem; border-radius: .5rem 1.25rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fbs-product-download { transition: none; }
}