fix: react-doctor → 64/100 (Bugs 122, Perf 286, A11y 613, Maint 436)

- CartContext: lazy initializers replace mount-only useEffect
  hydration; remove 8 no-initialize-state warnings
- Toast/AdminSearchInput: React 19 useContext/use + drop
  forwardRef (3 no-react19-deprecated-apis)
- ProductFormModal: lazy initializers + useSyncExternalStore
  for mount; parent adds key=editingProduct.id
- InstallPrompt: useReducer for prompt state (no-cascading-set-state)
- QRScanModal: ref-based latest-callback pattern replaces
  useEffectEvent deps mistake
- OnboardingFlow: functional setState (rerender-functional-setstate)
- UsersPage/StopsCalendar/FeaturesAndStats: lazy initializers
  (rerender-lazy-state-init)
- FAQClientPage: server-side brand settings fetch via getBrandSettingsPublic
  in layout; remove supabase import
- LandingPageWrapper: href='#' → href='#top' (anchor-is-valid)
- TuxedoVideoHero: replace animate-bounce with ease-out-expo
  (no-inline-bounce-easing)
- ProductTableClient: useCallback for handleDeleted
  (jsx-no-new-function-as-prop)
- excel-parser: pre-compile delimiter regexes (js-hoist-regexp)
- water-log/settings: Promise.all for parallel DB calls
  (async-parallel)
- ToastNotification: extract toast store to separate file
  (only-export-components)
- WholesaleClient: inline <WholesaleIcon/> instead of hoisting to
  const (rendering-hoist-jsx)

src/components/landing/HeroSection.tsx

@@ -264,12 +264,12 @@ export default function HeroSection() {
           <div className="parallax-float absolute top-20 right-20 w-80 h-80 rounded-full opacity-30 blur-3xl"
                style={{ 
                  background: "radial-gradient(circle, rgba(201, 122, 62, 0.4) 0%, transparent 70%)",
-                 animation: "float-slow 12s ease-in-out infinite",
+                 animation: "hs-float-slow 12s ease-in-out infinite",
                }} />
           <div className="parallax-float absolute bottom-40 left-10 w-96 h-96 rounded-full opacity-25 blur-3xl"
                style={{ 
                  background: "radial-gradient(circle, rgba(107, 185, 165, 0.4) 0%, transparent 70%)",
-                 animation: "float-slow-delayed 14s ease-in-out infinite",
+                 animation: "hs-float-slow-delayed 14s ease-in-out infinite",
                }} />
 
           {/* Grid pattern */}
@@ -448,7 +448,7 @@ export default function HeroSection() {
                   style={{
                     strokeDasharray: "1000",
                     strokeDashoffset: "1000",
-                    animation: "draw-route 3s ease-out forwards 0.5s",
+                    animation: "hs-draw-route 3s ease-out forwards 0.5s",
                   }}
                 />
 
@@ -462,7 +462,7 @@ export default function HeroSection() {
                   opacity="0.5"
                   strokeDasharray="600"
                   strokeDashoffset="600"
-                  style={{ animation: "draw-route 2.5s ease-out forwards 1s" }}
+                  style={{ animation: "hs-draw-route 2.5s ease-out forwards 1s" }}
                 />
 
                 {/* Farm Location - Animated Pulse */}
@@ -573,7 +573,7 @@ export default function HeroSection() {
               className="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-4 rounded-full"
               style={{
                 backgroundColor: "#1a4d2e",
-                animation: "scroll-indicator 2s ease-in-out infinite",
+                animation: "hs-scroll-indicator 2s ease-in-out infinite",
               }}
             />
           </div>
@@ -985,25 +985,25 @@ export default function HeroSection() {
       {/* (duplicate inline footer removed -- LandingPageWrapper <Footer /> now provides the only footer; eliminates repeated content + trims scroll height) */}
 
       {/* ─── GLOBAL STYLES ────────────────────────────────────────────────────── */}
-      <style jsx>{`
-        @keyframes float {
+      <style dangerouslySetInnerHTML={{ __html: `
+        @keyframes hs-float {
           0%, 100% { transform: translate(0, 0); }
           33% { transform: translate(15px, -20px); }
           66% { transform: translate(-10px, 10px); }
         }
 
-        @keyframes float-delayed {
+        @keyframes hs-float-delayed {
           0%, 100% { transform: translate(0, 0); }
           33% { transform: translate(-20px, 15px); }
           66% { transform: translate(10px, -10px); }
         }
 
-        @keyframes float-slow {
+        @keyframes hs-float-slow {
           0%, 100% { transform: translate(0, 0) scale(1); }
           50% { transform: translate(25px, -30px) scale(1.02); }
         }
 
-        @keyframes float-slow-delayed {
+        @keyframes hs-float-slow-delayed {
           0%, 100% { transform: translate(0, 0) scale(1); }
           50% { transform: translate(-30px, 20px) scale(1.03); }
         }
@@ -1017,11 +1017,11 @@ export default function HeroSection() {
           }
         }
 
-        @keyframes draw-route {
+        @keyframes hs-draw-route {
           to { stroke-dashoffset: 0; }
         }
 
-        @keyframes scroll-indicator {
+        @keyframes hs-scroll-indicator {
           0%, 100% { transform: translateY(0); opacity: 1; }
           50% { transform: translateY(6px); opacity: 0.5; }
         }
@@ -1049,7 +1049,7 @@ export default function HeroSection() {
           height: 3px;
           background: linear-gradient(to right, #c97a3e, #6b8f71);
         }
-      `}</style>
+      `}} />
     </>
   );
 }