fix: eliminate hover flickering across all pages

- Extract CountdownTimer into React.memo component to isolate 1s
  interval re-renders from the full Subscription page
- Add box-shadow transition to .hover-border-gradient (was instant)
- Remove conflicting p-[1.5px] from PurchaseCTAButton (CSS border
  already handles 1.5px)
- Replace transition-all with specific properties on bento-card-hover,
  bento-card-glow, device dots, toggle switches, progress bars
- Reduce translateY hover from -4px to -2px to prevent cursor
  losing hover target during fast vertical mouse movement

src/components/subscription/PurchaseCTAButton.tsx

@@ -32,10 +32,10 @@ export default function PurchaseCTAButton({ subscription }: PurchaseCTAButtonPro
       <HoverBorderGradient
         accentColor={accentColor}
         duration={4}
-        className="group relative w-full cursor-pointer overflow-hidden rounded-2xl p-[1.5px]"
+        className="group relative w-full cursor-pointer overflow-hidden rounded-2xl"
       >
         <div
-          className="relative flex items-center justify-between rounded-[14px] px-5 py-4 transition-all duration-300"
+          className="relative flex items-center justify-between rounded-[14px] px-5 py-4 transition-colors duration-300"
           style={{
             background: isExpired
               ? 'linear-gradient(135deg, rgba(255,59,92,0.08), rgba(255,107,53,0.06))'