diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 41e9d75e..9abe462e 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -139,7 +139,7 @@ export default async function Home() {
 	];
 
 	return (
-		<div className="mx-auto w-full max-w-6xl flex flex-col gap-6 px-1 sm:px-0 md:gap-8 pb-12 md:pb-16">
+		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 px-1 sm:px-0 md:gap-10 pb-12 md:pb-16">
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
@@ -327,98 +327,132 @@ export default async function Home() {
 
 			{/* ── Features ── */}
 			<Reveal>
-				<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
-					{features.map((f) => (
-						<SurfaceCard
-							key={f.title}
-							className="card-glow relative p-4 sm:p-5 text-center hover:-translate-y-1"
-						>
-							<div
-								className="mx-auto mb-3 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl"
-								style={{
-									background:
-										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
-									boxShadow:
-										"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent)",
-								}}
+				<div className="flex flex-col gap-4">
+					<div>
+						<span className="eyebrow">{tp("sectionFeaturesLabel")}</span>
+						<h2 className="section-title mt-2 text-xl sm:text-2xl">
+							{tp("sectionFeaturesTitle")}
+						</h2>
+					</div>
+					<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
+						{features.map((f) => (
+							<SurfaceCard
+								key={f.title}
+								className="card-glow relative p-4 sm:p-5 text-center hover:-translate-y-1"
 							>
-								<Image src={f.icon} alt="" width={24} height={24} unoptimized />
-							</div>
-							<h3
-								className="text-sm sm:text-base font-extrabold mb-1"
-								style={{
-									color: "var(--color-text-readable)",
-									fontFamily: "var(--font-nunito)",
-								}}
-							>
-								{f.title}
-							</h3>
-							<p
-								className="text-xs sm:text-sm leading-relaxed"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{f.desc}
-							</p>
-						</SurfaceCard>
-					))}
+								<div
+									className="mx-auto mb-3 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+										boxShadow:
+											"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent)",
+									}}
+								>
+									<Image
+										src={f.icon}
+										alt=""
+										width={24}
+										height={24}
+										unoptimized
+									/>
+								</div>
+								<h3
+									className="text-sm sm:text-base font-extrabold mb-1"
+									style={{
+										color: "var(--color-text-readable)",
+										fontFamily: "var(--font-nunito)",
+									}}
+								>
+									{f.title}
+								</h3>
+								<p
+									className="text-xs sm:text-sm leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{f.desc}
+								</p>
+							</SurfaceCard>
+						))}
+					</div>
 				</div>
 			</Reveal>
 
 			{/* ── Stats + Login ── */}
 			<Reveal>
