diff --git a/resources/css/app.css b/resources/css/app.css
index 091a0bf..46e3f15 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -16,6 +16,8 @@
     --color-surface-muted: #eaeff5;
     --color-tint-blue: #dce9f5;
     --color-tint-purple: #ede9f4;
+    --color-tint-directory: #e3edf5;
+    --color-tint-stats: #e8e7f2;
     --color-border: rgba(36, 33, 89, 0.12);
 
     --radius-default: 0.625rem;
@@ -30,3 +32,77 @@
 [x-cloak] {
     display: none !important;
 }
+
+@keyframes book-flip {
+    0%, 100% { transform: rotateY(0deg); }
+    35% { transform: rotateY(30deg) scaleX(0.8); }
+    65% { transform: rotateY(-20deg) scaleX(0.9); }
+}
+
+@keyframes arrow-bounce {
+    0%, 100% { transform: translateY(-3px); }
+    50% { transform: translateY(4px); }
+}
+
+@keyframes building-scroll {
+    0%, 100% { transform: translateY(0); }
+    30% { transform: translateY(-3px); }
+    70% { transform: translateY(3px); }
+}
+
+@keyframes bar-1 {
+    0%, 100% { transform: scaleY(0.45); }
+    50% { transform: scaleY(1); }
+}
+
+@keyframes bar-2 {
+    0%, 100% { transform: scaleY(0.75); }
+    50% { transform: scaleY(0.4); }
+}
+
+@keyframes bar-3 {
+    0%, 100% { transform: scaleY(0.6); }
+    50% { transform: scaleY(1); }
+}
+
+@keyframes bar-4 {
+    0%, 100% { transform: scaleY(0.9); }
+    50% { transform: scaleY(0.5); }
+}
+
+.icon-book {
+    animation: book-flip 2.2s ease-in-out infinite;
+    transform-style: preserve-3d;
+}
+
+.icon-arrow {
+    animation: arrow-bounce 1.1s ease-in-out infinite;
+}
+
+.icon-building {
+    animation: building-scroll 1.8s ease-in-out infinite;
+}
+
+.bar-1,
+.bar-2,
+.bar-3,
+.bar-4 {
+    transform-origin: center bottom;
+}
+
+.bar-1 { animation: bar-1 1.3s ease-in-out infinite; }
+.bar-2 { animation: bar-2 1.3s ease-in-out 0.2s infinite; }
+.bar-3 { animation: bar-3 1.3s ease-in-out 0.4s infinite; }
+.bar-4 { animation: bar-4 1.3s ease-in-out 0.6s infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+    .icon-book,
+    .icon-arrow,
+    .icon-building,
+    .bar-1,
+    .bar-2,
+    .bar-3,
+    .bar-4 {
+        animation: none;
+    }
+}
diff --git "a/resources/views/pages/\342\232\241home.blade.php" "b/resources/views/pages/\342\232\241home.blade.php"
index cc719dd..e4346c5 100644
--- "a/resources/views/pages/\342\232\241home.blade.php"
+++ "b/resources/views/pages/\342\232\241home.blade.php"
@@ -61,16 +61,44 @@ public function featuredResources(): Collection
             <h2 class="text-3xl font-bold text-navy mb-12 text-center">{{ __('home.features_title') }}</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                 @foreach ([
-                    ['bg' => 'bg-tint-blue', 'color' => 'text-primary', 'title' => 'home.feat_edu_title', 'desc' => 'home.feat_edu_desc'],
-                    ['bg' => 'bg-tint-purple', 'color' => 'text-accent', 'title' => 'home.feat_tools_title', 'desc' => 'home.feat_tools_desc'],
-                    ['bg' => 'bg-surface-muted', 'color' => 'text-muted', 'title' => 'home.feat_org_title', 'desc' => 'home.feat_org_desc'],
-                    ['bg' => 'bg-tint-blue/50', 'color' => 'text-navy', 'title' => 'home.feat_stats_title', 'desc' => 'home.feat_stats_desc'],
+                    ['icon' => 'book', 'bg' => 'bg-tint-blue', 'color' => 'text-primary', 'title' => 'home.feat_edu_title', 'desc' => 'home.feat_edu_desc'],
+                    ['icon' => 'download', 'bg' => 'bg-tint-purple', 'color' => 'text-accent', 'title' => 'home.feat_tools_title', 'desc' => 'home.feat_tools_desc'],
+                    ['icon' => 'building', 'bg' => 'bg-tint-directory', 'color' => 'text-muted', 'title' => 'home.feat_org_title', 'desc' => 'home.feat_org_desc'],
+                    ['icon' => 'chart', 'bg' => 'bg-tint-stats', 'color' => 'text-navy', 'title' => 'home.feat_stats_title', 'desc' => 'home.feat_stats_desc'],
                 ] as $card)
