feat(site): professional card system and tidy landing layout

Refine the public UI for a cleaner, more professional and scannable
landing experience without leaving the classic Habbo style:

- SurfaceCard: softer layered shadow, gradient accent hairline on the top
  edge and a bolder header title across all public cards.
- Home: gradient hotel-name in the hero headline, shine effect on the
  primary CTA, hairline on the top bar.
- Login/register: consistent avatar tiles with rounded corners, subtle
  borders and a gentle hover lift; uniform username sizing.
- Add reusable theme-aware .card-hairline and .gradient-text utilities.

src/app/(site)/login/page.tsx

@@ -122,24 +122,26 @@ export default async function LoginPage() {
 								bodyClassName="p-4"
 								className="card-glow"
 							>
-								<div className="grid grid-cols-4 gap-1.5">
+								<div className="grid grid-cols-4 gap-1.5 sm:gap-2">
 									{recentUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 											}}
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
 												alt=""
 												options={{ direction: 2 }}
-												className="rounded-md"
+												className="rounded-lg"
 											/>
 											<span
-												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												className="w-full truncate text-center text-[9px] font-bold leading-tight"
 												style={{ color: "var(--color-text-readable)" }}
 											>
 												{u.username}
@@ -157,24 +159,26 @@ export default async function LoginPage() {
 								bodyClassName="p-4"
 								className="card-glow"
 							>
-								<div className="grid grid-cols-4 gap-1.5">
+								<div className="grid grid-cols-4 gap-1.5 sm:gap-2">
 									{latestUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5"
 											style={{
 												background:
 													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												borderColor:
+													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 											}}
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
 												alt=""
 												options={{ direction: 2 }}
-												className="rounded-md"
+												className="rounded-lg"
 											/>
 											<span
-												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												className="w-full truncate text-center text-[9px] font-bold leading-tight"
 												style={{ color: "var(--color-text-readable)" }}
 											>
 												{u.username}