Polish responsive design across all screen sizes and refine card blocks

- Enhance SurfaceCard with refined borders, layered shadows, and polished
  primary-tinted header with an icon container
- Update homepage blocks (hero, features, stats, login, news, photos) for
  proper mobile/tablet/desktop responsiveness and tighter mobile spacing
- Improve content-card, stat-block, card-grid and card styling with subtle
  depth (layered shadow + inner hairline) and smoother hover states
- Refine site header, footer, top header and site layout spacing for small
  screens while keeping a consistent professional look on large screens
- Add min-tap-height targets and responsive typography on mobile

src/components/site-footer.tsx

@@ -9,13 +9,15 @@ export async function SiteFooter() {
 
 	return (
 		<footer
-			className="mt-auto flex min-h-14 w-full flex-col items-center justify-center gap-1 px-4 py-3 text-sm md:flex-row md:gap-3 md:px-8"
+			className="mt-auto flex min-h-14 w-full flex-col items-center justify-center gap-1 px-3 py-3 text-xs sm:text-sm md:flex-row md:gap-3 md:px-8"
 			style={{
 				backgroundColor: "var(--color-surface)",
 				color: "var(--color-text-muted-readable, var(--color-text-muted))",
+				borderTop:
+					"1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 			}}
 		>
-			<div className="md:font-semibold text-[12px] md:text-[14px]">
+			<div className="md:font-semibold text-[11px] sm:text-[12px] md:text-[14px]">
 				{t("copyright", { year, hotel: hotelName })}
 			</div>
 			<CmsInfoPopup />