Harden UX & accessibility (ui-ux-pro-max pass)

Audited the site with the ui-ux-pro-max skill. It validated the brand blue
(#2563EB == its SaaS primary) but flagged real high-severity gaps:

- Contrast: muted grays were zinc-400 (~2.8:1, fails WCAG AA). Bumped the
  muted token + all text-zinc-400 to zinc-500 (#71717a, ~4.6:1).
- Touch targets: social buttons 38px -> 44x44 (meets 44pt minimum).
- Cursor + disabled: cursor-pointer on buttons; disabled state dims + blocks.
- Form a11y: required-field asterisks (name/service/budget/message),
  autocomplete on name/company, and role=status aria-live=polite on the
  submit status so screen readers announce success/error.

Kept Syne + system fonts and the blue accent (skill suggested Inter + an
AI-purple palette its own anti-patterns reject). Rebuilt Tailwind bundles.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

wwwroot/css/site.css

@@ -10,7 +10,7 @@
   --surface:      #ffffff;
   --text:         #18181b;  /* zinc-900 */
   --text-2:       #52525b;  /* zinc-600 */
-  --text-3:       #a1a1aa;  /* zinc-400 */
+  --text-3:       #71717a;  /* zinc-500 - meets WCAG AA 4.5:1 on the off-white bg */
   --line:         #e4e4e7;  /* zinc-200 */
   --line-strong:  #d4d4d8;  /* zinc-300 */
   --accent:       #2563eb;  /* blue-600 - the single accent */
@@ -108,6 +108,10 @@ body.site {
 .btn-ghost:hover { border-color: var(--text); background: #fff; }
 .btn-ghost:active { transform: translateY(1px); }
 
+/* pointer affordance + disabled semantics (ui-ux-pro-max: cursor-pointer, disabled-states) */
+.site button { cursor: pointer; }
+.site button:disabled { cursor: not-allowed; opacity: .55; }
+
 /* ─── Availability status ────────────────────────────────────────────── */
 .status {
   display: inline-flex; align-items: center; gap: .5rem;
@@ -121,7 +125,7 @@ body.site {
 /* ─── Social ─────────────────────────────────────────────────────────── */
 .social {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius);
+  width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius);
   color: var(--text-2); transition: color .18s ease, border-color .18s ease, transform .18s ease;
 }
 .social:hover { color: var(--text); border-color: var(--text); transform: translateY(-2px); }