diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx
index ef98925..96e8886 100644
--- a/frontend/src/pages/Home/sections/TechnogenSection.tsx
+++ b/frontend/src/pages/Home/sections/TechnogenSection.tsx
@@ -1,13 +1,13 @@
 import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Download, FileText, ExternalLink, X, Eye, BookOpen, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Download, FileText, ExternalLink, X, Eye, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useLang } from '@/context/LangContext'
 import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
 
 const NAVY = '#032340'
 const GOLD = '#CD9E53'
 const EASE = [0.22, 1, 0.36, 1] as const
-const PAGE_SIZE = 3
+const ITEMS_PER_PAGE = 5
 
 const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])
 
@@ -37,12 +37,8 @@ export default function TechnogenSection() {
     }
   }, [])
 
-  // Featured report (POSCO study) vs analytical notes
-  const featured = reports.find((r) => r.isFeatured) || reports[0]
-  const analyticalNotes = reports.filter((r) => r.id !== featured?.id)
-
-  const totalPages = Math.max(1, Math.ceil(analyticalNotes.length / PAGE_SIZE))
-  const currentNotes = analyticalNotes.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+  const totalPages = Math.max(1, Math.ceil(reports.length / ITEMS_PER_PAGE))
+  const currentReports = reports.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE)
 
   const goNext = () => {
     setDirection(1)
@@ -70,12 +66,12 @@ export default function TechnogenSection() {
         background: 'linear-gradient(180deg, #021a30 0%, #042442 50%, #021629 100%)',
         borderTop: '1px solid rgba(205,158,83,0.3)',
         borderBottom: '1px solid rgba(205,158,83,0.3)',
-        padding: '48px 0 54px',
+        padding: '44px 0 52px',
         position: 'relative',
         overflow: 'hidden',
       }}
     >
