diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index ab3a058e..93327483 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -4,8 +4,27 @@ import { headers } from "next/headers";
 import Image from "next/image";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
+import type { CSSProperties, ReactNode } from "react";
+import { AnimatedCounter } from "@/components/animated-counter";
+import { HomeLoginForm } from "@/components/auth/home-login-form";
+import { Clock } from "@/components/clock";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import Link from "@/components/link";
+import { LiveOnlineCounter } from "@/components/live-online-counter";
+import { Reveal } from "@/components/motion-reveal";
 import { PublicLoadError } from "@/components/public/load-error";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { TypewriterText } from "@/components/typewriter-text";
+import { auth } from "@/lib/auth";
+import { cached } from "@/lib/cache";
+import { CameraWeb, db, Rooms, User } from "@/lib/db";
+import { formatDate } from "@/lib/format-date";
+import { resolveHotelName } from "@/lib/hotel-name";
+import { captchaConfig } from "@/lib/services/captcha";
+import { getNewsList } from "@/lib/services/news-list";
 import { publicReadFailure } from "@/lib/services/public-read";
+import { siteSettings } from "@/lib/services/site-settings";
 import {
 	ICON_ARTICLE,
 	ICON_CAMERA,
@@ -28,26 +47,117 @@ export const metadata: Metadata = {
 	},
 };
 
