diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx
index 23e4ff9..f1d1e69 100644
--- a/frontend/src/pages/Home/sections/TechnogenSection.tsx
+++ b/frontend/src/pages/Home/sections/TechnogenSection.tsx
@@ -49,15 +49,43 @@ export default function TechnogenSection() {
       id="technogen"
       dir={isFa ? 'rtl' : 'ltr'}
       style={{
-        background: 'var(--paper)',
-        borderTop: '1px solid var(--rule-thin)',
-        borderBottom: '1px solid var(--rule-thin)',
-        padding: '44px 0 52px',
+        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',
         position: 'relative',
         overflow: 'hidden',
       }}
     >
-      <div className="max-w-7xl mx-auto px-12 max-md:px-4">
+      {/* Background ambient lighting */}
+      <div
+        style={{
+          position: 'absolute',
+          top: '-20%',
+          right: isFa ? '-5%' : 'auto',
+          left: isFa ? 'auto' : '-5%',
+          width: '500px',
+          height: '500px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(205,158,83,0.12) 0%, transparent 70%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '-25%',
+          left: isFa ? '-10%' : 'auto',
+          right: isFa ? 'auto' : '-10%',
+          width: '550px',
+          height: '550px',
+          borderRadius: '50%',
+          background: 'radial-gradient(circle, rgba(0,174,239,0.1) 0%, transparent 70%)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <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 }}>
@@ -66,7 +94,7 @@ export default function TechnogenSection() {
               style={{
                 fontSize: 'clamp(20px, 2.2vw, 28px)',
                 fontWeight: 900,
-                color: NAVY,
+                color: '#FFFFFF',
                 margin: 0,
                 letterSpacing: isFa ? '-0.5px' : '-0.2px',
                 lineHeight: 1.3,
@@ -78,7 +106,7 @@ export default function TechnogenSection() {
           <p
             style={{
               fontSize: 13,
-              color: 'rgba(3,35,64,0.65)',
+              color: 'rgba(255,255,255,0.7)',
               margin: '6px 0 0',
               paddingInlineStart: 16,
               lineHeight: 1.6,
@@ -112,9 +140,10 @@ export default function TechnogenSection() {
                 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)',
+                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',
@@ -122,20 +151,6 @@ export default function TechnogenSection() {
               }}
               className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
             >
-              {/* Subtle background glow */}
-              <div
-                style={{
-                  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={{
@@ -154,8 +169,8 @@ export default function TechnogenSection() {
                     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)',
+                    boxShadow: '0 16px 32px -6px rgba(0,0,0,0.7)',
+                    border: '1px solid rgba(255,255,255,0.2)',
                     cursor: 'pointer',
                     background: NAVY,
                   }}
@@ -180,7 +195,7 @@ export default function TechnogenSection() {
                 }}
                 className="max-md:!text-center"
               >
-                {/* Meta Pills */}
+                {/* Tag Pill */}
                 <div
                   style={{
                     display: 'flex',
@@ -197,30 +212,12 @@ export default function TechnogenSection() {
                       color: NAVY,
                       fontSize: 10,
                       fontWeight: 900,
-                      padding: '3px 8px',
+                      padding: '3px 9px',
                       borderRadius: 4,
                     }}
                   >
                     {isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
                   </span>
-                  {featured.code && (
-                    <span
-                      style={{
-                        background: 'rgba(255,255,255,0.12)',
-                        color: '#fff',
-                        fontSize: 10,
-                        fontWeight: 800,
-                        padding: '3px 8px',
-                        borderRadius: 4,
-                        direction: 'ltr',
-                      }}
-                    >
-                      {featured.code}
-                    </span>
-                  )}
-                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', fontWeight: 600 }}>
-                    {isFa ? (featured.pagesFa || '۳۰ صفحه') : (featured.pagesEn || '30 Pages')}
-                  </span>
                 </div>
 
                 {/* Title */}
@@ -298,7 +295,7 @@ export default function TechnogenSection() {
                       alignItems: 'center',
                       gap: 6,
                       background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.18)',
+                      border: '1px solid rgba(255,255,255,0.22)',
                       color: '#fff',
                       fontSize: 12,
                       fontWeight: 700,
@@ -337,10 +334,11 @@ export default function TechnogenSection() {
                 transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
                 whileHover={{ y: -2 }}
                 style={{
-                  background: '#FFFFFF',
+                  background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
                   borderRadius: 14,
-                  border: '1px solid rgba(3,35,64,0.08)',
-                  boxShadow: '0 4px 14px -4px rgba(3,35,64,0.05)',
+                  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',
@@ -357,8 +355,8 @@ export default function TechnogenSection() {
                     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)',
+                    boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
+                    border: '1px solid rgba(255,255,255,0.15)',
                     background: NAVY,
                     cursor: 'pointer',
                   }}
@@ -373,25 +371,10 @@ export default function TechnogenSection() {
                 {/* 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(3,35,64,0.06)',
-                          color: NAVY,
-                          fontSize: 9,
-                          fontWeight: 800,
-                          padding: '2px 6px',
-                          borderRadius: 3,
-                          direction: 'ltr',
-                        }}
-                      >
-                        {note.code}
-                      </span>
-                    )}
                     <span
                       style={{
-                        background: 'rgba(205,158,83,0.15)',
-                        color: '#9c6f28',
+                        background: 'rgba(205,158,83,0.2)',
+                        color: '#f0c784',
                         fontSize: 9,
                         fontWeight: 800,
                         padding: '2px 6px',
@@ -400,9 +383,6 @@ export default function TechnogenSection() {
                     >
                       {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
                     </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
@@ -410,7 +390,7 @@ export default function TechnogenSection() {
                     style={{
                       fontSize: 13,
                       fontWeight: 800,
-                      color: NAVY,
+                      color: '#FFFFFF',
                       lineHeight: 1.4,
                       margin: '0 0 2px',
                       cursor: 'pointer',
@@ -428,7 +408,7 @@ export default function TechnogenSection() {
                       style={{
                         fontSize: 11,
                         lineHeight: 1.5,
-                        color: 'rgba(3,35,64,0.65)',
+                        color: 'rgba(255,255,255,0.65)',
                         margin: 0,
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
@@ -455,12 +435,12 @@ export default function TechnogenSection() {
                         width: 32,
                         height: 32,
                         borderRadius: 8,
-                        background: 'rgba(3,35,64,0.06)',
-                        color: NAVY,
+                        background: 'rgba(255,255,255,0.1)',
+                        color: '#FFFFFF',
                         textDecoration: 'none',
                         transition: 'all 0.15s',
                       }}
-                      className="hover:!bg-navy hover:!text-white"
+                      className="hover:!bg-gold hover:!text-navy"
                       title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
                     >
                       <Download size={14} />
@@ -477,12 +457,12 @@ export default function TechnogenSection() {
                       height: 32,
                       borderRadius: 8,
                       background: 'transparent',
-                      border: '1px solid rgba(3,35,64,0.15)',
-                      color: NAVY,
+                      border: '1px solid rgba(255,255,255,0.2)',
+                      color: '#FFFFFF',
                       cursor: 'pointer',
                       transition: 'all 0.15s',
                     }}
-                    className="hover:!border-navy"
+                    className="hover:!border-gold"
                     title={isFa ? 'مشاهده آنلاین' : 'Preview'}
                   >
                     <Eye size={14} />
@@ -559,7 +539,7 @@ export default function TechnogenSection() {
                   <FileText size={20} color={GOLD} />
                   <div style={{ minWidth: 0 }}>
                     <div style={{ fontSize: 11, color: GOLD, fontWeight: 700 }}>
-                      {selectedReport.code} · {isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)}
+                      {isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)}
                     </div>
                     <div
                       style={{