diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx
index ab1cd80..23e4ff9 100644
--- a/frontend/src/pages/Home/sections/TechnogenSection.tsx
+++ b/frontend/src/pages/Home/sections/TechnogenSection.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Download, FileText, ExternalLink, Sparkles, X, Eye, BookOpen, Layers } from 'lucide-react'
+import { Download, FileText, ExternalLink, X, Eye, BookOpen } from 'lucide-react'
 import { useLang } from '@/context/LangContext'
 import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
 
@@ -26,9 +26,7 @@ export default function TechnogenSection() {
           setReports(data)
         }
       })
-      .catch(() => {
-        // use fallback reports seamlessly
-      })
+      .catch(() => {})
     return () => {
       unmounted = true
     }
@@ -54,336 +52,217 @@ export default function TechnogenSection() {
         background: 'var(--paper)',
         borderTop: '1px solid var(--rule-thin)',
         borderBottom: '1px solid var(--rule-thin)',
-        padding: '72px 0 88px',
+        padding: '44px 0 52px',
         position: 'relative',
         overflow: 'hidden',
       }}
     >
-      {/* Background ambient lighting */}
-      <div
-        style={{
-          position: 'absolute',
-          top: '-15%',
-          right: isFa ? '-5%' : 'auto',
-          left: isFa ? 'auto' : '-5%',
-          width: '550px',
-          height: '550px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(205,158,83,0.08) 0%, rgba(3,35,64,0) 70%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          bottom: '-20%',
-          left: isFa ? '-10%' : 'auto',
-          right: isFa ? 'auto' : '-10%',
-          width: '600px',
-          height: '600px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(0,174,239,0.06) 0%, rgba(3,35,64,0) 70%)',
-          pointerEvents: 'none',
-        }}
-      />
-
-      <div className="max-w-7xl mx-auto px-12 max-md:px-5">
-        {/* ── Section Header ── */}
-        <div style={{ marginBottom: 40, position: 'relative', zIndex: 1 }}>
-          <motion.div
-            initial={{ opacity: 0, y: 16 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, ease: EASE }}
-            style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 12 }}
-          >
-            <span
+      <div className="max-w-7xl mx-auto px-12 max-md:px-4">
+        {/* ── 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={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 6,
-                padding: '4px 12px',
-                borderRadius: 20,
-                background: 'rgba(3,35,64,0.06)',
-                border: '1px solid rgba(3,35,64,0.12)',
+                fontSize: 'clamp(20px, 2.2vw, 28px)',
+                fontWeight: 900,
                 color: NAVY,
-                fontSize: 12,
-                fontWeight: 800,
-                letterSpacing: isFa ? '0' : '1px',
+                margin: 0,
+                letterSpacing: isFa ? '-0.5px' : '-0.2px',
+                lineHeight: 1.3,
               }}
             >
-              <Sparkles size={14} color={GOLD} />
-              TECHNOGEN
-            </span>
-            <span style={{ fontSize: 13, color: GOLD, fontWeight: 700 }}>
-              {isFa ? 'برنامه توسعه‌گر ملی فناوری' : 'National Technology Developer Program'}
-            </span>
-          </motion.div>
-
-          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
-            <div>
-              <motion.h2
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6, ease: EASE, delay: 0.1 }}
-                style={{
-                  fontSize: 'clamp(24px, 2.8vw, 36px)',
-                  fontWeight: 900,
-                  color: NAVY,
-                  margin: '0 0 8px',
-                  letterSpacing: isFa ? '-0.5px' : '-0.2px',
-                  lineHeight: 1.3,
-                }}
-              >
-                {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'}
-              </motion.h2>
-              <motion.p
-                initial={{ opacity: 0, y: 16 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6, ease: EASE, delay: 0.15 }}
-                style={{
-                  fontSize: 'clamp(14px, 1.2vw, 16px)',
-                  color: 'rgba(3,35,64,0.7)',
-                  margin: 0,
-                  maxWidth: 720,
-                  lineHeight: 1.7,
-                }}
-              >
-                {isFa
-                  ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
-                  : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
-              </motion.p>
-            </div>
+              {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'}
+            </h2>
           </div>
-        </div>
-
-        {/* ── Flagship Featured Report (POSCO Study) ── */}
-        {featured && (
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.7, ease: EASE }}
+          <p
             style={{
-              position: 'relative',
-              borderRadius: 24,
-              overflow: 'hidden',
-              background: `linear-gradient(135deg, ${NAVY} 0%, #062b4f 50%, #041c33 100%)`,
-              boxShadow: '0 25px 50px -18px rgba(3,35,64,0.35)',
-              border: '1px solid rgba(255,255,255,0.1)',
-              marginBottom: 36,
+              fontSize: 13,
+              color: 'rgba(3,35,64,0.65)',
+              margin: '6px 0 0',
+              paddingInlineStart: 16,
+              lineHeight: 1.6,
             }}
           >