-import { AmbientOrbs } from "@/components/ambient-orbs";
-import { AnimatedCounter } from "@/components/animated-counter";
-import { HomeLoginForm } from "@/components/auth/home-login-form";
-import { Clock } from "@/components/clock";
-import { LanguageSwitcher } from "@/components/language-switcher";
-import Link from "@/components/link";
-import { LiveOnlineCounter } from "@/components/live-online-counter";
-import { Reveal } from "@/components/motion-reveal";
-import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
-import { SurfaceCard } from "@/components/surface-card";
-import { ThemeSwitcher } from "@/components/theme-switcher";
-import { TypewriterText } from "@/components/typewriter-text";
-import { auth } from "@/lib/auth";
-import { cached } from "@/lib/cache";
-import { CameraWeb, db, Rooms, User } from "@/lib/db";
-import { formatDate } from "@/lib/format-date";
-import { resolveHotelName } from "@/lib/hotel-name";
-import { captchaConfig } from "@/lib/services/captcha";
-import { getNewsList } from "@/lib/services/news-list";
-import { siteSettings } from "@/lib/services/site-settings";
+// ── Local visual language (theme-aware, no big white blocks) ──────────
+const PANEL_BG =
+	"linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, color-mix(in srgb, var(--color-surface) 58%, transparent) 52%, color-mix(in srgb, var(--color-accent) 9%, transparent) 100%)";
+
+const PANEL_STYLE: CSSProperties = {
+	background: PANEL_BG,
+	backdropFilter: "blur(18px)",
+	WebkitBackdropFilter: "blur(18px)",
+	borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+	boxShadow:
+		"0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent), 0 24px 60px -30px color-mix(in srgb, #000 28%, transparent)",
+};
+
+const DARK_BAND =
+	"linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 30%, #0a0e1e) 0%, color-mix(in srgb, var(--color-accent) 26%, #0a0e1e) 52%, color-mix(in srgb, var(--color-primary) 20%, #0a0e1e) 100%)";
+
+const GLASS_TILE_BG =
+	"linear-gradient(155deg, color-mix(in srgb, var(--color-surface) 60%, transparent) 0%, color-mix(in srgb, var(--color-surface) 44%, transparent) 60%, color-mix(in srgb, var(--color-accent) 6%, transparent) 100%)";
+
+interface GlassPanelProps {
+	children: ReactNode;
+	title?: string;
+	icon?: string;
+	actionHref?: string;
+	actionLabel?: string;
+	bodyClassName?: string;
+	className?: string;
+}
+
+function GlassPanel({
+	children,
+	title,
+	icon,
+	actionHref,
+	actionLabel,
+	bodyClassName,
+	className,
+}: GlassPanelProps) {
+	const hasHeader = Boolean(title || icon);
+
+	return (
+		<div
+			className={`card-glow card-hairline relative overflow-hidden rounded-2xl border ${
+				className ?? ""
+			}`}
+			style={PANEL_STYLE}
+		>
+			{hasHeader && (
+				<div
+					className="flex items-center justify-between gap-3 border-b px-5 py-4"
+					style={{
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						background:
+							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%)",
+					}}
+				>
+					<div className="flex min-w-0 items-center gap-2.5">
+						{icon && (
+							<div
+								className="flex h-9 w-9 shrink-0 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) 18%, transparent)",
+								}}
+							>
+								<Image
+									src={icon}
+									alt=""
+									width={18}
+									height={18}
+									unoptimized
+									className="opacity-90"
+								/>
+							</div>
+						)}
+						{title && (
+							<h2
+								className="truncate text-sm font-extrabold tracking-wide"
+								style={{
+									fontFamily: "var(--font-nunito)",
+									color: "var(--color-text-readable)",
+								}}
+							>
+								{title}
+							</h2>
+						)}
+					</div>
+					{actionHref && actionLabel && (
+						<Link
+							href={actionHref}
+							className="shrink-0 text-xs font-bold transition-all duration-300 hover:translate-x-0.5"
+							style={{
+								color: "var(--color-primary-readable, var(--color-primary))",
+							}}
+						>
+							{actionLabel}
+						</Link>
+					)}
+				</div>
+			)}
+			{hasHeader ? (
+				<div className={bodyClassName ?? "p-5"}>{children}</div>
+			) : (
+				children
+			)}
+		</div>
+	);
+}
 
 async function getHotelData() {
 	const [hotelName, logo] = await Promise.all([
@@ -168,26 +278,26 @@ export default async function Home() {
 		<Link
 			key={a.slug}
 			href={`/news/${a.slug}`}
-			className="group relative w-full overflow-hidden rounded-xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl"
+			className="group relative w-full overflow-hidden rounded-2xl transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl"
 			style={{
 				height: featured
-					? "clamp(220px, 26vw, 280px)"
-					: "clamp(170px, 18vw, 210px)",
-				backgroundColor: "var(--color-background)",
+					? "clamp(240px, 28vw, 320px)"
+					: "clamp(180px, 20vw, 230px)",
+				backgroundColor: "var(--color-text-muted)",
 				border:
 					"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 			}}
 		>
-			<div className="relative h-full w-full overflow-hidden rounded-xl">
+			<div className="relative h-full w-full overflow-hidden rounded-2xl">
 				<Image
 					src={a.image}
 					alt={a.title}
 					fill
 					sizes={featured ? "100vw" : "(max-width: 640px) 100vw, 33vw"}
-					className="rounded-xl object-cover transition-transform duration-700 ease-out group-hover:scale-108"
+					className="rounded-2xl object-cover transition-transform duration-700 ease-out group-hover:scale-108"
 				/>
-				<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-foreground/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
-					<span className="text-sm font-bold text-primary-foreground">→</span>
+				<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-black/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
+					<span className="text-sm font-bold text-white">→</span>
 				</div>
 				<div
 					className="absolute left-2.5 top-2.5 rounded-full px-2 py-0.5 text-[10px] font-bold backdrop-blur-sm"
@@ -211,7 +321,7 @@ export default async function Home() {
 						</p>
 					)}
 					<h3
-						className={`line-clamp-2 font-bold text-primary-foreground text-shadow-sm ${
+						className={`line-clamp-2 font-bold text-white text-shadow-sm ${
 							featured ? "text-base sm:text-2xl" : "text-sm sm:text-base"
 						}`}
 					>
@@ -219,7 +329,7 @@ export default async function Home() {
 					</h3>
 					<p
 						className="mt-0.5 text-[10px] sm:text-[11px] font-semibold opacity-80"
-						style={{ color: "var(--color-text-muted)" }}
+						style={{ color: "#cbd5e1" }}
 					>
 						{formatDate(a.createdAt, "date", "")}
 					</p>
@@ -228,19 +338,47 @@ export default async function Home() {
 		</Link>
 	);
 
+	const exploreLinks = [
+		{ href: "/community", label: tn("community") },
+		{ href: "/news", label: tn("articles") },
+		{ href: "/photos", label: tn("photos") },
+		{ href: "/radio", label: tn("radio") },
+		{ href: "/shop", label: tn("shop") },
+		{ href: "/rankings", label: tn("rankings") },
+	];
+
+	const statChips = [
+		{ value: users, label: tp("statsCitizens"), color: "var(--color-primary)" },
+		{ value: rooms, label: tp("statsRooms"), color: "var(--color-accent)" },
+		{
+			value: totalPhotos,
+			label: tp("statsPhotos"),
+			color: "var(--color-primary)",
+		},
+		{
+			value: articles?.length ?? null,
+			label: tp("statsArticles"),
+			color: "var(--color-accent)",
+		},
+	].filter((s) => s.value !== null) as Array<{
+		value: number;
+		label: string;
+		color: string;
+	}>;
+
 	return (
-		<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 className="flex w-full flex-col gap-14 pb-16 pt-2 md:gap-20 md:pb-24">
+			{/* ── Top bar ── */}
+			<Reveal className="mx-auto w-full max-w-7xl">
 				<div
-					className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3 card-hairline"
+					className="flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
 					style={{
 						background:
-							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
+							"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
 						backdropFilter: "blur(14px)",
 						WebkitBackdropFilter: "blur(14px)",
 						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 						boxShadow:
 							"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
 					}}
@@ -254,35 +392,46 @@ export default async function Home() {
 								height={28}
 								className="shrink-0 object-contain"
 								unoptimized
-								style={{ maxHeight: 28, width: "auto", height: "auto" }}
+								style={{ maxHeight: 26, width: "auto", height: "auto" }}
 							/>
 						) : (
-							<Image
-								src={ICON_LIGHTHOUSE}
-								alt={hotelName}
-								width={28}
-								height={28}
-								className="shrink-0"
-								unoptimized
-							/>
+							<div
+								className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
+								style={{
+									background:
+										"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
+									boxShadow:
+										"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
+								}}
+							>
+								<Image
+									src={ICON_LIGHTHOUSE}
+									alt=""
+									width={18}
+									height={18}
+									className="shrink-0"
+									unoptimized
+									style={{ filter: "brightness(0) invert(1)" }}
+								/>
+							</div>
 						)}
 						<span
-							className="hidden sm:inline text-sm font-extrabold uppercase tracking-wide"
+							className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
 							style={{ color: "var(--color-text-readable)" }}
 						>
 							{hotelName}
 						</span>
 					</div>
 					<div
-						className="flex items-center gap-1 sm:gap-1.5 rounded-lg px-1.5 py-1 sm:px-2"
+						className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1"
 						style={{
 							background:
-								"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+								"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
 						}}
 					>
 						<LanguageSwitcher />
 						<div
-							className="hidden sm:block w-px h-5"
+							className="hidden w-px h-5 sm:block"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
@@ -301,17 +450,9 @@ export default async function Home() {
 				</div>
 			</Reveal>
 
-			{/* ── Hero ── */}
-			<Reveal>
-				<div
-					className="relative overflow-hidden rounded-xl border"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-						boxShadow:
-							"0 4px 24px rgba(0,0,0,0.08), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
-					}}
-				>
+			{/* ── Cinematic hero ── */}
+			<Reveal className="-mx-3 sm:-mx-4 md:-mx-6">
+				<div className="relative overflow-hidden">
 					<Image
 						src="/assets/images/next_header.jpg"
 						alt=""
@@ -325,457 +466,183 @@ export default async function Home() {
 						className="absolute inset-0"
 						style={{
 							background:
-								"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, transparent) 0%, color-mix(in srgb, var(--color-surface) 45%, transparent) 50%, color-mix(in srgb, var(--color-surface) 12%, transparent) 100%)",
+								"linear-gradient(180deg, rgba(8,11,24,0.74) 0%, rgba(8,11,24,0.55) 38%, rgba(8,11,24,0.38) 62%, rgba(8,11,24,0.55) 85%, color-mix(in srgb, var(--color-background) 94%, transparent) 100%)",
 						}}
 					/>
-					<div
-						className="absolute inset-0"
-						style={{
-							background:
-								"linear-gradient(to top, color-mix(in srgb, var(--color-surface) 40%, transparent) 0%, transparent 55%)",
-						}}
-					/>
-					<AmbientOrbs />
-					<div className="hero-ring" aria-hidden="true" style={{ zIndex: 3 }} />
-					{/* Floating mascot — decorative, hidden on smaller screens. */}
 					<div
 						aria-hidden="true"
-						className="pointer-events-none absolute bottom-3 left-4 hidden lg:block xl:bottom-5 xl:left-8"
-						style={{ zIndex: 2 }}
-					>
-						<div className="brand-halo left-1/2 top-1/2 h-40 w-40 -translate-x-1/2 -translate-y-1/2 xl:h-48 xl:w-48" />
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt=""
-							width={104}
-							height={138}
-							priority
-							unoptimized
-							className="relative animate-float object-contain drop-shadow-xl"
-						/>
-					</div>
-					<div
-						className="relative mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-8 px-4 py-12 text-center sm:px-6 sm:py-14 md:px-12 md:py-20 lg:grid-cols-[1.15fr_0.85fr] lg:gap-10 lg:text-left"
-						style={{ zIndex: 2 }}
-					>
-						<div className="relative flex flex-col items-center gap-5 sm:gap-7 lg:items-start lg:text-left">
-							<div
-								className="brand-halo left-1/2 top-6 h-48 w-48 -translate-x-1/2 sm:h-64 sm:w-64 lg:left-0 lg:translate-x-0"
-								style={{ zIndex: -1 }}
-							/>
-							<h1
-								className="text-2xl font-black leading-[1.05] tracking-tight sm:text-3xl md:text-5xl lg:text-6xl"
-								style={{
-									fontFamily: "var(--font-nunito)",
-									textShadow:
-										"0 1px 0 color-mix(in srgb, #ffffff 35%, transparent), 0 2px 14px color-mix(in srgb, #000 28%, transparent)",
-								}}
-							>
-								<span style={{ color: "var(--color-text-readable)" }}>
-									{tp("welcome", { hotelName: "" })}
-								</span>{" "}
-								<span className="gradient-text">
-									<TypewriterText text={hotelName} />
-								</span>
-							</h1>
-							<p
-								className="text-sm leading-relaxed max-w-2xl sm:text-base md:text-lg"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{tp("welcomeBody")}
-							</p>
-							<div className="flex flex-wrap justify-center gap-2.5 sm:gap-3 lg:justify-start">
-								<Link
-									href="/register"
-									className="btn-shine inline-flex items-center gap-2 sm:gap-2.5 font-extrabold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl transition-all duration-300 ease-out hover:scale-[1.03] active:scale-95 shadow-lg"
-									style={{
-										background: "var(--color-primary)",
-										color: "var(--color-primary-foreground)",
-										boxShadow:
-											"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-									}}
-								>
-									<Image
-										src="/assets/images/EnterHubbly.png"
-										alt=""
-										width={20}
-										height={20}
-										unoptimized
-									/>
-									{tp("register")}
-								</Link>
-								<Link
-									href="/login"
-									className="inline-flex items-center gap-2 font-bold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl border-2 transition-all duration-300 ease-out hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
-									style={{
-										borderColor:
-											"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
-										color: "var(--color-text-readable)",
-										background:
-											"color-mix(in srgb, var(--color-surface) 50%, transparent)",
-									}}
-								>
-									{th("login")}
-								</Link>
-							</div>
-						</div>
-
-						{/* ── Live status panel ── */}
-						<div className="relative mx-auto w-full max-w-md lg:mx-0 lg:justify-self-end">
-							<div
-								className="card-glow card-hairline relative overflow-hidden rounded-2xl border p-5 text-left sm:p-6"
-								style={{
-									background:
-										"color-mix(in srgb, var(--color-surface) 78%, transparent)",
-									backdropFilter: "blur(12px)",
-									WebkitBackdropFilter: "blur(12px)",
-									borderColor:
-										"color-mix(in srgb, var(--color-primary) 18%, transparent)",
-								}}
-							>
-								<div
-									aria-hidden="true"
-									className="brand-halo left-1/2 top-0 h-40 w-72 max-w-full -translate-x-1/2 -translate-y-1/2"
-								/>
-								<div className="relative flex flex-wrap items-center justify-between gap-2">
-									<span
-										className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border"
-										style={{
-											background:
-												"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-											borderColor:
-												"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-											color:
-												"var(--color-primary-readable, var(--color-primary))",
-										}}
-									>
-										<span className="relative flex h-1.5 w-1.5">
-											<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-											<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
-										</span>
-										{tp("onlineNow")}
-									</span>
-									<span
-										className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest"
-										style={{
-											background:
-												"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-											color: "var(--color-text-muted)",
-										}}
-									>
-										{rooms === null ? (
-											<span>{te("unavailable")}</span>
-										) : (
-											<AnimatedCounter value={rooms} />
-										)}
-										{tp("statsRooms")}
-									</span>
-								</div>
-								<div className="relative mt-4">
-									<div className="gradient-text text-5xl font-black tracking-tight leading-none sm:text-6xl">
-										{online === null ? (
-											<span
-												className="text-xl font-bold underline decoration-transparent"
-												style={{
-													color: "var(--color-text-muted)",
-												}}
-											>
-												{te("unavailable")}
-											</span>
-										) : (
-											<LiveOnlineCounter initial={online} />
-										)}
-									</div>
-									<p
-										className="mt-2 text-[11px] font-bold uppercase tracking-widest"
-										style={{ color: "var(--color-text-muted)" }}
-									>
-										{hotelName}
-									</p>
-								</div>
-								<div className="relative mt-5">
-									{recentUsers === null ? (
-										<span
-											className="text-xs"
-											style={{ color: "var(--color-text-muted)" }}
-										>
-											{te("unavailable")}
-										</span>
-									) : recentUsers.length > 0 ? (
-										<div className="flex -space-x-2">
-											{recentUsers.slice(0, 6).map((u) => (
-												<UserAvatarThumbnail
-													key={u.username}
-													figure={u.look}
-													alt={u.username}
-													options={{ direction: 2 }}
-													className="h-9 w-9 rounded-full ring-2 ring-[color-mix(in_srgb,var(--color-surface)_90%,transparent)]"
-												/>
-											))}
-										</div>
-									) : (
-										<span
-											className="text-xs"
-											style={{ color: "var(--color-text-muted)" }}
-										>
-											{tp("noUsers")}
-										</span>
-									)}
-								</div>
-								<div
-									className="relative mt-5 flex items-center justify-between gap-3 border-t pt-4"
-									style={{
-										borderTopColor:
-											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
-									}}
-								>
-									<span
-										className="text-[10px] font-bold uppercase tracking-widest"
-										style={{ color: "var(--color-text-muted)" }}
-									>
-										{tp("liveUpdates")}
-									</span>
-									<Link
-										href="/community"
-										className="inline-flex items-center gap-1 text-xs font-extrabold transition-transform duration-300 hover:translate-x-0.5"
-										style={{
-											color:
-												"var(--color-primary-readable, var(--color-primary))",
-										}}
-									>
-										{tp("allUsers")} →
-									</Link>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</Reveal>
-
-			{/* ── Features ── */}
-			<Reveal>
-				<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, i) => {
-							const accentVar =
-								i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)";
-							return (
-								<SurfaceCard
-									key={f.title}
-									className="group card-glow card-hairline relative p-4 sm:p-5 text-center transition-all duration-300 hover:-translate-y-1.5"
-								>
-									<div
-										className="mx-auto mb-3 h-1 w-9 rounded-full opacity-80 transition-all duration-300 group-hover:w-14 group-hover:opacity-100"
-										style={{
-											background: `linear-gradient(90deg, ${accentVar}, color-mix(in srgb, ${accentVar} 45%, var(--color-accent)))`,
-										}}
-									/>
-									<div
-										className="mx-auto mb-3 flex h-11 w-11 sm:h-12 sm:w-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"
-										style={{
-											background: `color-mix(in srgb, ${accentVar} 14%, transparent)`,
-											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 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="flex flex-col gap-4">
-					<div className="flex flex-wrap items-end justify-between gap-3">
-						<div>
-							<span className="eyebrow">{tp("sectionStatsLabel")}</span>
-							<h2 className="section-title mt-2 text-xl sm:text-2xl">
-								{tp("sectionStatsTitle")}
-							</h2>
-						</div>
+						className="brand-halo left-1/2 top-1/2 h-[420px] w-[720px] max-w-full -translate-x-1/2 -translate-y-1/2"
+						style={{ opacity: 0.5, zIndex: 1 }}
+					/>
+					<div className="relative z-10 mx-auto flex min-h-[540px] w-full max-w-6xl flex-col items-center justify-center px-4 py-24 text-center sm:min-h-[580px] lg:min-h-[640px]">
 						<span
-							className="hidden items-center gap-2 rounded-full border px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest sm:inline-flex"
+							className="glass-chip gap-2.5 px-4 py-2"
 							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-primary) 22%, transparent)",
-								background:
-									"color-mix(in srgb, var(--color-primary) 8%, transparent)",
-								color: "var(--color-primary-readable, var(--color-primary))",
+								fontWeight: 800,
+								letterSpacing: "0.14em",
+								textTransform: "uppercase",
 							}}
 						>
-							<span className="relative flex h-1.5 w-1.5">
-								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-								<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
+							<span className="relative flex h-2 w-2">
+								<span
+									className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-70"
+									style={{ background: "var(--color-primary)" }}
+								/>
+								<span
+									className="relative inline-flex h-2 w-2 rounded-full"
+									style={{ background: "var(--color-primary)" }}
+								/>
 							</span>
-							{tp("liveUpdates")}
-						</span>
-					</div>
-					<div
-						className="card-glow card-hairline relative overflow-hidden rounded-3xl border p-5 sm:p-8"
-						style={{
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 16%, transparent)",
-							background:
-								"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), color-mix(in srgb, var(--color-accent) 8%, transparent))",
-						}}
-					>
-						<div
-							aria-hidden="true"
-							className="brand-halo left-1/2 top-0 h-52 w-[640px] max-w-full -translate-x-1/2 -translate-y-1/2"
-						/>
-						<div className="relative grid grid-cols-2 gap-x-4 gap-y-7 lg:grid-cols-4">
-							{[
-								{
-									value: users,
-									label: tp("statsCitizens"),
-									icon: ICON_FRIENDS,
-									live: false,
-								},
-								{
-									value: rooms,
-									label: tp("statsRooms"),
-									icon: ICON_CATALOG,
-									live: false,
-								},
-								{
-									value: totalPhotos,
-									label: tp("statsPhotos"),
-									icon: ICON_CAMERA,
-									live: false,
-								},
-								{
-									value: articles?.length ?? null,
-									label: tp("statsArticles"),
-									icon: ICON_ARTICLE,
-									live: false,
-								},
-							].map((s) => (
-								<div
-									key={s.label}
-									className="group relative flex flex-col items-center gap-2.5 text-center lg:border-l lg:border-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] lg:first:border-l-0 lg:px-4"
+							<span
+								className="text-[10px] font-black sm:text-xs"
+								style={{ color: "var(--color-text-readable)" }}
+							>
+								{tp("onlineNow")}
+							</span>
+							{online === null ? (
+								<span className="text-xs">{te("unavailable")}</span>
+							) : (
+								<span
+									className="text-sm sm:text-base"
+									style={{
+										color:
+											"var(--color-primary-readable, var(--color-primary))",
+										fontWeight: 900,
+									}}
 								>
-									<div
-										className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
+									<LiveOnlineCounter initial={online} />
+								</span>
+							)}
+						</span>
+
+						<h1
+							className="mt-7 sm:mt-8"
+							style={{ fontFamily: "var(--font-nunito)" }}
+						>
+							<span
+								className="mb-3 block text-xs font-extrabold uppercase tracking-[0.32em] sm:text-sm"
+								style={{ color: "rgba(255,255,255,0.72)" }}
+							>
+								{tp("welcome", { hotelName: "" })}
+							</span>
+							<span className="gradient-text drop-shadow-[0_2px_24px_rgba(0,0,0,0.55)] block text-5xl font-black leading-[1.02] tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
+								<TypewriterText text={hotelName} />
+							</span>
+						</h1>
+
+						<p
+							className="mt-6 max-w-xl text-sm font-semibold leading-relaxed sm:text-base md:text-lg"
+							style={{ color: "rgba(255,255,255,0.78)" }}
+						>
+							{tp("welcomeBody")}
+						</p>
+
+						<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
+							<Link
+								href="/register"
+								className="btn-shine inline-flex items-center gap-2.5 rounded-2xl px-8 py-4 text-sm font-black uppercase tracking-wider transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.02] active:scale-95"
+								style={{
+									background:
+										"linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
+									color: "var(--color-primary-foreground)",
+									boxShadow:
+										"0 12px 40px -8px color-mix(in srgb, var(--color-primary) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 55%, transparent)",
+								}}
+							>
+								<Image
+									src="/assets/images/EnterHubbly.png"
+									alt=""
+									width={20}
+									height={20}
+									unoptimized
+								/>
+								{tp("register")}
+							</Link>
+							<Link
+								href="/login"
+								className="inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-bold text-white transition-all duration-300 ease-out hover:-translate-y-1 hover:bg-white/10 active:scale-95"
+								style={{
+									background: "rgba(255,255,255,0.07)",
+									border: "1px solid rgba(255,255,255,0.24)",
+									backdropFilter: "blur(8px)",
+									WebkitBackdropFilter: "blur(8px)",
+								}}
+							>
+								{th("login")} →
+							</Link>
+						</div>
+
+						{/* Floating stat chips */}
+						<div className="mt-12 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
+							{statChips.map((s) => (
+								<span key={s.label} className="glass-chip">
+									<span
+										className="glass-chip-dot"
+										style={{ background: s.color }}
+									/>
+									<span
+										className="glass-chip-value"
 										style={{
-											background: s.live
-												? "color-mix(in srgb, var(--color-primary) 18%, transparent)"
-												: "color-mix(in srgb, var(--color-accent) 14%, transparent)",
-											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${
-												s.live ? "var(--color-primary)" : "var(--color-accent)"
-											} 18%, transparent)`,
+											color: "var(--color-text-readable)",
+											fontSize: "1rem",
 										}}
 									>
-										<Image
-											src={s.icon}
-											alt=""
-											width={20}
-											height={20}
-											unoptimized
-										/>
-									</div>
-									<div
-										className={`text-3xl font-black tracking-tight sm:text-4xl ${
-											s.live ? "gradient-text" : ""
-										}`}
-										style={
-											s.live
-												? undefined
-												: { color: "var(--color-text-readable)" }
-										}
-									>
-										{s.value === null ? (
-											<span className="text-base">{te("unavailable")}</span>
-										) : s.live ? (
-											<LiveOnlineCounter initial={s.value} />
-										) : (
-											<AnimatedCounter value={s.value} />
-										)}
-									</div>
-									<div
-										className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest sm:text-xs"
-										style={{
-											background: s.live
-												? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
-												: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-											color: s.live
-												? "var(--color-primary-readable, var(--color-primary))"
-												: "var(--color-text-muted)",
-										}}
-									>
-										{s.live && (
-											<span className="relative flex h-1.5 w-1.5">
-												<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-												<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
-											</span>
-										)}
-										{s.label}
-									</div>
-								</div>
+										<AnimatedCounter value={s.value} />
+									</span>
+									<span className="glass-chip-label">{s.label}</span>
+								</span>
 							))}
 						</div>
 					</div>
+
+					{/* Floating mascot — decorative, hidden on smaller screens. */}
+					<div
+						aria-hidden="true"
+						className="pointer-events-none absolute bottom-8 right-8 hidden lg:block xl:right-14"
+						style={{ zIndex: 2 }}
+					>
+						<div className="brand-halo left-1/2 top-1/2 h-44 w-44 -translate-x-1/2 -translate-y-1/2 xl:h-52 xl:w-52" />
+						<Image
+							src="/assets/images/FrankwithBag.gif"
+							alt=""
+							width={96}
+							height={128}
+							priority
+							unoptimized
+							className="relative animate-float object-contain drop-shadow-2xl"
+						/>
+					</div>
+
+					<div className="hero-ring" aria-hidden="true" />
 				</div>
 			</Reveal>
 
 			{/* ── Quick explore ── */}
-			<Reveal>
+			<Reveal className="-mt-3 mx-auto w-full max-w-7xl">
 				<nav
 					aria-label={tp("exploreLabel")}
-					className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-6"
+					className="flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"
 				>
-					{[
-						{ href: "/community", label: tn("community") },
-						{ href: "/news", label: tn("articles") },
-						{ href: "/photos", label: tn("photos") },
-						{ href: "/radio", label: tn("radio") },
-						{ href: "/shop", label: tn("shop") },
-						{ href: "/rankings", label: tn("rankings") },
-					].map((l) => (
+					{exploreLinks.map((l) => (
 						<Link
 							key={l.href}
 							href={l.href}
-							className="card-hairline group inline-flex items-center justify-center gap-1.5 rounded-xl border px-3 py-2.5 text-xs font-bold transition-all duration-300 hover:-translate-y-0.5 sm:text-sm"
+							className="group inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-xs font-bold transition-all duration-300 hover:-translate-y-0.5 sm:text-sm"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-surface) 55%, transparent)",
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+								border:
+									"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 								color: "var(--color-text-readable)",
+								backdropFilter: "blur(10px)",
+								WebkitBackdropFilter: "blur(10px)",
+								boxShadow:
+									"0 2px 8px -2px color-mix(in srgb, #000 8%, transparent)",
 							}}
 						>
 							{l.label}
 							<span
-								className="text-[10px] transition-transform duration-300 group-hover:translate-x-0.5"
+								className="-translate-x-1 text-[10px] opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
 								style={{
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
@@ -787,18 +654,180 @@ export default async function Home() {
 				</nav>
 			</Reveal>
 
-			{/* ── Login + Online users ── */}
-			<Reveal>
-				<div className="flex flex-col gap-4">
-					<div>
-						<span className="eyebrow">{tp("sectionCommunityLabel")}</span>
-						<h2 className="section-title mt-2 text-xl sm:text-2xl">
-							{tp("sectionCommunityTitle")}
-						</h2>
+			{/* ── Features ── */}
+			<Reveal className="mx-auto w-full max-w-7xl">
+				<div className="flex flex-col gap-6 sm:gap-8">
+					<div className="flex flex-wrap items-end justify-between gap-3">
+						<div>
+							<span className="eyebrow">{tp("sectionFeaturesLabel")}</span>
+							<h2
+								className="section-title mt-2 text-2xl sm:text-3xl md:text-4xl"
+								style={{ letterSpacing: "-0.02em" }}
+							>
+								{tp("sectionFeaturesTitle")}
+							</h2>
+						</div>
+					</div>
+					<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-5">
+						{features.map((f, i) => {
+							const accentVar =
+								i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)";
+							return (
+								<div
+									key={f.title}
+									className="card-glow card-hairline group relative overflow-hidden rounded-2xl border p-6 transition-all duration-500 hover:-translate-y-1.5 hover:shadow-2xl sm:p-7"
+									style={{
+										background: GLASS_TILE_BG,
+										backdropFilter: "blur(16px)",
+										WebkitBackdropFilter: "blur(16px)",
+										borderColor:
+											"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+									}}
+								>
+									<span
+										aria-hidden="true"
+										className="pointer-events-none absolute right-5 top-4 select-none text-5xl font-black leading-none opacity-[0.07] transition-opacity duration-500 group-hover:opacity-20"
+										style={{
+											background:
+												"linear-gradient(120deg, var(--color-primary), var(--color-accent))",
+											WebkitBackgroundClip: "text",
+											backgroundClip: "text",
+											color: "transparent",
+										}}
+									>
+										{`0${i + 1}`}
+									</span>
+									<div
+										className="relative flex h-12 w-12 items-center justify-center rounded-2xl transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-3"
+										style={{
+											background: `color-mix(in srgb, ${accentVar} 16%, transparent)`,
+											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 22%, transparent)`,
+											borderRadius: 14,
+										}}
+									>
+										<Image
+											src={f.icon}
+											alt=""
+											width={24}
+											height={24}
+											unoptimized
+										/>
+									</div>
+									<h3
+										className="relative mt-5 text-base font-extrabold sm:text-lg"
+										style={{
+											color: "var(--color-text-readable)",
+											fontFamily: "var(--font-nunito)",
+										}}
+									>
+										{f.title}
+									</h3>
+									<p
+										className="relative mt-1.5 text-sm leading-relaxed"
+										style={{ color: "var(--color-text-muted)" }}
+									>
+										{f.desc}
+									</p>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</Reveal>
+
+			{/* ── Stats ── */}
+			<Reveal className="mx-auto w-full max-w-7xl">
+				<div className="flex flex-col gap-6 sm:gap-8">
+					<div className="flex flex-wrap items-end justify-between gap-3">
+						<div>
+							<span className="eyebrow">{tp("sectionStatsLabel")}</span>
+							<h2
+								className="section-title mt-2 text-2xl sm:text-3xl md:text-4xl"
+								style={{ letterSpacing: "-0.02em" }}
+							>
+								{tp("sectionStatsTitle")}
+							</h2>
+						</div>
+					</div>
+					<div className="grid grid-cols-2 gap-x-4 gap-y-8 lg:grid-cols-4">
+						{[
+							{ value: users, label: tp("statsCitizens"), icon: ICON_FRIENDS },
+							{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
+							{
+								value: totalPhotos,
+								label: tp("statsPhotos"),
+								icon: ICON_CAMERA,
+							},
+							{
+								value: articles?.length ?? null,
+								label: tp("statsArticles"),
+								icon: ICON_ARTICLE,
+							},
+						].map((s) => (
+							<div
+								key={s.label}
+								className="group relative flex flex-col items-center gap-2.5 text-center"
+							>
+								<div
+									className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+										boxShadow:
+											"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									}}
+								>
+									<Image
+										src={s.icon}
+										alt=""
+										width={20}
+										height={20}
+										unoptimized
+									/>
+								</div>
+								<div
+									className="gradient-text text-4xl font-black tracking-tight sm:text-5xl"
+									style={{ fontVariantNumeric: "tabular-nums" }}
+								>
+									{s.value === null ? (
+										<span className="text-base">{te("unavailable")}</span>
+									) : (
+										<AnimatedCounter value={s.value} />
+									)}
+								</div>
+								<span
+									className="rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-widest"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+										color: "var(--color-text-muted)",
+									}}
+								>
+									{s.label}
+								</span>
+							</div>
+						))}
+					</div>
+				</div>
+			</Reveal>
+
+			{/* ── Community ── */}
+			<Reveal className="mx-auto w-full max-w-7xl">
+				<div className="flex flex-col gap-6 sm:gap-8">
+					<div className="flex flex-wrap items-end justify-between gap-3">
+						<div>
+							<span className="eyebrow">{tp("sectionCommunityLabel")}</span>
+							<h2
+								className="section-title mt-2 text-2xl sm:text-3xl md:text-4xl"
+								style={{ letterSpacing: "-0.02em" }}
+							>
+								{tp("sectionCommunityTitle")}
+							</h2>
+						</div>
 					</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
+						<div className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
+							<GlassPanel
 								title={th("login")}
 								icon={ICON_NAV_ME}
 								bodyClassName="p-3.5 sm:p-4"
@@ -811,15 +840,15 @@ export default async function Home() {
 									}}
 									nonce={nonce}
 								/>
-							</SurfaceCard>
+							</GlassPanel>
 
 							{recentUsers === null ? (
-								<SurfaceCard title={tp("recentUsers")} bodyClassName="p-4">
+								<GlassPanel title={tp("recentUsers")} bodyClassName="p-4">
 									<PublicLoadError href="/" />
-								</SurfaceCard>
+								</GlassPanel>
 							) : (
 								recentUsers.length > 0 && (
-									<SurfaceCard
+									<GlassPanel
 										title={tp("recentUsers")}
 										icon={ICON_NAV_GOODY}
 										actionHref="/community"
@@ -831,7 +860,7 @@ export default async function Home() {
 												<div
 													key={u.username}
 													title={u.username}
-													className="flex flex-col items-center gap-0.5 rounded-lg px-1 py-1.5 transition-all duration-200 hover:bg-[color-mix(in_srgb,var(--color-primary)_5%,transparent)] hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
+													className="flex flex-col items-center gap-0.5 rounded-lg px-1 py-1.5 transition-all duration-200 hover:bg-[color-mix(in_srgb,var(--color-primary)_6%,transparent)] hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
 												>
 													<UserAvatarThumbnail
 														figure={u.look}
@@ -848,17 +877,14 @@ export default async function Home() {
 												</div>
 											))}
 										</div>
-									</SurfaceCard>
+									</GlassPanel>
 								)
 							)}
-						</Reveal>
+						</div>
 
 						{/* News */}
-						<Reveal
-							delay={0.15}
-							className="flex w-full flex-col gap-4 md:w-2/3"
-						>
-							<SurfaceCard
+						<div className="flex w-full flex-col md:w-2/3">
+							<GlassPanel
 								title={tp("latestNews")}
 								icon={ICON_ARTICLE}
 								actionHref="/news"
@@ -881,29 +907,31 @@ export default async function Home() {
 										{tp("noArticles")}
 									</p>
 								)}
-							</SurfaceCard>
-						</Reveal>
+							</GlassPanel>
+						</div>
 					</div>
 				</div>
 			</Reveal>
 
 			{/* ── Recent photos ── */}
 			{recentPhotos === null ? (
-				<SurfaceCard title={tp("recentPhotos")} bodyClassName="p-4">
-					<PublicLoadError href="/" />
-				</SurfaceCard>
+				<Reveal className="mx-auto w-full max-w-7xl">
+					<GlassPanel title={tp("recentPhotos")} bodyClassName="p-4">
+						<PublicLoadError href="/" />
+					</GlassPanel>
+				</Reveal>
 			) : (
 				recentPhotos.length > 0 && (
-					<Reveal>
-						<SurfaceCard title={tp("recentPhotos")} icon={ICON_CAMERA}>
-							<div className="mx-auto grid max-w-xl grid-cols-2 gap-3 sm:grid-cols-4">
+					<Reveal className="mx-auto w-full max-w-7xl">
+						<GlassPanel title={tp("recentPhotos")} icon={ICON_CAMERA}>
+							<div className="mx-auto grid max-w-5xl grid-cols-2 gap-3 sm:grid-cols-4">
 								{recentPhotos.slice(0, 4).map((p) => (
 									<Link
 										key={p.id}
 										href="/photos"
 										title=""
 										aria-label={tp("recentPhotos")}
-										className="block aspect-[4/3] overflow-hidden rounded-xl border transition-all duration-300 ease-out hover:scale-[1.03] hover:shadow-xl hover:ring-2 hover:ring-[color-mix(in_srgb,var(--color-primary)_45%,transparent)]"
+										className="block aspect-[4/3] overflow-hidden rounded-2xl border transition-all duration-300 ease-out hover:scale-[1.03] hover:shadow-xl hover:ring-2 hover:ring-[color-mix(in_srgb,var(--color-primary)_45%,transparent)]"
 										style={{
 											borderColor:
 												"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
@@ -920,47 +948,51 @@ export default async function Home() {
 									</Link>
 								))}
 							</div>
-						</SurfaceCard>
+						</GlassPanel>
 					</Reveal>
 				)
 			)}
 
 			{/* ── Join the fun ── */}
-			<Reveal>
+			<Reveal className="mx-auto w-full max-w-7xl">
 				<section
 					aria-labelledby="join-cta-title"
-					className="relative overflow-hidden rounded-3xl p-6 text-center sm:p-10"
+					className="relative overflow-hidden rounded-3xl px-6 py-14 text-center sm:px-10 sm:py-16"
 					style={{
-						background:
-							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent))",
+						background: DARK_BAND,
 						border:
-							"1px solid color-mix(in srgb, var(--color-primary) 22%, transparent)",
+							"1px solid color-mix(in srgb, var(--color-primary) 28%, transparent)",
+						boxShadow:
+							"0 40px 90px -40px color-mix(in srgb, #000 50%, transparent), 0 0 0 0.5px color-mix(in srgb, #000 20%, transparent)",
 					}}
 				>
 					<div
 						aria-hidden="true"
-						className="brand-halo left-1/2 top-0 h-64 w-[560px] max-w-full -translate-x-1/2 -translate-y-1/3"
+						className="brand-halo left-1/2 top-0 h-72 w-[620px] max-w-full -translate-x-1/2 -translate-y-1/3"
+						style={{ opacity: 0.6 }}
 					/>
 					<h2
 						id="join-cta-title"
-						className="relative text-2xl font-black tracking-tight text-balance sm:text-3xl"
-						style={{ color: "var(--color-text-readable)" }}
+						className="relative text-3xl font-black tracking-tight text-balance text-white sm:text-4xl"
 					>
 						{tp("joinCtaTitle")}
 					</h2>
 					<p
-						className="relative mx-auto mt-2 max-w-xl text-sm sm:text-base"
-						style={{ color: "var(--color-text-muted)" }}
+						className="relative mx-auto mt-3 max-w-xl text-sm leading-relaxed sm:text-base"
+						style={{ color: "rgba(255,255,255,0.72)" }}
 					>
 						{tp("joinCtaBody")}
 					</p>
-					<div className="relative mt-6 flex flex-wrap items-center justify-center gap-3">
+					<div className="relative mt-8 flex flex-wrap items-center justify-center gap-3">
 						<Link
 							href="/register"
-							className="btn-shine group inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-bold text-primary-foreground shadow-lg transition-transform duration-300 hover:-translate-y-0.5"
+							className="btn-shine group inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-black uppercase tracking-wide transition-all duration-300 hover:-translate-y-1 hover:scale-[1.02] active:scale-95"
 							style={{
 								background:
-									"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
+									"linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
+								color: "var(--color-primary-foreground)",
+								boxShadow:
+									"0 12px 40px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
 							}}
 						>
 							{tp("ctaJoin")}
@@ -970,13 +1002,12 @@ export default async function Home() {
 						</Link>
 						<Link
 							href="/community"
-							className="inline-flex items-center rounded-xl px-6 py-3 text-sm font-bold transition-all duration-300 hover:-translate-y-0.5"
+							className="inline-flex items-center rounded-2xl px-8 py-4 text-sm font-bold text-white transition-all duration-300 hover:-translate-y-1 hover:bg-white/10 active:scale-95"
 							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-								border:
-									"1px solid color-mix(in srgb, var(--color-text-muted) 18%, transparent)",
-								color: "var(--color-text-readable)",
+								background: "rgba(255,255,255,0.07)",
+								border: "1px solid rgba(255,255,255,0.22)",
+								backdropFilter: "blur(8px)",
+								WebkitBackdropFilter: "blur(8px)",
 							}}
 						>
 							{tp("browseCommunity")}