Redesign: richer visual language inspired by Magic UI

- Body: radial gradient orbs (teal + green) + dot grid overlay + grain
- Header: dark mesh gradient, shimmer logo animation, animated gradient
  tagline, frosted glass lang-switcher pill
- CategorySection: glow-ring emoji badge, gradient top line, frosted
  glass card container, teal/gold decorative divider
- MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight,
  price pill with green gradient border
- BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg
- Page: welcome strip with teal gradient border, hero fade from header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/Header.tsx

@@ -8,34 +8,78 @@ type Dict = {
 export default function Header({ dict }: { dict: Dict }) {
   return (
     <header
-      className="fixed top-0 left-0 right-0 z-40 bg-coffee"
+      className="fixed top-0 left-0 right-0 z-40"
       style={{ height: 'var(--header-h)' }}
     >
-      {/* Thin teal accent line at bottom */}
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-teal opacity-40" />
+      {/* Background with mesh gradient */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'linear-gradient(160deg, #1F140A 0%, #2E1C10 50%, #3D2B1F 100%)',
+        }}
+      />
 
-      <div className="flex items-center justify-between h-full px-5">
-        {/* Logo */}
-        <div className="flex flex-col leading-none">
-          <span className="font-display text-cream text-xl font-semibold tracking-[0.18em] uppercase">
+      {/* Subtle noise texture on header */}
+      <div
+        className="absolute inset-0 opacity-[0.04]"
+        style={{
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")",
+        }}
+      />
+
+      {/* Animated gradient accent line at bottom */}
+      <div className="header-line absolute bottom-0 left-0 right-0 h-[1.5px]" />
+
+      <div className="relative flex items-center justify-between h-full px-5">
+        {/* Logo block */}
+        <div className="flex flex-col leading-none gap-0.5">
+          {/* KOZMOS with shimmer */}
+          <span
+            className="logo-shimmer font-display font-semibold tracking-[0.2em] uppercase"
+            style={{ fontSize: '1.25rem' }}
+          >
             KOZMOS
           </span>
-          <span className="font-body text-teal text-[0.6rem] font-medium tracking-[0.22em] uppercase mt-0.5">
-            {dict.header.tagline}
-          </span>
+
+          {/* Tagline with gradient */}
+          <div className="flex items-center gap-1.5">
+            <span
+              className="font-body font-medium tracking-[0.28em] uppercase"
+              style={{
+                fontSize: '0.55rem',
+                background: 'linear-gradient(90deg, #4AAFA8, #C8A850, #5C8A5C)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              ✦ {dict.header.tagline} ✦
+            </span>
+          </div>
         </div>
 
-        {/* Language switcher */}
+        {/* Language switcher pill */}
         <Link
           href={dict.langSwitch.otherHref}
-          className="flex items-center gap-1.5 group"
+          className="group relative flex items-center gap-1 px-3 py-1.5 rounded-full overflow-hidden"
+          style={{
+            background: 'rgba(74,175,168,0.10)',
+            border: '1px solid rgba(74,175,168,0.22)',
+          }}
           aria-label={`Switch to ${dict.langSwitch.other}`}
         >
-          <span className="font-body text-xs font-semibold text-cream/40 tracking-wider">
+          {/* Hover glow */}
+          <span
+            className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+            style={{ background: 'rgba(74,175,168,0.15)' }}
+          />
+          <span className="relative font-body text-[0.65rem] font-semibold tracking-widest text-white/35">
             {dict.langSwitch.current}
           </span>
-          <span className="font-body text-xs text-cream/20">·</span>
-          <span className="font-body text-xs font-semibold text-teal tracking-wider group-hover:text-cream transition-colors duration-200">
+          <span className="relative font-body text-[0.55rem] text-white/20">·</span>
+          <span className="relative font-body text-[0.65rem] font-semibold tracking-widest text-teal group-hover:text-white transition-colors duration-200">
             {dict.langSwitch.other}
           </span>
         </Link>