feat: 优化全局样式与组件视觉升级

- 更新 globals.css 全局样式
- 优化 not-found 404 页面
- 升级 footer, mega-dropdown, mobile-tab-bar 布局组件
- 改进 challenge, cta, hero 等核心 section 组件
- 优化 challenge-card, ink-glow-card, product-card 等 UI 组件
- 更新产品常量配置

src/components/layout/footer.tsx

@@ -5,7 +5,7 @@ import { COMPANY_INFO, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from '@/lib/constants
 
 export function Footer() {
   return (
-    <footer className="bg-[var(--color-footer-bg)] text-white py-16" data-testid="footer" role="contentinfo">
+    <footer className="bg-[var(--color-footer-bg)] text-white py-12 md:py-16" data-testid="footer" role="contentinfo">
       <div className="container-wide">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
           <div data-testid="card-brand" className="lg:col-span-2">
@@ -107,7 +107,7 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="border-t border-[var(--color-footer-border)] mt-12 pt-8 pb-24 md:pb-8">
+        <div className="border-t border-[var(--color-footer-border)] mt-12 pt-8 pb-24 md:pb-8" style={{ paddingBottom: 'calc(5rem + env(safe-area-inset-bottom, 0px))' }}>
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
             <p className="text-[var(--color-footer-text-muted)] text-sm">
               © {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.

src/components/layout/mega-dropdown.tsx

@@ -74,10 +74,15 @@ export function MegaDropdown({ label, items, isOpen, onToggle, onOpen, onClose }
                 <StaticLink
                   key={item.id}
                   href={item.href}
-                  className="block p-4 rounded-lg border-l-[3px] border-l-[var(--color-brand-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors duration-200"
+                  className="block p-4 rounded-lg border border-transparent hover:border-[var(--color-brand-primary)]/10 hover:bg-[var(--color-brand-primary-bg)] transition-all duration-200 group"
                 >
-                  <div className="text-sm font-semibold text-[var(--color-text-primary)]">{item.title}</div>
-                  <div className="text-xs text-[var(--color-text-placeholder)] mt-1.5 leading-relaxed">{item.description}</div>
+                  <div className="flex items-center gap-3">
+                    <div className="w-1 h-8 rounded-full bg-[var(--color-border-primary)] group-hover:bg-[var(--color-brand-primary)] transition-colors duration-200 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-semibold text-[var(--color-text-primary)]">{item.title}</div>
+                      <div className="text-xs text-[var(--text-placeholder)] mt-1.5 leading-relaxed">{item.description}</div>
+                    </div>
+                  </div>
                 </StaticLink>
               ))}
               </div>

src/components/layout/mobile-tab-bar.tsx

@@ -37,7 +37,7 @@ export function MobileTabBar() {
   };
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-t border-[var(--color-border-primary)] safe-area-inset-bottom">
+    <nav className="fixed bottom-0 left-0 right-0 z-50 md:hidden bg-[var(--color-bg-primary)]/95 backdrop-blur-xl border-t border-[var(--color-border-primary)]" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}>
       <div className="flex items-center justify-around h-16">
         {tabs.map((tab) => {
           const Icon = tab.icon;