refactor(styles): enhance glass effects, card designs, and transitions across components

- Replaced `client:only="react"` with `client:load transition:persist="header"` for `GlassHeader` to improve page transitions and header consistency.
- Updated card and surface designs with refined colors, borders, and shadows for a cleaner, modern look.
- Adjusted CSS variables for better contrast and distinct layers.
- Applied consistent blur and backdrop styles across components for visual cohesion.

src/components/GlassHeader.tsx

@@ -126,10 +126,10 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
       <div className={`md:hidden overflow-hidden transition-all duration-300 ease-out ${
         isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
       }`}>
-        <div className={`py-4 px-4 border-t border-border/10 glass-effect ${
+        <div className={`py-4 px-4 border-t border-border/10 glass-effect shadow-xl ${
           isScrolled 
-            ? 'bg-white/80 dark:bg-black/80 shadow-sm' 
-            : 'bg-white/85 dark:bg-black/85'
+            ? 'bg-white/90 dark:bg-black/80' 
+            : 'bg-white/95 dark:bg-black/85'
         }`}>
           <nav className="flex flex-col space-y-3 text-sm font-medium">
             {navItems.map((item) => {