diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index bd1767b..9b96b09 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import { Link } from 'react-router-dom'
-import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
+import { ArrowLeftIcon, Building2Icon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
@@ -126,19 +126,37 @@ export function Hero() {
           </motion.div>
         </div>
 
-        {/* کادر آمار شناور (گوشه پایین چپ): شیشه‌ای با لبه‌های گرد مدرن */}
+        {/* کادر آمار شناور (گوشه پایین چپ) — شیشهٔ چندلایه، خط مویی مسی، هالهٔ نرم و نشان زنده */}
         <motion.div
           initial={{ opacity: 0, x: -24 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.6, delay: 0.36, ease: [0.23, 1, 0.32, 1] }}
-          className="absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:ltr:right-10 lg:rtl:left-10"
+          className="group absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-72 lg:block lg:ltr:right-10 lg:rtl:left-10"
         >
-          <p className="text-3xl font-bold text-copper font-mono">
-            <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
-          </p>
-          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
-            <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
-          </p>
+          <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-ink/55 p-6 shadow-2xl shadow-black/50 backdrop-blur-2xl transition-colors duration-500 group-hover:border-copper/40">
+            {/* خط مویی مسی روی لبهٔ شروع */}
+            <span aria-hidden="true" className="absolute inset-y-0 start-0 w-[3px] bg-gradient-to-b from-copper/90 via-copper/30 to-transparent" />
+            {/* هالهٔ مسی نرم گوشهٔ مقابل — با هاور پررنگ‌تر */}
+            <span aria-hidden="true" className="absolute -top-20 -end-20 h-44 w-44 rounded-full bg-copper/10 blur-3xl transition-colors duration-700 group-hover:bg-copper/20" />
+
+            <div className="relative flex items-start gap-4">
+              <span className="relative mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
+                <Building2Icon className="h-5 w-5 text-copper" aria-hidden="true" />
+                <span className="absolute -end-1 -top-1 flex h-2.5 w-2.5" aria-hidden="true">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper opacity-60" />
+                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full border border-ink bg-copper" />
+                </span>
+              </span>
+              <div className="min-w-0">
+                <p className="font-mono text-[2rem] font-bold leading-none tracking-tight text-copper">
+                  <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
+                </p>
+                <p className="mt-2.5 text-[13px] font-light leading-6 text-ivory/75">
+                  <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
+                </p>
+              </div>
+            </div>
+          </div>
         </motion.div>
       </motion.div>