diff --git a/src/app/globals.css b/src/app/globals.css
index 3116f302f..92d7db95d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,7 +7,7 @@
   --background: #050816;
   --foreground: #f5f7fb;
   --muted: #121a2b;
-  --muted-foreground: #91a0b7;
+  --muted-foreground: #94a3b8;
   --card: #0b1220;
   --card-foreground: #f5f7fb;
   --card-muted: #111b2f;
@@ -52,7 +52,7 @@ html[data-theme="modern-light-blue"] {
   --background: #f6f8fc;
   --foreground: #0f172a;
   --muted: #e9eef7;
-  --muted-foreground: #516079;
+  --muted-foreground: #475569;
   --card: #ffffff;
   --card-foreground: #0f172a;
   --card-muted: #eff4fb;
@@ -89,7 +89,7 @@ html[data-theme="nordic-frost"] {
   --background: #07131f;
   --foreground: #eaf4ff;
   --muted: #111f31;
-  --muted-foreground: #8fa6be;
+  --muted-foreground: #9eb6ce;
   --card: #0c1a2a;
   --card-foreground: #eaf4ff;
   --card-muted: #122436;
@@ -126,7 +126,7 @@ html[data-theme="cyberpunk-matrix"] {
   --background: #050608;
   --foreground: #e8ffe8;
   --muted: #0d140d;
-  --muted-foreground: #88a388;
+  --muted-foreground: #98b698;
   --card: #0a100a;
   --card-foreground: #e8ffe8;
   --card-muted: #101810;
@@ -639,12 +639,14 @@ body {
 
 .lnd-about-card {
   position: relative;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
+  background: color-mix(in srgb, var(--card) 80%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 12px;
   padding: 22px;
   min-height: 210px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
 .lnd-about-card::before {
@@ -670,12 +672,10 @@ body {
 }
 
 .lnd-about-card:hover {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(129, 140, 248, 0.25);
+  background: color-mix(in srgb, var(--card) 95%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
   transform: translateY(-3px) !important;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    0 14px 34px rgba(0, 0, 0, 0.28);
+  box-shadow: var(--shadow-medium);
 }
 
 .lnd-about-card:hover::before {
diff --git a/src/components/landing/LandingPage.tsx b/src/components/landing/LandingPage.tsx
index 1debed71c..59937efc8 100644
--- a/src/components/landing/LandingPage.tsx
+++ b/src/components/landing/LandingPage.tsx
@@ -235,11 +235,11 @@ function MouseSpotlight() {
    BENTO WIDGETS
    ═══════════════════════════════════════════════════════════ */
 const wLabel: React.CSSProperties = {
-  fontFamily: MONO, fontSize: 10, fontWeight: 500,
+  fontFamily: MONO, fontSize: 11, fontWeight: 600,
   color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.1em',
 };
 const wValue: React.CSSProperties = {
-  fontFamily: MONO, fontWeight: 600, color: TEXT,
+  fontFamily: MONO, fontWeight: 700, color: TEXT,
 };
 
 function Cell({
@@ -259,9 +259,9 @@ function Cell({
       style={{ 
         gridColumn: spanCols > 1 ? `span ${spanCols}` : undefined, 
         transformStyle: 'preserve-3d',
-        background: 'rgba(255, 255, 255, 0.02)',
-        border: '1px solid rgba(255, 255, 255, 0.05)',
-        boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+        background: 'color-mix(in srgb, var(--card) 80%, transparent)',
+        border: '1px solid var(--border)',
+        boxShadow: 'var(--shadow-soft)',
         backdropFilter: 'blur(20px)',
         WebkitBackdropFilter: 'blur(20px)',
         ...tiltStyle,
@@ -539,7 +539,7 @@ function HeroSection() {
         {/* Badge */}
         <div style={{
           display: 'inline-flex', alignItems: 'center', gap: 8,
-          background: 'color-mix(in srgb, var(--accent) 15%, transparent)', border: '1px solid color-mix(in srgb, var(--accent) 40%, transparent)',
+          background: 'color-mix(in srgb, var(--accent) 12%, transparent)', border: '1px solid color-mix(in srgb, var(--accent) 35%, transparent)',
           borderRadius: 24, padding: '6px 14px', marginBottom: 28,
           boxShadow: '0 4px 14px rgba(129,140,248,0.1)',
         }}>
@@ -556,10 +556,7 @@ function HeroSection() {
             fontSize: 'clamp(44px,7vw,82px)', lineHeight: 0.95,
             letterSpacing: '-0.04em', margin: '0 0 24px',
             animation: 'lndHeroIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both',
-            background: 'linear-gradient(180deg, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 70%, transparent) 100%)',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            textShadow: '0 4px 24px rgba(0,0,0,0.8)',
+            color: TEXT,
           }}
         >
           YOUR<br />CODE<br />HAS A<br />
@@ -567,16 +564,16 @@ function HeroSection() {
             background: 'linear-gradient(135deg, #818cf8 0%, #c084fc 100%)',
             WebkitBackgroundClip: 'text',
             WebkitTextFillColor: 'transparent',
-            textShadow: '0 0 30px rgba(129,140,248,0.4)',
+            textShadow: '0 0 30px rgba(129,140,248,0.3)',
           }}>PULSE</span>
-          <span style={{ color: 'var(--foreground)' }}>.</span>
+          <span style={{ color: TEXT }}>.</span>
         </h1>
 
         {/* Tagline */}
         <p style={{
-          fontSize: 'clamp(16px,2vw,18px)', color: 'var(--foreground)',
-          lineHeight: 1.6, maxWidth: 420, margin: '0 0 40px',
-          fontWeight: 400, letterSpacing: '0.01em', opacity: 0.85,
+          fontSize: 'clamp(16px,2vw,18px)', color: MUTED,
+          lineHeight: 1.6, maxWidth: 450, margin: '0 0 40px',
+          fontWeight: 500, letterSpacing: '0.01em',
         }}>
           Open-source developer productivity dashboard. Track GitHub streaks,
           PR velocity, and coding goals — automatically.
@@ -611,14 +608,6 @@ function HeroSection() {
               transition: 'transform 0.3s, background 0.3s',
               transform: 'translateY(0)',
             }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.transform = 'translateY(-2px)';
-              e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.transform = 'translateY(0)';
-              e.currentTarget.style.background = 'transparent';
-            }}
           >
             ★ Star on GitHub
           </a>
@@ -628,12 +617,12 @@ function HeroSection() {
       {/* Right: bento window frame */}
       <div style={{ flex: '1 1 340px', display: 'flex', flexDirection: 'column',alignItems: 'flex-end', gap: 24, position: 'relative', zIndex: 2 }}>
         <div style={{
-          background: 'rgba(255,255,255,0.02)',
-          border: '1px solid rgba(255,255,255,0.05)',
+          background: 'color-mix(in srgb, var(--card) 85%, transparent)',
+          border: '1px solid var(--border)',
           borderRadius: 16,
-          boxShadow: '0 24px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)',
-          backdropFilter: 'blur(10px)',
-          WebkitBackdropFilter: 'blur(10px)',
+          boxShadow: 'var(--shadow-medium)',
+          backdropFilter: 'blur(16px)',
+          WebkitBackdropFilter: 'blur(16px)',
           overflow: 'hidden',
           width: '100%',
           maxWidth: 420,
@@ -641,8 +630,8 @@ function HeroSection() {
           {/* Traffic Lights */}
           <div style={{
             display: 'flex', gap: 8, padding: '16px 20px',
-            borderBottom: '1px solid rgba(255,255,255,0.03)',
-            background: 'rgba(0,0,0,0.2)',
+            borderBottom: '1px solid var(--border)',
+            background: 'color-mix(in srgb, var(--card) 95%, transparent)',
           }}>
             <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f56' }} />
             <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ffbd2e' }} />
@@ -744,7 +733,7 @@ function AboutHighlightCard({
         }}>
           {item.title}
         </h3>
-        <p style={{ color: 'var(--foreground)', opacity: 0.85, fontSize: 14, lineHeight: 1.65, margin: 0 }}>
+        <p style={{ color: MUTED, fontSize: 14, lineHeight: 1.65, margin: 0 }}>
           {item.desc}
         </p>
       </div>
@@ -879,9 +868,9 @@ function StatItem({ value, label, delay }: { value: number; label: string; delay
         lineHeight: 1, letterSpacing: '-0.03em',
       }}>
         <Counter end={value} active={vis} />
-        <span style={{ color: 'var(--foreground)', fontSize: 'clamp(18px,3vw,28px)' }}>+</span>
+        <span style={{ color: A, fontSize: 'clamp(18px,3vw,28px)' }}>+</span>
       </div>
-      <div style={{ fontFamily: MONO, fontSize: 10, color: 'var(--muted-foreground)', letterSpacing: '0.12em', marginTop: 8 }}>
+      <div style={{ fontFamily: MONO, fontSize: 11, fontWeight: 600, color: 'var(--muted-foreground)', letterSpacing: '0.12em', marginTop: 8 }}>
         {label}
       </div>
     </div>
@@ -1267,7 +1256,7 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
               borderRadius: 8, padding: '20px 20px 16px',
             }}
           >
-            <div style={{ fontFamily: MONO, fontSize: 10, color: '#94a3b8', letterSpacing: '0.1em', marginBottom: 10 }}>
+            <div style={{ fontFamily: MONO, fontSize: 11, fontWeight: 600, color: MUTED, letterSpacing: '0.1em', marginBottom: 10 }}>
               {s.icon} {s.label}
             </div>
             <div style={{