style(landing): polish the public index, login and register screens

- add theme-aware helpers: btn-brand, btn-glass-dark, auth-input, auth-label,
  auth-alert, explore-pill, avatar-tile, aurora blobs and a hero scroll cue
- reorder backdrop-filter declarations so the glass blur survives the
  production CSS optimizer in modern Chromium
- hero: aurora glow, frosted recent-users chip, premium CTA buttons and cue
- explore nav: icon pills with hover arrows; features: gradient icon tiles
- stats: single glass panel with column dividers; join CTA: aurora + ring
- auth forms: visible labels, icon inputs, eye/password toggle, gradient
  submit and pill footer links
- auth pages: gradient card frame, aurora accents on the intro panel and
  hover-lift avatar tiles; unified pill-shaped top bar
- drop the hard-coded register banner image in favor of the framed card

src/components/auth/auth-top-bar.tsx

@@ -23,14 +23,14 @@ export function AuthTopBar({
 	return (
 		<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-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)",
 				}}
@@ -44,21 +44,32 @@ export function AuthTopBar({
 							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>
 					)}
 					{showHotelName ? (
 						<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}
@@ -66,10 +77,10 @@ export function AuthTopBar({
 					) : null}
 				</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 sm:px-2"
 					style={{
 						background:
-							"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+							"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
 					}}
 				>
 					<LanguageSwitcher />

src/components/auth/password-toggle.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+
+/**
+ * Round eye-icon button that reveals / hides a password field. Kept separate so
+ * the login and register forms share one consistent control (and a11y labels).
+ */
+export function PasswordToggle({
+	show,
+	onToggle,
+	labelShow,
+	labelHide,
+}: {
+	show: boolean;
+	onToggle: () => void;
+	labelShow: string;
+	labelHide: string;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onToggle}
+			aria-label={show ? labelHide : labelShow}
+			aria-pressed={show}
+			tabIndex={-1}
+			className="absolute right-2.5 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-200 hover:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
+			style={{ color: "var(--color-text-muted)" }}
+		>
+			{show ? (
+				<EyeOff aria-hidden="true" className="h-4 w-4" />
+			) : (
+				<Eye aria-hidden="true" className="h-4 w-4" />
+			)}
+		</button>
+	);
+}