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)/page.tsx

@@ -143,7 +143,7 @@ export default async function Home() {
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
-					className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3"
+					className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3 card-hairline"
 					style={{
 						background:
 							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
@@ -269,11 +269,15 @@ export default async function Home() {
 						<h1
 							className="text-2xl font-black leading-[1.05] tracking-tight mb-2 sm:text-3xl md:text-5xl lg:text-6xl"
 							style={{
-								color: "var(--color-text-readable)",
 								fontFamily: "var(--font-nunito)",
 							}}
 						>
-							<TypewriterText text={tp("welcome", { hotelName })} />
+							<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 mb-5 sm:text-base md:text-lg md:mb-8"
@@ -284,7 +288,7 @@ export default async function Home() {
 						<div className="flex flex-wrap gap-2.5 sm:gap-3 justify-center">
 							<Link
 								href="/register"
-								className="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-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+								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-200 hover:scale-[1.03] active:scale-95 shadow-lg"
 								style={{
 									background: "var(--color-primary)",
 									color: "var(--color-primary-foreground)",