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

@@ -3,11 +3,11 @@ import type { CSSProperties, ReactNode } from "react";
 import Link from "@/components/link";
 
 const CARD_BORDER =
-	"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";
+	"color-mix(in srgb, var(--color-text-muted) 10%, transparent)";
 const CARD_DIVIDER =
 	"color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
 const CARD_HEADER_BG =
-	"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))";
+	"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)))";
 
 export interface SurfaceCardProps {
 	children: ReactNode;
@@ -45,28 +45,39 @@ export function SurfaceCard({
 
 	return (
 		<div
-			className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
+			className={`surface-card overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
 			style={{
 				borderColor: CARD_BORDER,
-				boxShadow: "var(--shadow-card)",
+				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)",
 				...style,
 			}}
 		>
 			{hasHeader && (
 				<div
-					className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
+					className="flex items-center justify-between gap-3 px-5 py-3.5 border-b"
 					style={{ borderColor: CARD_DIVIDER, background: CARD_HEADER_BG }}
 				>
 					<div className="flex items-center gap-2.5">
 						{icon && (
-							<Image
-								src={icon}
-								alt=""
-								width={18}
-								height={18}
-								unoptimized
-								className="opacity-90"
-							/>
+							<div
+								className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
+								style={{
+									background:
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)))",
+									boxShadow:
+										"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent)",
+								}}
+							>
+								<Image
+									src={icon}
+									alt=""
+									width={16}
+									height={16}
+									unoptimized
+									className="opacity-80"
+								/>
+							</div>
 						)}
 						{title && (
 							<h2
@@ -83,7 +94,7 @@ export function SurfaceCard({
 					{actionHref && actionLabel && (
 						<Link
 							href={actionHref}
-							className="text-xs font-semibold transition-colors hover:text-[var(--color-primary)] hover:underline"
+							className="shrink-0 rounded-md px-2 py-1 text-xs font-semibold transition-colors hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)] hover:text-[var(--color-primary)]"
 							style={{ color: "var(--color-text-muted)" }}
 						>
 							{actionLabel}