-            {/* Ambient decorative elements */}
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: '100%',
-                height: '100%',
-                backgroundImage: 'radial-gradient(circle at 85% 20%, rgba(205,158,83,0.15) 0%, transparent 50%)',
-                pointerEvents: 'none',
-              }}
-            />
+            {isFa
+              ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
+              : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
+          </p>
+        </div>
 
-            <div
+        {/* ── Bento Grid Layout (Unified Single Block) ── */}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(12, 1fr)',
+            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, ${NAVY} 0%, #062b4f 60%, #031e36 100%)`,
+                boxShadow: '0 12px 30px -10px rgba(3,35,64,0.25)',
+                border: '1px solid rgba(255,255,255,0.08)',
+                padding: '24px 28px',
                 display: 'flex',
                 alignItems: 'center',
-                minHeight: 380,
-                padding: '36px 44px',
+                gap: 24,
               }}
-              className="max-lg:!flex-col max-md:!p-6"
+              className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
             >
-              {/* Cover Column */}
+              {/* Subtle background glow */}
               <div
                 style={{
-                  flex: '0 0 280px',
+                  position: 'absolute',
+                  top: '-30%',
+                  right: '-20%',
+                  width: '320px',
+                  height: '320px',
+                  borderRadius: '50%',
+                  background: 'radial-gradient(circle, rgba(205,158,83,0.15) 0%, transparent 60%)',
+                  pointerEvents: 'none',
+                }}
+              />
+
+              {/* Cover Thumbnail */}
+              <div
+                style={{
+                  flex: '0 0 160px',
                   display: 'flex',
                   justifyContent: 'center',
-                  alignItems: 'center',
-                  position: 'relative',
                 }}
-                className="max-lg:!w-full max-lg:!mb-8"
+                className="max-md:!w-full"
               >
                 <motion.div
-                  whileHover={{ scale: 1.03, rotateY: isFa ? -4 : 4, y: -4 }}
-                  transition={{ duration: 0.4 }}
-                  style={{
-                    position: 'relative',
-                    borderRadius: 12,
-                    boxShadow: '0 20px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12)',
-                    overflow: 'hidden',
-                    background: NAVY,
-                    maxWidth: 240,
-                    width: '100%',
-                    aspectRatio: '1 / 1.414',
-                    cursor: 'pointer',
-                  }}
+                  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 14px 28px -6px rgba(0,0,0,0.5)',
+                    border: '1px solid rgba(255,255,255,0.15)',
+                    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',
-                    }}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                   />
-                  <div
-                    style={{
-                      position: 'absolute',
-                      inset: 0,
-                      background: 'linear-gradient(to top, rgba(3,35,64,0.6) 0%, transparent 40%)',
-                      display: 'flex',
-                      alignItems: 'flex-end',
-                      justifyContent: 'center',
-                      padding: 12,
-                      opacity: 0,
-                      transition: 'opacity 0.25s',
-                    }}
-                    className="hover:!opacity-100"
-                  >
-                    <span
-                      style={{
-                        background: 'rgba(255,255,255,0.95)',
-                        color: NAVY,
-                        fontSize: 12,
-                        fontWeight: 800,
-                        padding: '6px 14px',
-                        borderRadius: 20,
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: 6,
-                      }}
-                    >
-                      <Eye size={14} />
-                      {isFa ? 'مشاهده گزارش' : 'Preview'}
-                    </span>
-                  </div>
                 </motion.div>
               </div>
 