-				<div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
-					{[
-						{
-							value: users,
-							label: tp("statsCitizens"),
-							icon: "/assets/images/icons/friends.png",
-							live: false,
-						},
-						{
-							value: rooms,
-							label: tp("statsRooms"),
-							icon: "/assets/images/icons/catalog.png",
-							live: false,
-						},
-						{
-							value: online,
-							label: tp("statsOnline"),
-							icon: "/assets/images/icons/navigation/me.png",
-							live: true,
-						},
-						{
-							value: articles?.length ?? null,
-							label: tp("statsArticles"),
-							icon: "/assets/images/icons/article.gif",
-							live: false,
-						},
-					].map((s) => (
-						<SurfaceCard
-							key={s.label}
-							className="card-glow relative p-3 sm:p-5 text-center hover:-translate-y-1"
-						>
-							<div className="mb-0.5 text-2xl sm:text-3xl font-black tracking-tight md:text-4xl">
-								{s.value === null ? (
-									<span className="text-base">{te("unavailable")}</span>
-								) : s.live ? (
-									<LiveOnlineCounter initial={s.value} />
-								) : (
-									<AnimatedCounter value={s.value} />
-								)}
-							</div>
-							<div
-								className="text-[10px] sm:text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-1 sm:gap-1.5"
-								style={{ color: "var(--color-text-muted)" }}
+				<div className="flex flex-col gap-4">
+					<div>
+						<span className="eyebrow">{tp("sectionStatsLabel")}</span>
+						<h2 className="section-title mt-2 text-xl sm:text-2xl">
+							{tp("sectionStatsTitle")}
+						</h2>
+					</div>
+					<div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-4">
+						{[
+							{
+								value: users,
+								label: tp("statsCitizens"),
+								icon: "/assets/images/icons/friends.png",
+								live: false,
+							},
+							{
+								value: rooms,
+								label: tp("statsRooms"),
+								icon: "/assets/images/icons/catalog.png",
+								live: false,
+							},
+							{
+								value: online,
+								label: tp("statsOnline"),
+								icon: "/assets/images/icons/navigation/me.png",
+								live: true,
+							},
+							{
+								value: articles?.length ?? null,
+								label: tp("statsArticles"),
+								icon: "/assets/images/icons/article.gif",
+								live: false,
+							},
+						].map((s) => (
+							<SurfaceCard
+								key={s.label}
+								className="card-glow relative p-3 sm:p-5 text-center hover:-translate-y-1"
 							>
-								<Image src={s.icon} alt="" width={14} height={14} unoptimized />
-								{s.label}
-							</div>
-						</SurfaceCard>
-					))}
+								<div className="mb-0.5 text-2xl sm:text-3xl font-black tracking-tight md:text-4xl">
+									{s.value === null ? (
+										<span className="text-base">{te("unavailable")}</span>
+									) : s.live ? (
+										<LiveOnlineCounter initial={s.value} />
+									) : (
+										<AnimatedCounter value={s.value} />
+									)}
+								</div>
+								<div
+									className="text-[10px] sm:text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-1 sm:gap-1.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									<Image
+										src={s.icon}
+										alt=""
+										width={14}
+										height={14}
+										unoptimized
+									/>
+									{s.label}
+								</div>
+							</SurfaceCard>
+						))}
+					</div>
 				</div>
 			</Reveal>
 
 			{/* ── Login + Online users ── */}
+			<div>
+				<span className="eyebrow">{tp("sectionCommunityLabel")}</span>
+				<h2 className="section-title mt-2 text-xl sm:text-2xl">
+					{tp("sectionCommunityTitle")}
+				</h2>
+			</div>
 			<div className="flex flex-col gap-4 md:flex-row">
 				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
 					<SurfaceCard
diff --git a/src/app/globals.css b/src/app/globals.css
index 1b64b51d..acdc3c26 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2055,3 +2055,31 @@ details[open] > summary .details-open\:rotate-180 {
 	background-clip: text;
 	color: transparent;
 }
+
+/* Section eyebrow label with a small accent tick. */
+.eyebrow {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 11px;
+	font-weight: 800;
+	letter-spacing: 0.18em;
+	text-transform: uppercase;
+	color: var(--color-primary-readable, var(--color-primary));
+}
+.eyebrow::before {
+	content: "";
+	width: 1.25rem;
+	height: 2px;
+	border-radius: 999px;
+	background: currentColor;
+	opacity: 0.75;
+}
+
+/* Section heading on the public landing pages. */
+.section-title {
+	color: var(--color-text-readable);
+	font-family: var(--font-nunito);
+	font-weight: 900;
+	letter-spacing: -0.02em;
+}
diff --git a/src/messages/en.json b/src/messages/en.json
index c663d05a..ecf51402 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -282,7 +282,13 @@
 			"featuresCommunity": "Community",
 			"featuresCommunityDesc": "Make friends and chat",
 			"featuresGames": "Games",
-			"featuresGamesDesc": "Compete and have fun"
+			"featuresGamesDesc": "Compete and have fun",
+			"sectionFeaturesLabel": "Features",
+			"sectionFeaturesTitle": "Everything a great hotel needs",
+			"sectionStatsLabel": "Live stats",
+			"sectionStatsTitle": "A community that keeps growing",
+			"sectionCommunityLabel": "Community",
+			"sectionCommunityTitle": "Make yourself at home"
 		},
 		"news": {
 			"title": "News",