-                    <div class="group text-center border border-[color:var(--color-border)] rounded-xl p-6 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:border-accent">
-                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4 transition-transform duration-300 group-hover:-translate-y-1 group-hover:scale-110 {{ $card['bg'] }} {{ $card['color'] }}">
-                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+                    <div data-feature-icon="{{ $card['icon'] }}" class="group cursor-default text-center border border-[color:var(--color-border)] rounded-xl p-6 transition-all duration-300 hover:scale-[1.06] hover:shadow-2xl hover:border-accent hover:bg-background">
+                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg {{ $card['bg'] }} {{ $card['color'] }}">
+                            @if ($card['icon'] === 'book')
+                                <svg class="icon-book h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v14"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
+                                </svg>
+                            @elseif ($card['icon'] === 'download')
+                                <svg class="icon-arrow h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                    <polyline stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="7 10 12 15 17 10"/>
+                                    <line stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="15" y2="3"/>
+                                </svg>
+                            @elseif ($card['icon'] === 'building')
+                                <svg class="icon-building h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6h4"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 10h4"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14h4"/>
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 18h4"/>
+                                </svg>
+                            @else
+                                <svg class="h-8 w-8" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
+                                    <rect class="bar-1" x="1" y="14" width="6" height="16" rx="1"/>
+                                    <rect class="bar-2" x="9" y="8" width="6" height="22" rx="1"/>
+                                    <rect class="bar-3" x="17" y="11" width="6" height="19" rx="1"/>
+                                    <rect class="bar-4" x="25" y="4" width="6" height="26" rx="1"/>
+                                </svg>
+                            @endif
                         </div>
-                        <h3 class="text-xl font-semibold text-navy mb-2 group-hover:text-accent transition-colors">{{ __($card['title']) }}</h3>
+                        <h3 class="text-xl font-semibold text-navy mb-2 transition-colors duration-300 group-hover:text-accent">{{ __($card['title']) }}</h3>
                         <p class="text-muted">{{ __($card['desc']) }}</p>
                     </div>
                 @endforeach
diff --git a/tests/Feature/HomePageTest.php b/tests/Feature/HomePageTest.php
index 121585e..ca94c0f 100644
--- a/tests/Feature/HomePageTest.php
+++ b/tests/Feature/HomePageTest.php
@@ -27,10 +27,19 @@
         ->assertSee('IntersectionObserver', false);
 });
 
-test('homepage feature icons move on hover', function () {
+test('homepage feature icons match the public design animation', function () {
     $this->get('/ro')
         ->assertOk()
-        ->assertSee('group-hover:-translate-y-1 group-hover:scale-110', false);
+        ->assertSee('data-feature-icon="book"', false)
+        ->assertSee('data-feature-icon="download"', false)
+        ->assertSee('data-feature-icon="building"', false)
+        ->assertSee('data-feature-icon="chart"', false)
+        ->assertSee('icon-book', false)
+        ->assertSee('icon-arrow', false)
+        ->assertSee('icon-building', false)
+        ->assertSee('bar-1', false)
+        ->assertSee('hover:scale-[1.06]', false)
+        ->assertSee('group-hover:scale-110 group-hover:shadow-lg', false);
 });
 
 test('homepage shows at most six featured resources', function () {