style(landing): add micro-interactions and polish public pages

src/app/globals.css

@@ -2837,3 +2837,57 @@ html {
 		background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
 	}
 }
+
+/* Mouse-tracking spotlight glow for premium cards. The dot position comes
+   from CSS custom properties updated on pointermove (see SpotlightCard). */
+.spotlight {
+	position: relative;
+	isolation: isolate;
+}
+.spotlight::before {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.4s ease;
+	background: radial-gradient(
+		340px circle at var(--spot-x, 50%) var(--spot-y, 50%),
+		color-mix(in srgb, var(--color-primary) 20%, transparent),
+		transparent 70%
+	);
+	z-index: -1;
+}
+.spotlight:hover::before,
+.spotlight:focus-within::before {
+	opacity: 1;
+}
+
+/* Section number mark (01 / 02 / …) used as a faint watermark in headers. */
+.number-mark {
+	font-family: var(--font-nunito);
+	font-weight: 900;
+	letter-spacing: -0.02em;
+	line-height: 1;
+	background: linear-gradient(
+		120deg,
+		color-mix(in srgb, var(--color-primary) 65%, transparent),
+		color-mix(in srgb, var(--color-accent) 50%, transparent)
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.spotlight::before {
+		transition: none;
+	}
+	.animate-fade-in-up,
+	.animate-scale-in,
+	.animate-count {
+		animation: none;
+	}
+}