diff --git a/src/App.css b/src/App.css
index 49fa02f..529aec0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -509,6 +509,12 @@ html[dir="rtl"] .nav-lang-toggle {
   border-radius: var(--radius);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }
 
 .stat-card h3 {
@@ -544,14 +550,24 @@ html[dir="rtl"] .nav-lang-toggle {
   margin-bottom: 32px;
 }
 
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .chart-card {
   background: var(--surface);
   padding: 24px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   position: relative;
+  animation: fadeUp 0.4s ease-out both;
 }
 
+.chart-card:nth-child(2) { animation-delay: 0.05s; }
+.chart-card:nth-child(3) { animation-delay: 0.1s; }
+.chart-card:nth-child(4) { animation-delay: 0.15s; }
+
 .toggle-corner {
   position: absolute;
   top: 20px;
@@ -835,6 +851,12 @@ table tbody tr:hover {
   border-radius: var(--radius);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }
 
 .metric-card h4 {