fix: keep CTA widths stable on hover and keyboard focus

[WNZhao]

Problem

The arrow in all four primary app CTAs starts at 0×0 and grows to 20×20 on hover. That changes the link width from 167.67px to 195.67px and moves the centered click target 14px just as a user is about to activate it. It also animates layout properties (width, height, and margin).

Fix

• Reserve a fixed 20×20 arrow slot in the hero, desktop/mobile navigation, and closing CTA.
• Animate only transform, including keyboard focus-visible state.
• Disable the transition when reduced motion is requested.
• Mark the decorative arrow hidden from assistive technology.

Verification

• npm run build passes, including type checking.
• Hero CTA measured before/after hover: width 195.67px and left 662.16px in both states; only the arrow transform changes by 2px.
• Checked all 193 existing issues and open pull requests for this exact interaction; no duplicate found.

[vercel]

@WNZhao is attempting to deploy a commit to the gibwork Team on Vercel.

A member of the Team first needs to authorize it.

[WNZhao]

Updated this PR with a shared CtaArrow component and verified the final interaction across pointer, touch, and keyboard behavior. The arrow now has a stable footprint and only uses a transform for hover/focus, so the CTA no longer reflows. npm run build and npx tsc --noEmit both pass. Ready for maintainer review.