Update style.css

style.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");
 
 /* ===== BASE STYLES ===== */
 * {
@@ -8,42 +8,62 @@
 }
 
 :root {
-  --bg-primary: #f8fafc;
-  --bg-secondary: #ffffff;
-  --text-primary: #1e293b;
-  --text-secondary: #64748b;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
-  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --glass-bg: rgba(255, 255, 255, 0.7);
-  --glass-border: rgba(255, 255, 255, 0.18);
-  --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
-}
-
-[data-theme="dark"] {
-  --bg-primary: #0f172a;
-  --bg-secondary: #1e293b;
-  --text-primary: #f1f5f9;
-  --text-secondary: #94a3b8;
-  --glass-bg: rgba(30, 41, 59, 0.7);
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  --bg-primary: #0b0905;
+  --bg-secondary: #14100a;
+  --text-primary: #f7f0e2;
+  --text-secondary: #b9a784;
+  --text-muted: #8a7c60;
+  --accent: #f5a623;
+  --accent-hover: #ffc24b;
+  --accent-soft: #ffd97d;
+  --accent-deep: #b9750a;
+  --gradient: linear-gradient(
+    118deg,
+    #ffe09a 0%,
+    #ffc24b 38%,
+    #f5a623 64%,
+    #e07b00 100%
+  );
+  --glass-bg: rgba(255, 182, 62, 0.045);
+  --glass-border: rgba(245, 166, 35, 0.18);
+  --shadow: 0 0 40px rgba(245, 166, 35, 0.18);
+  --line: rgba(245, 166, 35, 0.16);
+  --nav-bg: rgba(11, 9, 5, 0.85);
+  --grid-line: rgba(245, 166, 35, 0.05);
+}
+
+[data-theme="light"] {
+  --bg-primary: #f8f9fb;
+  --bg-secondary: #eef0f5;
+  --text-primary: #1a1f3a;
+  --text-secondary: #4a5568;
+  --text-muted: #8896b0;
+  --accent: #d4920a;
+  --accent-hover: #b8780a;
+  --accent-soft: #e8a80e;
+  --accent-deep: #8a5c06;
+  --gradient: linear-gradient(118deg, #e8a80e 0%, #d4920a 38%, #b8780a 64%, #8a5c06 100%);
+  --glass-bg: rgba(26, 31, 58, 0.04);
+  --glass-border: rgba(100, 120, 180, 0.15);
+  --shadow: 0 0 40px rgba(212, 146, 10, 0.15);
+  --nav-bg: rgba(248, 249, 251, 0.92);
+  --grid-line: rgba(100, 120, 180, 0.1);
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  font-family: "Be Vietnam Pro", system-ui, sans-serif;
   background: var(--bg-primary);
   color: var(--text-primary);
   line-height: 1.6;
-  transition: all 0.3s ease;
   overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
-/* ===== ANIMATED BACKGROUND ===== */
+/* ===== AMBIENT BACKGROUND ===== */
 body::before {
   content: "";
   position: fixed;
@@ -51,10 +71,36 @@ body::before {
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--gradient);
-  opacity: 0.05;
+  background:
+    radial-gradient(
+      1200px 700px at 78% -8%,
+      rgba(255, 170, 40, 0.18),
+      transparent 60%
+    ),
+    radial-gradient(
+      900px 600px at 10% 110%,
+      rgba(185, 117, 10, 0.12),
+      transparent 60%
+    ),
+    linear-gradient(160deg, #0b0905 0%, #100c06 50%, #0a0804 100%);
+  z-index: -2;
+  pointer-events: none;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 54px 54px;
   z-index: -1;
-  animation: gradientShift 15s ease infinite;
+  pointer-events: none;
+  opacity: 0.7;
 }
 
 @keyframes gradientShift {
@@ -83,9 +129,9 @@ nav {
   position: fixed;
   top: 0;
   width: 100%;
-  background: var(--glass-bg);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: var(--nav-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--glass-border);
   z-index: 1000;
   padding: 1rem 0;
@@ -102,7 +148,7 @@ nav {
 
 .logo {
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 800;
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -116,13 +162,19 @@ nav {
 }
 
 .nav-links a {
-  color: var(--text-primary);
+  color: var(--text-secondary);
   text-decoration: none;
   font-weight: 500;
+  font-size: 0.9rem;
+  letter-spacing: 0.02em;
   transition: color 0.3s ease;
   position: relative;
 }
 
+.nav-links a:hover {
+  color: var(--accent-hover);
+}
+
 .nav-links a::after {
   content: "";
   position: absolute;
@@ -130,7 +182,7 @@ nav {
   left: 0;
   width: 0;
   height: 2px;
-  background: var(--accent);
+  background: var(--gradient);
   transition: width 0.3s ease;
 }
 
@@ -147,12 +199,14 @@ nav {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  color: var(--text-primary);
   transition: all 0.3s ease;
 }
 
 .theme-toggle:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow);
+  background: var(--accent);
+  color: var(--bg-primary);
+  border-color: var(--accent);
 }
 
 .mobile-menu-btn {
@@ -184,35 +238,75 @@ nav {
 
 .hero-content {
   background: var(--glass-bg);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
   border-radius: 30px;
   border: 1px solid var(--glass-border);
-  padding: 3rem;
-  box-shadow: var(--shadow);
-  max-width: 800px;
+  padding: 3rem 3.5rem;
+  box-shadow: 0 0 60px rgba(245, 166, 35, 0.12);
+  max-width: 900px;
+  width: 100%;
   animation: fadeInUp 1s ease;
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+}
+
+.hero-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.hero-right {
+  flex-shrink: 0;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent-hover);
+  border: 1px solid var(--glass-border);
+  padding: 8px 16px;
+  border-radius: 99px;
+  background: rgba(245, 166, 35, 0.06);
+  margin-bottom: 1.5rem;
 }
 
 .profile-image {
-  width: 288px;
-  height: 288px;
+  width: 240px;
+  height: 240px;
   border-radius: 50%;
-  margin: 0 auto 2rem;
-  border: 5px solid var(--glass-border);
-  box-shadow: var(--shadow);
+  border: 3px solid var(--glass-border);
+  box-shadow: 0 0 40px rgba(245, 166, 35, 0.25);
   object-fit: cover;
+  display: block;
 }
 
 .hero h1 {
-  font-size: 3rem;
-  margin-bottom: 0.5rem;
+  font-size: clamp(2.8rem, 5vw, 4.5rem);
+  font-weight: 800;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  text-align: left;
+}
+
+.name-colored {
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+.name-white {
+  -webkit-text-fill-color: var(--text-primary);
+}
+
 .hero .subtitle {
   font-size: 1.5rem;
   color: var(--text-secondary);
@@ -221,25 +315,30 @@ nav {
 
 .hero .description {
   color: var(--text-secondary);
-  max-width: 600px;
-  margin: 0 auto 2rem;
+  max-width: 480px;
+  margin: 0 0 2rem;
   line-height: 1.8;
+  font-style: italic;
+  text-align: left;
 }
 
 .social-links {
   display: flex;
   gap: 1rem;
-  justify-content: center;
-  margin-top: 2rem;
+  justify-content: flex-start;
+  margin-top: 0;
+  flex-wrap: wrap;
 }
 
 .social-link {
-  background: var(--glass-bg);
+  background: rgba(245, 166, 35, 0.06);
   border: 1px solid var(--glass-border);
   padding: 0.75rem 1.5rem;
   border-radius: 50px;
   text-decoration: none;
-  color: var(--text-primary);
+  color: var(--accent-hover);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.85rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -248,9 +347,10 @@ nav {
 
 .social-link:hover {
   transform: translateY(-3px);
-  box-shadow: var(--shadow);
   background: var(--accent);
-  color: white;
+  color: var(--bg-primary);
+  border-color: var(--accent);
+  box-shadow: 0 0 20px rgba(245, 166, 35, 0.4);
 }
 
 /* ===== SECTIONS ===== */
@@ -260,30 +360,65 @@ section {
 
 .section-title {
   font-size: 2.5rem;
-  margin-bottom: 2rem;
+  font-weight: 800;
+  margin-bottom: 0.5rem;
   text-align: center;
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  letter-spacing: -0.02em;
+}
+
+.section-subtitle {
+  text-align: center;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 1rem;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  margin-top: -1em;
+  margin-bottom: 0;
+}
+
+.section-subtitle::after,
+.section-title::after {
+  content: "";
+  display: block;
+  height: 3px;
+  width: 74px;
+  border-radius: 3px;
+  background: var(--gradient);
+  margin: 14px auto 26px;
+  box-shadow: var(--shadow);
+}
+
+.section-subtitle::after {
+  margin-top: 14px;
+}
+
+.section-title:has(+ .section-subtitle)::after {
+  display: none;
 }
 
 /* ===== GLASS CARDS ===== */
 .glass-card {
-  background: var(--glass-bg);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 20px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 182, 62, 0.055),
+    rgba(255, 182, 62, 0.012)
+  );
+  border-radius: 16px;
   border: 1px solid var(--glass-border);
   padding: 2rem;
   margin-bottom: 1.5rem;
-  box-shadow: var(--shadow);
   transition: all 0.3s ease;
+  position: relative;
 }
 
 .glass-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2);
+  transform: translateY(-4px);
+  border-color: rgba(245, 166, 35, 0.45);
+  box-shadow: 0 0 30px rgba(245, 166, 35, 0.12);
 }
 
 /* ===== EDUCATION STATS ===== */
@@ -293,52 +428,67 @@ section {
   margin-top: 2rem;
   flex-wrap: wrap;
   gap: 1rem;
-  text-align: justify;
 }
 
 .stat-item {
   text-align: center;
-  text-align: justify;
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 1.25rem 1.5rem;
+  background: rgba(245, 166, 35, 0.04);
+  flex: 1;
+  min-width: 120px;
 }
 
 .stat-number {
   font-size: 2.5rem;
-  font-weight: 700;
+  font-weight: 800;
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  text-align: justify;
+  line-height: 1;
 }
 
 .stat-label {
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: 0.8rem;
+  font-family: "JetBrains Mono", monospace;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 6px;
 }
 
 /* ===== PUBLICATIONS ===== */
 .publication-item {
   margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(245, 166, 35, 0.09);
   text-align: justify;
 }
 
+.publication-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
 .publication-item h4 {
   color: var(--text-primary);
   margin-bottom: 0.5rem;
   line-height: 1.6;
-  text-align: justify;
+  font-size: 0.95rem;
 }
 
 .publication-meta {
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-style: italic;
-  text-align: justify;
   line-height: 1.6;
 }
 
 .doi-link {
-  color: var(--text-primary);
+  color: var(--accent-hover);
   text-decoration: none;
   font-weight: 500;
 }
@@ -365,7 +515,7 @@ section {
 }
 
 .paper-title-link:hover {
-  color: var(--accent);
+  color: var(--accent-hover);
 }
 
 .paper-title-link:hover i {
@@ -386,7 +536,12 @@ section {
   top: 0;
   height: 100%;
   width: 2px;
-  background: var(--accent);
+  background: linear-gradient(
+    180deg,
+    var(--accent-deep),
+    var(--accent-hover),
+    var(--accent-deep)
+  );
 }
 
 .timeline-item {
@@ -398,19 +553,20 @@ section {
 .timeline-item::before {
   content: "";
   position: absolute;
-  left: -2.5rem;
-  top: 0;
-  width: 12px;
-  height: 12px;
+  left: -1.9rem;
+  top: 0.35rem;
+  transform: translateX(-50%);
+  width: 11px;
+  height: 11px;
   border-radius: 50%;
-  background: var(--accent);
-  border: 3px solid var(--bg-primary);
+  background: var(--gradient);
+  box-shadow: 0 0 10px var(--accent);
 }
 
 .timeline-item h3 {
   color: var(--text-primary);
+  font-weight: 700;
   margin-bottom: 0.5rem;
-  text-align: justify;
 }
 
 .timeline-item p {
@@ -418,13 +574,18 @@ section {
 }
 
 .timeline-date {
-  color: var(--accent);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.06em;
+  color: var(--accent-hover);
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
 .timeline-content {
   color: var(--text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.65;
 }
 
 /* ===== SKILLS GRID ===== */
@@ -435,7 +596,11 @@ section {
 }
 
 .skill-category h3 {
-  color: var(--accent);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent-hover);
   margin-bottom: 1rem;
 }
 
@@ -445,16 +610,27 @@ section {
 
 .skill-list li {
   padding: 0.5rem 0;
+  border-top: 1px solid rgba(245, 166, 35, 0.08);
   color: var(--text-secondary);
   position: relative;
   padding-left: 1.5rem;
+  font-size: 0.9rem;
+}
+
+.skill-list li:first-child {
+  border-top: none;
 }
 
 .skill-list li::before {
-  content: "▹";
+  content: "";
   position: absolute;
   left: 0;
-  color: var(--accent);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--gradient);
 }
 
 /* ===== AWARDS GRID ===== */
@@ -468,27 +644,40 @@ section {
   display: flex;
   gap: 1rem;
   align-items: start;
+  border: 1px solid rgba(245, 166, 35, 0.1);
+  border-radius: 12px;
+  padding: 1rem;
+  background: rgba(245, 166, 35, 0.03);
+  transition: border-color 0.3s ease;
+}
+
+.award-item:hover {
+  border-color: rgba(245, 166, 35, 0.3);
 }
 
 .award-icon {
-  font-size: 2rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
+  color: var(--accent);
 }
 
 .award-info h4 {
   color: var(--text-primary);
+  font-size: 0.9rem;
   margin-bottom: 0.25rem;
-  text-align: justify;
 }
 
 .award-info p {
-  text-align: justify;
+  font-size: 0.85rem;
 }
 
 .award-date {
-  color: var(--accent);
-  font-size: 0.9rem;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  color: var(--accent-hover);
   font-weight: 600;
+  margin-bottom: 0.25rem;
 }
 
 /* ===== CONTACT ===== */
@@ -498,12 +687,14 @@ section {
 }
 
 .contact-info a {
-  color: var(--accent);
+  color: var(--accent-hover);
   text-decoration: none;
   font-weight: 600;
+  font-family: "JetBrains Mono", monospace;
 }
 
 .contact-info a:hover {
+  color: var(--accent-soft);
   text-decoration: underline;
 }
 
@@ -511,8 +702,11 @@ section {
 footer {
   text-align: center;
   padding: 2rem;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   border-top: 1px solid var(--glass-border);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.1em;
 }
 
 /* ===== RESPONSIVE ===== */
@@ -523,8 +717,8 @@ footer {
     top: 100%;
     left: 0;
     right: 0;
-    background: var(--glass-bg);
-    backdrop-filter: blur(10px);
+    background: var(--nav-bg);
+    backdrop-filter: blur(12px);
     flex-direction: column;
     padding: 1rem;
     border-bottom: 1px solid var(--glass-border);
@@ -538,8 +732,30 @@ footer {
     display: block;
   }
 
+  .hero-content {
+    flex-direction: column-reverse;
+    align-items: center;
+    padding: 2rem;
+    gap: 1.5rem;
+  }
+
+  .hero-left {
+    align-items: center;
+    text-align: center;
+  }
+
   .hero h1 {
-    font-size: 2rem;
+    font-size: 2.4rem;
+    text-align: center;
+  }
+
+  .hero .description {
+    text-align: center;
+    margin: 0 auto 1.5rem;
+  }
+
+  .social-links {
+    justify-content: center;
   }
 
   .hero {
@@ -550,6 +766,11 @@ footer {
     font-size: 1.2rem;
   }
 
+  .profile-image {
+    width: 180px;
+    height: 180px;
+  }
+
   .skills-grid,
   .awards-grid {
     grid-template-columns: 1fr;
@@ -568,9 +789,9 @@ footer {
   }
 }
 
-/* ===== THEME TOGGLE ICON COLOR ===== */
-.theme-toggle i {
-  color: var(--text-primary);
+/* ===== THEME TOGGLE — hidden since site is dark-only ===== */
+.theme-toggle {
+  display: none;
 }
 
 /* ===== EXPERIENCE TABS ===== */
@@ -583,7 +804,7 @@ footer {
 }
 
 .tab-btn {
-  background: var(--glass-bg);
+  background: rgba(245, 166, 35, 0.05);
   border: 1px solid var(--glass-border);
   padding: 0.75rem 1.5rem;
   border-radius: 50px;
@@ -591,26 +812,29 @@ footer {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--text-primary);
-  font-family: "Inter", sans-serif;
-  font-size: 1rem;
+  color: var(--text-secondary);
+  font-family: "Be Vietnam Pro", sans-serif;
+  font-size: 0.9rem;
   font-weight: 500;
   transition: all 0.3s ease;
 }
 
 .tab-btn i {
-  font-size: 1.2rem;
+  font-size: 1rem;
 }
 
 .tab-btn:hover {
   transform: translateY(-2px);
-  box-shadow: var(--shadow);
+  border-color: rgba(245, 166, 35, 0.4);
+  color: var(--accent-hover);
 }
 
 .tab-btn.active {
-  background: var(--accent);
-  color: white;
-  border-color: var(--accent);
+  background: var(--gradient);
+  color: var(--bg-primary);
+  border-color: transparent;
+  font-weight: 600;
+  box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
 }
 
 .tab-content {
@@ -629,6 +853,7 @@ footer {
   transition: all 0.3s ease;
   position: relative;
   display: inline-block;
+  font-size: 0.95rem;
 }
 
 .cert-link i {
@@ -641,10 +866,158 @@ footer {
 }
 
 .cert-link:hover {
-  color: var(--accent);
+  color: var(--accent-hover);
 }
 
 .cert-link:hover i {
   opacity: 1;
   transform: translateX(0);
 }
+
+/* ===== GLASS CARD HEADINGS ===== */
+.glass-card h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.glass-card > h3:first-child,
+.glass-card > p:first-child {
+  color: var(--text-primary);
+}
+
+/* ===== SECTION HEADING KICKER ===== */
+.section-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.75rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent-hover);
+  margin-bottom: 0.5rem;
+}
+
+.section-kicker .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent);
+}
+
+/* ===== VIEW ALL BUTTON ===== */
+.view-all-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 1.5rem;
+  margin-left: auto;
+  margin-right: 0;
+  padding: 10px 20px;
+  border: 1px solid var(--glass-border);
+  border-radius: 99px;
+  background: rgba(245, 166, 35, 0.06);
+  color: var(--accent-hover);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.view-all-btn:hover {
+  background: var(--gradient);
+  color: var(--bg-primary);
+  border-color: transparent;
+  box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
+}
+
+/* ===== PAGE HEADER (subpages) ===== */
+.page-header {
+  margin-bottom: 2.5rem;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 1.5rem;
+  padding: 10px 20px;
+  border: 1px solid var(--glass-border);
+  border-radius: 99px;
+  background: rgba(245, 166, 35, 0.06);
+  color: var(--accent-hover);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.back-link:hover {
+  background: var(--gradient);
+  color: var(--bg-primary);
+  border-color: transparent;
+  box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
+}
+
+/* ===== ACTIVE NAV LINK ===== */
+.nav-active {
+  color: var(--accent-hover) !important;
+}
+
+.nav-active::after {
+  width: 100% !important;
+}
+
+/* ===== LOGO AS LINK ===== */
+a.logo {
+  text-decoration: none;
+}
+
+/* ===== THEME TOGGLE FIXED BUTTON ===== */
+.theme-toggle-fixed {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  color: var(--accent-hover);
+  font-size: 1.1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
+}
+
+.theme-toggle-fixed:hover {
+  background: var(--gradient);
+  color: var(--bg-primary);
+  border-color: transparent;
+  box-shadow: 0 0 24px rgba(245, 166, 35, 0.4);
+}
+
+/* ===== LIGHT THEME OVERRIDES ===== */
+[data-theme="light"] body::before {
+  background:
+    radial-gradient(1200px 700px at 78% -8%, rgba(100, 120, 200, 0.07), transparent 60%),
+    radial-gradient(900px 600px at 10% 110%, rgba(212, 146, 10, 0.06), transparent 60%),
+    linear-gradient(160deg, #f8f9fb 0%, #eef0f5 50%, #f8f9fb 100%);
+}
+
+/* ===== SCROLL ANIMATION ===== */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}