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/components/surface-card.tsx

@@ -43,13 +43,15 @@ export function SurfaceCard({
 }: SurfaceCardProps) {
 	const hasHeader = Boolean(title || icon || (actionHref && actionLabel));
 
+	const CARD_SHADOW =
+		"0 1px 2px rgba(0,0,0,0.05), 0 8px 24px -10px color-mix(in srgb, var(--color-text-muted) 22%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)";
+
 	return (
 		<div
-			className={`surface-card overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
+			className={`surface-card card-hairline overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
 			style={{
 				borderColor: CARD_BORDER,
-				boxShadow:
-					"0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
+				boxShadow: CARD_SHADOW,
 				...style,
 			}}
 		>
@@ -81,7 +83,7 @@ export function SurfaceCard({
 						)}
 						{title && (
 							<h2
-								className="text-sm font-bold tracking-tight"
+								className="text-sm font-extrabold tracking-wide"
 								style={{
 									fontFamily: "var(--font-nunito)",
 									color: "var(--color-text-readable)",