-      {/* Background ambient lighting */}
+      {/* Ambient background lighting */}
       <div
         style={{
           position: 'absolute',
@@ -104,464 +100,309 @@ export default function TechnogenSection() {
       />
 
       <div className="max-w-7xl mx-auto px-12 max-md:px-4" style={{ position: 'relative', zIndex: 1 }}>
-        {/* ── Section Header with Gold Accent Line ── */}
-        <div style={{ marginBottom: 24 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
-            <h2
-              style={{
-                fontSize: 'clamp(20px, 2.2vw, 28px)',
-                fontWeight: 900,
-                color: '#FFFFFF',
-                margin: 0,
-                letterSpacing: isFa ? '-0.5px' : '-0.2px',
-                lineHeight: 1.3,
-              }}
-            >
-              {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'}
-            </h2>
-          </div>
-          <p
-            style={{
-              fontSize: 13,
-              color: 'rgba(255,255,255,0.7)',
-              margin: '6px 0 0',
-              paddingInlineStart: 16,
-              lineHeight: 1.6,
-            }}
-          >
-            {isFa
-              ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
-              : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
-          </p>
-        </div>
-
-        {/* ── Bento Grid Layout (Unified Single Block) ── */}
+        {/* ── Section Header with Gold Accent Line & Slider Controls ── */}
         <div
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(12, 1fr)',
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'space-between',
+            marginBottom: 24,
+            flexWrap: 'wrap',
             gap: 16,
-            alignItems: 'stretch',
           }}
-          className="max-lg:!grid-cols-1"
         >
-          {/* ── Bento Card 1: Flagship POSCO Study (Spans 7 columns) ── */}
-          {featured && (
-            <motion.div
-              initial={{ opacity: 0, y: 16 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, ease: EASE }}
-              style={{
-                gridColumn: 'span 7',
-                position: 'relative',
-                borderRadius: 18,
-                overflow: 'hidden',
-                background: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
-                boxShadow: '0 16px 36px -10px rgba(0,0,0,0.5)',
-                border: '1px solid rgba(205,158,83,0.3)',
-                backdropFilter: 'blur(12px)',
-                padding: '24px 28px',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 24,
-              }}
-              className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
-            >
-              {/* Cover Thumbnail */}
-              <div
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
+              <h2
                 style={{
-                  flex: '0 0 160px',
-                  display: 'flex',
-                  justifyContent: 'center',
+                  fontSize: 'clamp(20px, 2.2vw, 28px)',
+                  fontWeight: 900,
+                  color: '#FFFFFF',
+                  margin: 0,
+                  letterSpacing: isFa ? '-0.5px' : '-0.2px',
+                  lineHeight: 1.3,
                 }}
-                className="max-md:!w-full"
               >
-                <motion.div
-                  whileHover={{ scale: 1.03, y: -3 }}
-                  transition={{ duration: 0.25 }}
-                  onClick={() => openPreview(featured)}
-                  style={{
-                    width: 150,
-                    aspectRatio: '1 / 1.414',
-                    borderRadius: 10,
-                    overflow: 'hidden',
-                    boxShadow: '0 16px 32px -6px rgba(0,0,0,0.7)',
-                    border: '1px solid rgba(255,255,255,0.2)',
-                    cursor: 'pointer',
-                    background: NAVY,
-                  }}
-                >
-                  <img
-                    src={featured.coverImage}
-                    alt={isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
-                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-                  />
-                </motion.div>
-              </div>
+                {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'}
+              </h2>
+            </div>
+            <p
+              style={{
+                fontSize: 13,
+                color: 'rgba(255,255,255,0.7)',
+                margin: '6px 0 0',
+                paddingInlineStart: 16,
+                lineHeight: 1.6,
+              }}
+            >
+              {isFa
+                ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
+                : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
+            </p>
+          </div>
 
-              {/* Info & Actions */}
-              <div
+          {/* Slider controls (visible if more than 5 reports) */}
+          {totalPages > 1 && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>
+                {isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
+              </span>
+              <button
+                onClick={goNext}
                 style={{
-                  flex: '1 1 0',
+                  width: 32,
+                  height: 32,
+                  borderRadius: '50%',
+                  background: 'rgba(255,255,255,0.08)',
+                  border: '1px solid rgba(255,255,255,0.2)',
                   color: '#fff',
                   display: 'flex',
-                  flexDirection: 'column',
+                  alignItems: 'center',
                   justifyContent: 'center',
-                  minWidth: 0,
+                  cursor: 'pointer',
+                  transition: 'all 0.15s',
                 }}
-                className="max-md:!text-center"
+                className="hover:!bg-gold hover:!text-navy"
+                title={isFa ? 'بعدی' : 'Next'}
               >
-                {/* Tag Pill */}
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    marginBottom: 10,
-                    flexWrap: 'wrap',
-                  }}
-                  className="max-md:!justify-center"
-                >
-                  <span
-                    style={{
-                      background: GOLD,
-                      color: NAVY,
-                      fontSize: 10,
-                      fontWeight: 900,
-                      padding: '3px 9px',
-                      borderRadius: 4,
-                    }}
-                  >
-                    {isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
-                  </span>
-                </div>
-
-                {/* Title */}
-                <h3
-                  style={{
-                    fontSize: 'clamp(16px, 1.6vw, 20px)',
-                    fontWeight: 900,
-                    lineHeight: 1.4,
-                    margin: '0 0 8px',
-                    color: '#fff',
-                  }}
-                >
-                  {isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
-                </h3>
-
-                {/* Subtitle / Excerpt */}
-                {featured.subtitleFa && (
-                  <p
-                    style={{
-                      fontSize: 12,
-                      lineHeight: 1.7,
-                      color: 'rgba(255,255,255,0.75)',
-                      margin: '0 0 16px',
-                      display: '-webkit-box',
-                      WebkitLineClamp: 2,
-                      WebkitBoxOrient: 'vertical',
-                      overflow: 'hidden',
-                    }}
-                  >
-                    {isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
-                  </p>
-                )}
-
-                {/* Actions */}
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 10,
-                    flexWrap: 'wrap',
-                  }}
-                  className="max-md:!justify-center"
-                >
-                  {featured.fileUrl && (
-                    <a
-                      href={featured.fileUrl}
-                      download
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: 6,
-                        background: `linear-gradient(135deg, ${GOLD} 0%, #e0b469 100%)`,
-                        color: NAVY,
-                        fontSize: 12,
-                        fontWeight: 900,
-                        padding: '9px 16px',
-                        borderRadius: 8,
-                        textDecoration: 'none',
-                        boxShadow: '0 6px 16px -4px rgba(205,158,83,0.4)',
-                        transition: 'transform 0.15s',
-                      }}
-                      className="hover:!brightness-105 active:!scale-95"
-                    >
-                      <Download size={14} strokeWidth={2.5} />
-                      <span>{isFa ? 'دانلود PDF کامل' : 'Download PDF'}</span>
-                    </a>
-                  )}
-
-                  <button
-                    onClick={() => openPreview(featured)}
-                    style={{
-                      display: 'inline-flex',
-                      alignItems: 'center',
-                      gap: 6,
-                      background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.22)',
-                      color: '#fff',
-                      fontSize: 12,
-                      fontWeight: 700,
-                      padding: '9px 14px',
-                      borderRadius: 8,
-                      cursor: 'pointer',
-                      transition: 'background 0.15s',
-                    }}
-                    className="hover:!bg-white/15"
-                  >
-                    <BookOpen size={14} />
-                    <span>{isFa ? 'مشاهده آنلاین' : 'Read'}</span>
-                  </button>
-                </div>
-              </div>
-            </motion.div>
+                <ChevronLeft size={16} />
+              </button>
+              <button
+                onClick={goPrev}
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: '50%',
+                  background: 'rgba(255,255,255,0.08)',
+                  border: '1px solid rgba(255,255,255,0.2)',
+                  color: '#fff',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  transition: 'all 0.15s',
+                }}
+                className="hover:!bg-gold hover:!text-navy"
+                title={isFa ? 'قبلی' : 'Previous'}
+              >
+                <ChevronRight size={16} />
+              </button>
+            </div>
           )}
+        </div>
 
-          {/* ── Bento Cards: Analytical Notes Slider (Spans 5 columns) ── */}
-          <div
+        {/* ── 5-Card Row / Slider Strip (Like Factory Reports) ── */}
+        <AnimatePresence mode="wait" custom={direction}>
+          <motion.div
+            key={page}
+            initial={{ opacity: 0, x: isFa ? direction * -30 : direction * 30 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: isFa ? direction * 30 : direction * -30 }}
+            transition={{ duration: 0.3, ease: EASE }}
             style={{
-              gridColumn: 'span 5',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
-              gap: 10,
+              display: 'grid',
+              gridTemplateColumns: `repeat(${Math.min(5, Math.max(currentReports.length, 1))}, 1fr)`,
+              gap: 14,
+              alignItems: 'stretch',
             }}
-            className="max-lg:!col-span-1"
+            className="max-lg:!grid-cols-3 max-md:!grid-cols-2 max-sm:!grid-cols-1"
           >
-            {/* Slider Content Frame */}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-between' }}>
-              <AnimatePresence mode="wait" custom={direction}>
+            {currentReports.map((report) => {
+              const isSpecial = !!report.isFeatured
+              return (
                 <motion.div
-                  key={page}
-                  initial={{ opacity: 0, x: isFa ? direction * -20 : direction * 20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  exit={{ opacity: 0, x: isFa ? direction * 20 : direction * -20 }}
-                  transition={{ duration: 0.25, ease: EASE }}
-                  style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%', justifyContent: 'space-between' }}
+                  key={report.id}
+                  whileHover={{ y: -4 }}
+                  transition={{ duration: 0.2 }}
+                  style={{
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    background: isSpecial
+                      ? 'linear-gradient(135deg, rgba(205,158,83,0.12) 0%, rgba(3,35,64,0.4) 100%)'
+                      : 'linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%)',
+                    borderRadius: 20,
+                    border: isSpecial ? '1px solid rgba(205,158,83,0.4)' : '1px solid rgba(255,255,255,0.12)',
+                    boxShadow: '0 12px 28px -12px rgba(0,0,0,0.5)',
+                    backdropFilter: 'blur(10px)',
+                    overflow: 'hidden',
+                    paddingBottom: 4,
+                  }}
                 >
-                  {currentNotes.map((note) => (
-                    <div
-                      key={note.id}
+                  {/* Top Cover Image */}
+                  <div
+                    onClick={() => openPreview(report)}
+                    style={{
+                      width: '100%',
+                      aspectRatio: '1 / 1.15',
+                      overflow: 'hidden',
+                      background: NAVY,
+                      position: 'relative',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <img
+                      src={report.coverImage}
+                      alt={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
                       style={{
-                        background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
-                        borderRadius: 14,
-                        border: '1px solid rgba(255,255,255,0.1)',
-                        boxShadow: '0 8px 20px -6px rgba(0,0,0,0.3)',
-                        backdropFilter: 'blur(8px)',
-                        padding: '12px 14px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 14,
-                        flex: '1 1 0',
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        display: 'block',
+                        transition: 'transform 0.3s ease',
+                      }}
+                      className="hover:scale-105"
+                    />
+
+                    {/* Tag badge overlay */}
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: 10,
+                        right: isFa ? 10 : 'auto',
+                        left: isFa ? 'auto' : 10,
                       }}
                     >
-                      {/* Mini Cover Thumbnail */}
-                      <div
-                        onClick={() => openPreview(note)}
+                      <span
                         style={{
-                          flex: '0 0 54px',
-                          width: 54,
-                          aspectRatio: '1 / 1.414',
-                          borderRadius: 6,
-                          overflow: 'hidden',
-                          boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
-                          border: '1px solid rgba(255,255,255,0.15)',
-                          background: NAVY,
-                          cursor: 'pointer',
+                          background: isSpecial ? GOLD : 'rgba(3,35,64,0.85)',
+                          color: isSpecial ? NAVY : '#f0c784',
+                          border: isSpecial ? 'none' : '1px solid rgba(205,158,83,0.3)',
+                          fontSize: 9,
+                          fontWeight: 900,
+                          padding: '3px 8px',
+                          borderRadius: 4,
+                          backdropFilter: 'blur(4px)',
                         }}
                       >
-                        <img
-                          src={note.coverImage}
-                          alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-                        />
-                      </div>
+                        {isFa ? (report.tagFa || 'گزارش تکنوژن') : (report.tagEn || 'Technogen Report')}
+                      </span>
+                    </div>
+                  </div>
 
-                      {/* Content */}
-                      <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-                          <span
-                            style={{
-                              background: 'rgba(205,158,83,0.2)',
-                              color: '#f0c784',
-                              fontSize: 9,
-                              fontWeight: 800,
-                              padding: '2px 6px',
-                              borderRadius: 3,
-                            }}
-                          >
-                            {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
-                          </span>
-                        </div>
+                  {/* Card Content Body */}
+                  <div
+                    style={{
+                      padding: '14px 16px 12px',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      flexGrow: 1,
+                      textAlign: isFa ? 'right' : 'left',
+                    }}
+                  >
+                    <h3
+                      onClick={() => openPreview(report)}
+                      style={{
+                        fontSize: 14,
+                        fontWeight: 900,
+                        color: '#FFFFFF',
+                        lineHeight: 1.45,
+                        margin: '0 0 6px',
+                        cursor: 'pointer',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        minHeight: 40,
+                      }}
+                      title={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
+                    >
+                      {isFa ? report.titleFa : (report.titleEn || report.titleFa)}
+                    </h3>
 
-                        <h4
-                          onClick={() => openPreview(note)}
-                          style={{
-                            fontSize: 13,
-                            fontWeight: 800,
-                            color: '#FFFFFF',
-                            lineHeight: 1.4,
-                            margin: '0 0 2px',
-                            cursor: 'pointer',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                          }}
-                          title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                        >
-                          {isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                        </h4>
+                    {report.subtitleFa && (
+                      <p
+                        style={{
+                          fontSize: 11,
+                          lineHeight: 1.55,
+                          color: 'rgba(255,255,255,0.65)',
+                          margin: '0 0 12px',
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: 'vertical',
+                          overflow: 'hidden',
+                        }}
+                      >
+                        {isFa ? report.subtitleFa : (report.subtitleEn || report.subtitleFa)}
+                      </p>
+                    )}
 
-                        {note.subtitleFa && (
-                          <p
-                            style={{
-                              fontSize: 11,
-                              lineHeight: 1.5,
-                              color: 'rgba(255,255,255,0.65)',
-                              margin: 0,
-                              whiteSpace: 'nowrap',
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                            }}
-                          >
-                            {isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
-                          </p>
-                        )}
-                      </div>
-
-                      {/* Quick Action Buttons */}
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
-                        {note.fileUrl && (
-                          <a
-                            href={note.fileUrl}
-                            download
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{
-                              display: 'inline-flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                              width: 32,
-                              height: 32,
-                              borderRadius: 8,
-                              background: 'rgba(255,255,255,0.1)',
-                              color: '#FFFFFF',
-                              textDecoration: 'none',
-                              transition: 'all 0.15s',
-                            }}
-                            className="hover:!bg-gold hover:!text-navy"
-                            title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
-                          >
-                            <Download size={14} />
-                          </a>
-                        )}
-
-                        <button
-                          onClick={() => openPreview(note)}
+                    {/* Bottom Action Buttons */}
+                    <div
+                      style={{
+                        marginTop: 'auto',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 8,
+                        paddingTop: 10,
+                        borderTop: '1px solid rgba(255,255,255,0.08)',
+                      }}
+                    >
+                      {report.fileUrl && (
+                        <a
+                          href={report.fileUrl}
+                          download
+                          target="_blank"
+                          rel="noopener noreferrer"
                           style={{
                             display: 'inline-flex',
                             alignItems: 'center',
-                            justifyContent: 'center',
-                            width: 32,
-                            height: 32,
-                            borderRadius: 8,
-                            background: 'transparent',
-                            border: '1px solid rgba(255,255,255,0.2)',
-                            color: '#FFFFFF',
-                            cursor: 'pointer',
-                            transition: 'all 0.15s',
+                            gap: 5,
+                            color: GOLD,
+                            fontSize: 12,
+                            fontWeight: 800,
+                            textDecoration: 'none',
+                            transition: 'opacity 0.15s',
                           }}
-                          className="hover:!border-gold"
-                          title={isFa ? 'مشاهده آنلاین' : 'Preview'}
+                          className="hover:!opacity-80"
                         >
-                          <Eye size={14} />
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </motion.div>
-              </AnimatePresence>
-            </div>
+                          <Download size={14} />
+                          <span>{isFa ? 'دانلود PDF' : 'Download'}</span>
+                        </a>
+                      )}
 
-            {/* Slider Navigation Bar (Below the cards for perfect top alignment) */}
-            {totalPages > 1 && (
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  padding: '4px 4px 0',
-                  borderTop: '1px solid rgba(255,255,255,0.08)',
-                  marginTop: 2,
-                }}
-              >
-                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontWeight: 700 }}>
-                  {isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
-                    {isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
-                  </span>
-                  <button
-                    onClick={goNext}
+                      <button
+                        onClick={() => openPreview(report)}
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          gap: 4,
+                          background: 'transparent',
+                          border: 'none',
+                          color: 'rgba(255,255,255,0.7)',
+                          fontSize: 11,
+                          fontWeight: 700,
+                          cursor: 'pointer',
+                          padding: '2px 6px',
+                          borderRadius: 4,
+                        }}
+                        className="hover:!text-white"
+                      >
+                        <Eye size={13} />
+                        <span>{isFa ? 'مشاهده' : 'View'}</span>
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Bottom Gold Accent Bar */}
+                  <div
                     style={{
-                      width: 26,
-                      height: 26,
-                      borderRadius: '50%',
-                      background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.2)',
-                      color: '#fff',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      cursor: 'pointer',
-                      transition: 'all 0.15s',
+                      position: 'absolute',
+                      bottom: 0,
+                      left: 0,
+                      width: '100%',
+                      height: 3,
+                      backgroundColor: isSpecial ? GOLD : 'rgba(205,158,83,0.3)',
+                      borderRadius: '0 0 20px 20px',
                     }}
-                    className="hover:!bg-gold hover:!text-navy"
-                    title={isFa ? 'بعدی' : 'Next'}
-                  >
-                    <ChevronLeft size={14} />
-                  </button>
-                  <button
-                    onClick={goPrev}
-                    style={{
-                      width: 26,
-                      height: 26,
-                      borderRadius: '50%',
-                      background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.2)',
-                      color: '#fff',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      cursor: 'pointer',
-                      transition: 'all 0.15s',
-                    }}
-                    className="hover:!bg-gold hover:!text-navy"
-                    title={isFa ? 'قبلی' : 'Previous'}
-                  >
-                    <ChevronRight size={14} />
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
+                  />
+                </motion.div>
+              )
+            })}
+          </motion.div>
+        </AnimatePresence>
       </div>
 
       {/* ── Document Reader / Preview Modal ── */}