-              {/* Text / Info Column */}
+              {/* Info & Actions */}
               <div
                 style={{
                   flex: '1 1 0',
-                  marginInlineStart: 36,
                   color: '#fff',
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'center',
+                  minWidth: 0,
                 }}
-                className="max-lg:!m-0 max-lg:!w-full max-lg:!text-center"
+                className="max-md:!text-center"
               >
-                {/* Meta Badges */}
+                {/* Meta Pills */}
                 <div
                   style={{
                     display: 'flex',
                     alignItems: 'center',
-                    gap: 10,
-                    marginBottom: 14,
+                    gap: 8,
+                    marginBottom: 10,
                     flexWrap: 'wrap',
                   }}
-                  className="max-lg:!justify-center"
+                  className="max-md:!justify-center"
                 >
                   <span
                     style={{
                       background: GOLD,
                       color: NAVY,
-                      fontSize: 11,
+                      fontSize: 10,
                       fontWeight: 900,
-                      padding: '4px 10px',
-                      borderRadius: 6,
+                      padding: '3px 8px',
+                      borderRadius: 4,
                     }}
                   >
-                    {isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Case Study'}
+                    {isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
                   </span>
                   {featured.code && (
                     <span
                       style={{
                         background: 'rgba(255,255,255,0.12)',
                         color: '#fff',
-                        fontSize: 11,
+                        fontSize: 10,
                         fontWeight: 800,
-                        padding: '4px 10px',
-                        borderRadius: 6,
-                        letterSpacing: '0.5px',
+                        padding: '3px 8px',
+                        borderRadius: 4,
+                        direction: 'ltr',
                       }}
                     >
                       {featured.code}
                     </span>
                   )}
-                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>
+                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', fontWeight: 600 }}>
                     {isFa ? (featured.pagesFa || '۳۰ صفحه') : (featured.pagesEn || '30 Pages')}
                   </span>
-                  <span style={{ color: 'rgba(255,255,255,0.3)' }}>•</span>
-                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
-                    {isFa ? (featured.dateFa || 'مرداد ۱۴۰۵') : (featured.dateEn || 'August 2026')}
-                  </span>
                 </div>
 
                 {/* Title */}
                 <h3
                   style={{
-                    fontSize: 'clamp(20px, 2.3vw, 28px)',
+                    fontSize: 'clamp(16px, 1.6vw, 20px)',
                     fontWeight: 900,
                     lineHeight: 1.4,
-                    margin: '0 0 12px',
+                    margin: '0 0 8px',
                     color: '#fff',
                   }}
                 >
                   {isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
                 </h3>
 
-                {/* Subtitle / Quote */}
+                {/* Subtitle / Excerpt */}
                 {featured.subtitleFa && (
-                  <div
-                    style={{
-                      fontSize: 'clamp(14px, 1.1vw, 16px)',
-                      lineHeight: 1.7,
-                      color: 'rgba(255,255,255,0.85)',
-                      fontWeight: 600,
-                      marginBottom: 14,
-                      borderInlineStart: `3px solid ${GOLD}`,
-                      paddingInlineStart: 14,
-                    }}
-                    className="max-lg:!border-none max-lg:!p-0"
-                  >
-                    {isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
-                  </div>
-                )}
-
-                {/* Description */}
-                {featured.descriptionFa && (
                   <p
                     style={{
-                      fontSize: 13,
-                      lineHeight: 1.8,
-                      color: 'rgba(255,255,255,0.65)',
-                      margin: '0 0 24px',
-                      maxWidth: 680,
+                      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',
                     }}
-                    className="max-lg:!mx-auto"
                   >
-                    {isFa ? featured.descriptionFa : (featured.descriptionEn || featured.descriptionFa)}
+                    {isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
                   </p>
                 )}
 
-                {/* Action Buttons */}
+                {/* Actions */}
                 <div
                   style={{
                     display: 'flex',
                     alignItems: 'center',
-                    gap: 14,
+                    gap: 10,
                     flexWrap: 'wrap',
                   }}
-                  className="max-lg:!justify-center"
+                  className="max-md:!justify-center"
                 >
                   {featured.fileUrl && (
                     <a
@@ -394,21 +273,21 @@ export default function TechnogenSection() {
                       style={{
                         display: 'inline-flex',
                         alignItems: 'center',
-                        gap: 10,
+                        gap: 6,
                         background: `linear-gradient(135deg, ${GOLD} 0%, #e0b469 100%)`,
                         color: NAVY,
-                        fontSize: 13,
+                        fontSize: 12,
                         fontWeight: 900,
-                        padding: '12px 24px',
-                        borderRadius: 12,
+                        padding: '9px 16px',
+                        borderRadius: 8,
                         textDecoration: 'none',
-                        boxShadow: '0 10px 25px -5px rgba(205,158,83,0.4)',
-                        transition: 'all 0.2s ease',
+                        boxShadow: '0 6px 16px -4px rgba(205,158,83,0.4)',
+                        transition: 'transform 0.15s',
                       }}
                       className="hover:!brightness-105 active:!scale-95"
                     >
-                      <Download size={17} strokeWidth={2.5} />
-                      <span>{isFa ? 'دانلود متن کامل گزارش (PDF)' : 'Download Full PDF (30 Pages)'}</span>
+                      <Download size={14} strokeWidth={2.5} />
+                      <span>{isFa ? 'دانلود PDF کامل' : 'Download PDF'}</span>
                     </a>
                   )}
 
@@ -417,104 +296,93 @@ export default function TechnogenSection() {
                     style={{
                       display: 'inline-flex',
                       alignItems: 'center',
-                      gap: 8,
+                      gap: 6,
                       background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.2)',
+                      border: '1px solid rgba(255,255,255,0.18)',
                       color: '#fff',
-                      fontSize: 13,
+                      fontSize: 12,
                       fontWeight: 700,
-                      padding: '12px 20px',
-                      borderRadius: 12,
+                      padding: '9px 14px',
+                      borderRadius: 8,
                       cursor: 'pointer',
-                      transition: 'all 0.2s ease',
+                      transition: 'background 0.15s',
                     }}
                     className="hover:!bg-white/15"
                   >
-                    <BookOpen size={16} />
-                    <span>{isFa ? 'مطالعه و ورق زدن آنلاین' : 'Read Online'}</span>
+                    <BookOpen size={14} />
+                    <span>{isFa ? 'مشاهده آنلاین' : 'Read'}</span>
                   </button>
                 </div>
               </div>
-            </div>
-          </motion.div>
-        )}
-
-        {/* ── Analytical Notes (3-Card Grid) ── */}
-        <div style={{ marginTop: 24 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <Layers size={18} color={NAVY} />
-              <h4 style={{ fontSize: 18, fontWeight: 900, color: NAVY, margin: 0 }}>
-                {isFa ? 'یادداشت‌های تحلیلی تکنوژن' : 'Technogen Analytical Notes'}
-              </h4>
-            </div>
-            <span style={{ fontSize: 12, color: 'rgba(3,35,64,0.6)', fontWeight: 600 }}>
-              {isFa ? `${analyticalNotes.length} شماره منتشر شده` : `${analyticalNotes.length} Published Notes`}
-            </span>
-          </div>
+            </motion.div>
+          )}
 
+          {/* ── Bento Cards 2, 3, 4: Analytical Notes (Spans 5 columns) ── */}
           <div
             style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(3, 1fr)',
-              gap: 20,
+              gridColumn: 'span 5',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 10,
+              justifyContent: 'space-between',
             }}
-            className="max-lg:!grid-cols-2 max-md:!grid-cols-1"
+            className="max-lg:!col-span-1"
           >
             {analyticalNotes.map((note, idx) => (
-              <motion.article
+              <motion.div
                 key={note.id}
-                initial={{ opacity: 0, y: 24 }}
-                whileInView={{ opacity: 1, y: 0 }}
+                initial={{ opacity: 0, x: isFa ? -12 : 12 }}
+                whileInView={{ opacity: 1, x: 0 }}
                 viewport={{ once: true }}
-                transition={{ duration: 0.5, ease: EASE, delay: idx * 0.1 }}
-                whileHover={{ y: -6 }}
+                transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
+                whileHover={{ y: -2 }}
                 style={{
                   background: '#FFFFFF',
-                  borderRadius: 20,
+                  borderRadius: 14,
                   border: '1px solid rgba(3,35,64,0.08)',
-                  boxShadow: '0 8px 24px -6px rgba(3,35,64,0.06)',
-                  overflow: 'hidden',
+                  boxShadow: '0 4px 14px -4px rgba(3,35,64,0.05)',
+                  padding: '12px 14px',
                   display: 'flex',
-                  flexDirection: 'column',
-                  transition: 'box-shadow 0.3s ease',
+                  alignItems: 'center',
+                  gap: 14,
+                  flex: '1 1 0',
                 }}
-                className="hover:!shadow-xl"
               >
-                {/* Card Top / Cover & Tag */}
+                {/* Mini Cover Thumbnail */}
                 <div
+                  onClick={() => openPreview(note)}
                   style={{
-                    position: 'relative',
-                    background: `linear-gradient(135deg, ${NAVY} 0%, #0a2f52 100%)`,
-                    padding: '24px 20px 20px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
+                    flex: '0 0 54px',
+                    width: 54,
+                    aspectRatio: '1 / 1.414',
+                    borderRadius: 6,
+                    overflow: 'hidden',
+                    boxShadow: '0 4px 10px rgba(0,0,0,0.15)',
+                    border: '1px solid rgba(3,35,64,0.1)',
+                    background: NAVY,
                     cursor: 'pointer',
                   }}
-                  onClick={() => openPreview(note)}
                 >
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: 14,
-                      right: isFa ? 14 : 'auto',
-                      left: isFa ? 'auto' : 14,
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 6,
-                    }}
-                  >
+                  <img
+                    src={note.coverImage}
+                    alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                  />
+                </div>
+
+                {/* Content */}
+                <div style={{ flex: '1 1 0', minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                     {note.code && (
                       <span
                         style={{
-                          background: 'rgba(255,255,255,0.15)',
-                          color: '#fff',
-                          fontSize: 10,
+                          background: 'rgba(3,35,64,0.06)',
+                          color: NAVY,
+                          fontSize: 9,
                           fontWeight: 800,
-                          padding: '3px 8px',
-                          borderRadius: 4,
-                          letterSpacing: '0.5px',
+                          padding: '2px 6px',
+                          borderRadius: 3,
+                          direction: 'ltr',
                         }}
                       >
                         {note.code}
@@ -522,71 +390,35 @@ export default function TechnogenSection() {
                     )}
                     <span
                       style={{
-                        background: 'rgba(205,158,83,0.25)',
-                        color: GOLD,
-                        fontSize: 10,
+                        background: 'rgba(205,158,83,0.15)',
+                        color: '#9c6f28',
+                        fontSize: 9,
                         fontWeight: 800,
-                        padding: '3px 8px',
-                        borderRadius: 4,
+                        padding: '2px 6px',
+                        borderRadius: 3,
                       }}
                     >
                       {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
                     </span>
-                  </div>
-
-                  {/* Thumbnail Cover Image */}
-                  <div
-                    style={{
-                      width: 140,
-                      aspectRatio: '1 / 1.414',
-                      borderRadius: 8,
-                      overflow: 'hidden',
-                      marginTop: 18,
-                      boxShadow: '0 12px 24px -4px rgba(0,0,0,0.5)',
-                      border: '1px solid rgba(255,255,255,0.15)',
-                      background: NAVY,
-                    }}
-                  >
-                    <img
-                      src={note.coverImage}
-                      alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                    />
-                  </div>
-                </div>
-
-                {/* Card Body */}
-                <div
-                  style={{
-                    padding: '20px 22px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: '1 1 auto',
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: 11,
-                      color: 'rgba(3,35,64,0.55)',
-                      fontWeight: 700,
-                      marginBottom: 8,
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                    }}
-                  >
-                    <span>{isFa ? (note.dateFa || 'مرداد ۱۴۰۵') : (note.dateEn || 'August 2026')}</span>
-                    <span>{isFa ? (note.pagesFa || '۴ صفحه') : (note.pagesEn || '4 Pages')}</span>
+                    <span style={{ fontSize: 10, color: 'rgba(3,35,64,0.5)', fontWeight: 600, marginInlineStart: 'auto' }}>
+                      {isFa ? (note.pagesFa || '۴ صفحه') : (note.pagesEn || '4 Pages')}
+                    </span>
                   </div>
 
                   <h4
+                    onClick={() => openPreview(note)}
                     style={{
-                      fontSize: 16,
-                      fontWeight: 900,
+                      fontSize: 13,
+                      fontWeight: 800,
                       color: NAVY,
-                      lineHeight: 1.45,
-                      margin: '0 0 8px',
-                      minHeight: 46,
+                      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>
@@ -594,85 +426,69 @@ export default function TechnogenSection() {
                   {note.subtitleFa && (
                     <p
                       style={{
-                        fontSize: 12,
-                        lineHeight: 1.7,
-                        color: 'rgba(3,35,64,0.7)',
-                        margin: '0 0 16px',
-                        flex: '1 1 auto',
-                        display: '-webkit-box',
-                        WebkitLineClamp: 3,
-                        WebkitBoxOrient: 'vertical',
+                        fontSize: 11,
+                        lineHeight: 1.5,
+                        color: 'rgba(3,35,64,0.65)',
+                        margin: 0,
+                        whiteSpace: 'nowrap',
                         overflow: 'hidden',
+                        textOverflow: 'ellipsis',
                       }}
                     >
                       {isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
                     </p>
                   )}
+                </div>
 
-                  {/* Actions */}
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 8,
-                      paddingTop: 12,
-                      borderTop: '1px solid rgba(3,35,64,0.06)',
-                      marginTop: 'auto',
-                    }}
-                  >
-                    {note.fileUrl && (
-                      <a
-                        href={note.fileUrl}
-                        download
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        style={{
-                          flex: '1 1 0',
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          gap: 6,
-                          background: 'rgba(3,35,64,0.06)',
-                          color: NAVY,
-                          fontSize: 12,
-                          fontWeight: 800,
-                          padding: '8px 12px',
-                          borderRadius: 8,
-                          textDecoration: 'none',
-                          transition: 'all 0.2s',
-                        }}
-                        className="hover:!bg-navy hover:!text-white"
-                      >
-                        <Download size={14} />
-                        <span>{isFa ? 'دانلود PDF' : 'Download'}</span>
-                      </a>
-                    )}
-
-                    <button
-                      onClick={() => openPreview(note)}
+                {/* 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',
-                        gap: 6,
-                        background: 'transparent',
-                        border: '1px solid rgba(3,35,64,0.15)',
-                        color: NAVY,
-                        fontSize: 12,
-                        fontWeight: 700,
-                        padding: '8px 12px',
+                        width: 32,
+                        height: 32,
                         borderRadius: 8,
-                        cursor: 'pointer',
-                        transition: 'all 0.2s',
+                        background: 'rgba(3,35,64,0.06)',
+                        color: NAVY,
+                        textDecoration: 'none',
+                        transition: 'all 0.15s',
                       }}
-                      className="hover:!border-navy"
+                      className="hover:!bg-navy hover:!text-white"
+                      title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
                     >
-                      <Eye size={14} />
-                      <span>{isFa ? 'مشاهده' : 'View'}</span>
-                    </button>
-                  </div>
+                      <Download size={14} />
+                    </a>
+                  )}
+
+                  <button
+                    onClick={() => openPreview(note)}
+                    style={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      background: 'transparent',
+                      border: '1px solid rgba(3,35,64,0.15)',
+                      color: NAVY,
+                      cursor: 'pointer',
+                      transition: 'all 0.15s',
+                    }}
+                    className="hover:!border-navy"
+                    title={isFa ? 'مشاهده آنلاین' : 'Preview'}
+                  >
+                    <Eye size={14} />
+                  </button>
                 </div>
-              </motion.article>
+              </motion.div>
             ))}
           </div>
         </div>