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/globals.css

@@ -2018,3 +2018,40 @@ details[open] > summary .details-open\:rotate-180 {
 		0 12px 32px -10px color-mix(in srgb, var(--color-primary) 32%, transparent),
 		0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
 }
+
+/* Gradient accent hairline drawn on the top edge of a relative card. */
+.card-hairline {
+	position: relative;
+}
+.card-hairline::before {
+	content: "";
+	position: absolute;
+	inset-inline: 2%;
+	top: 0;
+	height: 2px;
+	border-radius: 999px;
+	background: linear-gradient(
+		90deg,
+		transparent,
+		color-mix(in srgb, var(--color-primary) 75%, transparent) 30%,
+		var(--color-primary) 50%,
+		color-mix(in srgb, var(--color-accent) 70%, transparent) 70%,
+		transparent
+	);
+	opacity: 0.55;
+	pointer-events: none;
+	z-index: 1;
+}
+
+/* Brand gradient text (primary → accent). */
+.gradient-text {
+	background: linear-gradient(
+		115deg,
+		var(--color-primary) 10%,
+		color-mix(in srgb, var(--color-primary) 55%, var(--color-accent)) 48%,
+		color-mix(in srgb, var(--color-accent) 92%, var(--color-primary)) 92%
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}