fix(ui): add button hover effects and fix arrow icon

* feat(ui): add LogosWordmark icon

SVG wordmark for the "Logos" brand name, using fill-current so color
is driven by surrounding text color -- matching the pattern of LogosMark.

* fix(web): align navbar brand lockup with Figma

- Shrink lambda mark from 14px to 11px (Figma: 8x11px vector)
- Tighten brand lockup gap from 6px to 4px
- Replace text label with LogosWordmark SVG; keep sr-only span for a11y
- Fix mobile brand link typography (was font-serif 18px, now text-eyebrow)
- Nudge wordmark down 1px to optically align with the lambda mark

* fix(ui): align overlay navbar brand lockup and typography with Figma

- Replace text logoLabel fallback with LogosMark + LogosWordmark SVGs
- Move logo top from md:top-1.5 to top-3.5 to align with panel tabs
- Remove tracking-[0.08em] and add font-semibold on panel tab buttons
- Increase CTA vertical padding from py-2 to py-2.5

* fix(web): align closed navbar brand lockup, typography, and layout with Figma

- Remove BrandLockup wrapper; inline LogosMark + LogosWordmark directly
- Remove tracking-[0.08em] and add font-semibold on nav link buttons
- Increase desktop CTA vertical padding from min-h-7 to py-2.5
- Restructure desktop bar to absolute positioning (relative container)
  so logo, nav, and CTA positions mirror the overlay header exactly
- Mobile bar: add relative positioning; logo now uses absolute top-3.5 left-3

* fix(ui): vertically center overlay header elements

- Logo and close button: top-3.5/top-[14px] → top-1/2 -translate-y-1/2
  (elements live inside the 42px OverlayHeader, so 50% resolves correctly)
- Nav tabs and CTA: top-3.5/top-1.5 → top-[22.5px]/top-[22px] -translate-y-1/2
  (elements live in the outer 700px container, so a fixed value matching
  the header mid-point is used instead of 50%)
- Nav tabs: items-start → items-center to match the centered position

* fix(web): vertically center navbar and fix mobile menu gap

- Mobile bar: replace 3-col grid with flat relative container; remove
  dead-code nav/CTA shell that was never visible at mobile widths
- Mobile logo: top-3.5 → top-1/2 -translate-y-1/2 (true vertical center)
- Mobile hamburger: repositioned from grid col-2 (50% center) to
  left-[62.5%] -translate-x-1/2 (matches overlay close button and
  Figma spec), adding gap between logo and menu; add font-semibold
- Desktop logo, nav tabs, CTA: top-3.5/top-1.5 → top-1/2 -translate-y-1/2

* fix(ui): update arrow icon and add hover effects to button variants

- Replace ButtonArrowIcon SVG with filled 10x10 arrow, increase gap to 1.5
- Primary: hover:bg-accent-steel-teal (#5F797C)
- Secondary: hover:bg-gray-02 (#B8BDB8) with border cleared on hover

* fix(web): update download icon style

* fix(web): fit status CTA button to content width

* fix(ui): make button arrow inherit variant colour

Use currentColor for the arrow icon so the primary button renders a white arrow while other variants keep their text-aligned icon colour.

apps/web/components/sections/technology-stack/tech-overview-hero.tsx

@@ -51,7 +51,7 @@ function StatusCard({
             href={status.cta.href}
             variant={status.cta.variant ?? 'secondary'}
             icon={getButtonIcon(status.cta.iconOverride)}
-            className="w-[326px] cursor-pointer justify-between"
+            className="cursor-pointer"
           >
             {status.cta.label}
           </Button>

apps/web/public/icons/download.svg

@@ -1,3 +1,3 @@
 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7.5 2V10M7.5 10L4.5 7M7.5 10L10.5 7M3 12.5H12" stroke="#000" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter"/>
+<path d="M1.5 11.2632V8.94737H2.68462V11.2632C2.68462 11.4167 2.74706 11.5639 2.85814 11.6725C2.96922 11.7811 3.11983 11.8421 3.27692 11.8421H11.5692C11.7263 11.8421 11.8769 11.7811 11.988 11.6725C12.0991 11.5639 12.1615 11.4167 12.1615 11.2632V8.94737H13.3462V11.2632C13.3462 11.7238 13.1588 12.1654 12.8256 12.4912C12.4923 12.8169 12.0405 13 11.5692 13H3.27692C2.80565 13 2.35382 12.8169 2.02058 12.4912C1.68735 12.1654 1.5 11.7238 1.5 11.2632ZM8.01538 2V7.54975L9.96584 5.6433L10.8034 6.46197L7.42308 9.76604L4.04276 6.46197L4.88032 5.6433L6.83077 7.54975V2H8.01538Z" fill="#F5F5EF"/>
 </svg>

packages/ui/src/primitives/button/button.tsx

@@ -60,23 +60,20 @@ type ButtonElementProps = CommonProps &
 
 export type ButtonProps = AnchorProps | ButtonElementProps
 
-export function ButtonArrowIcon({
-  className,
-  ...props
-}: SVGAttributes<SVGSVGElement>) {
+export function ButtonArrowIcon(props: SVGAttributes<SVGSVGElement>) {
   return (
     <svg
       aria-hidden="true"
-      className={`size-[15px] shrink-0 stroke-current ${className ?? ''}`}
-      fill="none"
-      viewBox="0 0 15 15"
       xmlns="http://www.w3.org/2000/svg"
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
       {...props}
     >
       <path
-        d="M3.5 7.5H11.5M11.5 7.5L8 4M11.5 7.5L8 11"
-        strokeLinecap="square"
-        strokeLinejoin="miter"
+        d="M10 5L5 10L4.08262 9.08261L7.51647 5.64876H0V4.35124H7.51647L4.08262 0.917385L5 0L10 5Z"
+        fill="currentColor"
       />
     </svg>
   )
@@ -84,9 +81,9 @@ export function ButtonArrowIcon({
 
 const containerByVariant: Record<ButtonVariant, string> = {
   primary:
-    'inline-flex items-center justify-center rounded-xl bg-brand-dark-green px-3 py-2 text-brand-off-white backdrop-blur-[5px]',
+    'inline-flex items-center justify-center rounded-xl bg-brand-dark-green px-3 py-2 text-brand-off-white backdrop-blur-[5px] transition-colors hover:bg-accent-steel-teal',
   secondary:
-    'inline-flex items-center justify-center rounded-[4px] border border-brand-dark-green/50 px-3 py-2 text-brand-dark-green',
+    'inline-flex items-center justify-center border border-brand-dark-green/50 px-3 py-2 text-brand-dark-green transition-colors hover:bg-gray-02 hover:border-transparent',
   tertiary:
     'inline-flex items-center justify-center rounded-[4px] text-brand-dark-green',
   link: 'inline-flex items-center justify-center text-brand-dark-green',
@@ -108,7 +105,7 @@ export function Button(props: ButtonProps) {
   }`
 
   const content = (
-    <span className="inline-flex items-center gap-1">
+    <span className="inline-flex items-center gap-1.5">
       <span className={labelClass}>{children}</span>
       {resolvedIcon}
     </span>