diff --git a/src/app/globals.css b/src/app/globals.css
index 5652c899d..ce2a4c235 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 :root {
   color-scheme: light;
@@ -67,6 +67,12 @@ body {
   transition: background-color 200ms ease, color 200ms ease;
 }
 
+/* Strip body background on landing page so the particle canvas (z-index: 0) is visible */
+body:has(.lnd-root) {
+  background: #050505 !important;
+  background-color: #050505 !important;
+}
+
 .surface-card {
   border: 1px solid var(--border);
   background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #ffffff 8%), var(--card));
@@ -174,6 +180,11 @@ body {
   animation: lndTicker 40s linear infinite;
 }
 
+.lnd-root,
+.lnd-root * {
+  cursor: none !important;
+}
+
 .lnd-root ::selection {
   background: rgba(129, 140, 248, 0.2);
   color: #fff;
@@ -227,13 +238,25 @@ body {
 .lnd-cta-secondary:hover { color: #e0e0e0; border-color: #444; }
 
 .lnd-cell {
-  background: #0e0e0e;
-  border: 1px solid #1a1a1a;
-  border-radius: 8px;
-  padding: 14px 16px;
-  transition: background 0.2s, border-color 0.2s;
+  background: rgba(8, 8, 10, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.035);
+  border-radius: 12px;
+  padding: 18px 20px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 4px 20px rgba(0, 0, 0, 0.35);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.lnd-cell:hover {
+  background: rgba(12, 12, 16, 0.75);
+  border-color: rgba(129, 140, 248, 0.35);
+  transform: translateY(-2px);
+  box-shadow: 
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 8px 30px rgba(129, 140, 248, 0.12);
 }
-.lnd-cell:hover { background: #141414; border-color: #2a2a2a; }
 
 .lnd-heatmap-cell { cursor: crosshair; }
 .lnd-heatmap-cell:hover {
diff --git a/src/components/CustomCursor.tsx b/src/components/CustomCursor.tsx
new file mode 100644
index 000000000..142fdcd19
--- /dev/null
+++ b/src/components/CustomCursor.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+
+export default function CustomCursor() {
+  const [mounted, setMounted] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isHidden, setIsHidden] = useState(true);
+
+  // Target mouse coordinates
+  const mouseRef = useRef({ x: -100, y: -100 });
+  
+  // Interpolated ring coordinates
+  const ringRef = useRef({ x: -100, y: -100 });
+
+  const dotDomRef = useRef<HTMLDivElement>(null);
+  const ringDomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const onMouseMove = (e: MouseEvent) => {
+      mouseRef.current.x = e.clientX;
+      mouseRef.current.y = e.clientY;
+      setIsHidden(false);
+    };
+
+    const onMouseLeave = () => {
+      setIsHidden(true);
+    };
+
+    const onMouseEnter = () => {
+      setIsHidden(false);
+    };
+
+    // Check if user is hovering over interactive components
+    const onMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target &&
+        (target.closest("a") ||
+          target.closest("button") ||
+          target.closest(".lnd-cell") ||
+          target.closest(".lnd-cta-primary") ||
+          target.closest(".lnd-cta-secondary") ||
+          target.closest(".lnd-nav-link") ||
+          target.style.cursor === "pointer")
+      ) {
+        setIsHovered(true);
+      } else {
+        setIsHovered(false);
+      }
+    };
+
+    window.addEventListener("mousemove", onMouseMove, { passive: true });
+    window.addEventListener("mouseleave", onMouseLeave, { passive: true });
+    window.addEventListener("mouseenter", onMouseEnter, { passive: true });
+    window.addEventListener("mouseover", onMouseOver, { passive: true });
+
+    let rafId: number;
+
+    const render = () => {
+      const targetX = mouseRef.current.x;
+      const targetY = mouseRef.current.y;
+
+      // Solid central core dot follows exactly
+      if (dotDomRef.current) {
+        dotDomRef.current.style.transform = `translate3d(${targetX - 4}px, ${targetY - 4}px, 0)`;
+      }
+
+      // Smooth lag-interpolation (lerp) for the outer concentric ring
+      const rx = ringRef.current.x;
+      const ry = ringRef.current.y;
+      
+      const nextRx = rx + (targetX - rx) * 0.15;
+      const nextRy = ry + (targetY - ry) * 0.15;
+
+      ringRef.current.x = nextRx;
+      ringRef.current.y = nextRy;
+
+      if (ringDomRef.current) {
+        // Offset by -16px to align center (32px wide)
+        ringDomRef.current.style.transform = `translate3d(${nextRx - 16}px, ${nextRy - 16}px, 0)`;
+      }
+
+      rafId = requestAnimationFrame(render);
+    };
+
+    rafId = requestAnimationFrame(render);
+
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mouseenter", onMouseEnter);
+      window.removeEventListener("mouseover", onMouseOver);
+      cancelAnimationFrame(rafId);
+    };
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <>
+      {/* 1. Glowing Cyan Dot Core */}
+      <div
+        ref={dotDomRef}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          backgroundColor: "#00f0ff",
+          pointerEvents: "none",
+          zIndex: 99999,
+          opacity: isHidden ? 0 : 1,
+          transform: "translate3d(-100px, -100px, 0)",
+          boxShadow: "0 0 10px #00f0ff, 0 0 20px #00f0ff",
+          transition: "opacity 0.25s ease-out, width 0.2s, height 0.2s, background-color 0.2s",
+          ...(isHovered && {
+            width: 5,
+            height: 5,
+            backgroundColor: "#ffffff",
+            boxShadow: "0 0 8px #ffffff",
+          }),
+        }}
+      />
+
+      {/* 2. Concentric spring outer ring */}
+      <div
+        ref={ringDomRef}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          border: "1.5px solid #00f0ff",
+          pointerEvents: "none",
+          zIndex: 99997, // just below the dot
+          opacity: isHidden ? 0 : 0.85,
+          transform: "translate3d(-100px, -100px, 0)",
+          boxShadow: "0 0 8px rgba(0, 240, 255, 0.4)",
+          transition: "opacity 0.25s ease-out, border-color 0.2s, width 0.25s, height 0.25s, box-shadow 0.25s, margin 0.25s",
+          ...(isHovered && {
+            width: 48,
+            height: 48,
+            borderColor: "#ffffff",
+            boxShadow: "0 0 16px rgba(255, 255, 255, 0.55)",
+            marginLeft: -8, // offsets the larger width (48px vs 32px -> 16px diff -> 8px margin shift)
+            marginTop: -8,
+          }),
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 72aa497b3..856bc7dda 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,10 +1,16 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const year = new Date().getFullYear();
 
 export default function Footer() {
+  const pathname = usePathname();
+  const isLanding = pathname === "/";
+
   return (
-    <footer className="dark mt-auto border-t border-[var(--border)] bg-[var(--background)] relative">
+    <footer className={`dark mt-auto border-t relative ${isLanding ? 'bg-transparent border-slate-900/40' : 'border-[var(--border)] bg-[var(--background)]'}`}>
       <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(59,130,246,0.08),transparent)] pointer-events-none" />
       <div className="relative mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
         <div className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr_0.8fr_0.8fr]">
diff --git a/src/components/ParticleBackground.tsx b/src/components/ParticleBackground.tsx
index 240d4487b..8c6caf627 100644
--- a/src/components/ParticleBackground.tsx
+++ b/src/components/ParticleBackground.tsx
@@ -2,18 +2,16 @@
 
 import { useEffect, useRef } from "react";
 
-interface Particle {
-  x: number;
-  y: number;
+interface Particle3D {
+  x: number; // Local 3D X
+  y: number; // Local 3D Y
+  z: number; // Local 3D Z
   vx: number;
   vy: number;
+  vz: number;
   radius: number;
   alpha: number;
   baseAlpha: number;
-  color: string;
-  hue: number;
-  burst: boolean;
-  life: number;
 }
 
 interface ShootingStar {
@@ -26,6 +24,37 @@ interface ShootingStar {
   life: number;
 }
 
+interface TwinkleStar {
+  x: number;
+  y: number;
+  size: number;
+  alpha: number;
+  phase: number;
+  speed: number;
+  color: string;
+}
+
+interface CursorSparkle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  alpha: number;
+  life: number;
+  color: string;
+}
+
+interface TechCrosshair {
+  x: number;
+  y: number;
+  z: number;
+  size: number;
+  alpha: number;
+  speed: number;
+  phase: number;
+}
+
 export default function ParticleBackground() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -41,39 +70,114 @@ export default function ParticleBackground() {
     if (prefersReducedMotion) return;
 
     let animationId: number;
-    let particles: Particle[] = [];
+    let particles: Particle3D[] = [];
     let shootingStars: ShootingStar[] = [];
+    let twinkleStars: TwinkleStar[] = [];
+    let cursorSparkles: CursorSparkle[] = [];
+    let techCrosshairs: TechCrosshair[] = [];
     let mouse = { x: -9999, y: -9999 };
 
+    // 3D Gesture States (Orbit Camera Controls)
+    let isDragging = false;
+    let lastMousePos = { x: 0, y: 0 };
+    let rotationX = 0.25; // initial tilt angle
+    let rotationY = 0.45; // initial orbit angle
+    let targetRotationX = 0.25;
+    let targetRotationY = 0.45;
+    let zoom = 1.0;
+    let targetZoom = 1.0;
+    
+    let scopeRotation = 0;
+
+    // Window gesture event handlers
+    const handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // Exclude interactive elements so clicking them does not trigger rotation
+      if (target.closest("a, button, [role='button'], input, textarea, .lnd-cta-primary, .lnd-cta-secondary")) {
+        return;
+      }
+      isDragging = true;
+      lastMousePos.x = e.clientX;
+      lastMousePos.y = e.clientY;
+    };
+
+    const handleMouseMoveWindow = (e: MouseEvent) => {
+      if (!isDragging) return;
+      const dx = e.clientX - lastMousePos.x;
+      const dy = e.clientY - lastMousePos.y;
+      
+      targetRotationY += dx * 0.0035; // orbit
+      targetRotationX += dy * 0.0035; // tilt
+      
+      // Limit vertical tilt to avoid camera flipping
+      targetRotationX = Math.max(-Math.PI / 2.2, Math.min(Math.PI / 2.2, targetRotationX));
+
+      lastMousePos.x = e.clientX;
+      lastMousePos.y = e.clientY;
+    };
+
+    const handleMouseUpWindow = () => {
+      isDragging = false;
+    };
+
+    const handleWheelWindow = (e: WheelEvent) => {
+      // Zoom factor adjustment (smooth delta interpolation)
+      targetZoom = Math.max(0.45, Math.min(2.0, targetZoom + e.deltaY * -0.0006));
+    };
+
     const handleMouseMove = (e: MouseEvent) => {
       mouse.x = e.clientX;
       mouse.y = e.clientY;
+
+      // Spawn subtle electric blue sparks on cursor hover
+      const colors = ["#00f0ff", "#00b8ff", "#818cf8", "#22d3ee", "#ffffff"];
+      for (let i = 0; i < 2; i++) {
+        cursorSparkles.push({
+          x: e.clientX,
+          y: e.clientY,
+          vx: (Math.random() - 0.5) * 2.2,
+          vy: (Math.random() - 0.5) * 2.2 - 0.2,
+          size: Math.random() * 2.5 + 1.2,
+          alpha: 0.85,
+          life: 1.0,
+          color: colors[Math.floor(Math.random() * colors.length)],
+        });
+      }
     };
+
     const handleMouseLeave = () => {
       mouse.x = -9999;
       mouse.y = -9999;
     };
+
     const handleClick = (e: MouseEvent) => {
       const cx = e.clientX;
       const cy = e.clientY;
-      for (let i = 0; i < 30; i++) {
-        const angle = (Math.PI * 2 * i) / 30;
-        const speed = Math.random() * 4 + 1;
-        particles.push({
-          x: cx, y: cy,
+      // Burst effect on click
+      for (let i = 0; i < 20; i++) {
+        const angle = (Math.PI * 2 * i) / 20;
+        const speed = Math.random() * 3.5 + 1.5;
+        cursorSparkles.push({
+          x: cx,
+          y: cy,
           vx: Math.cos(angle) * speed,
           vy: Math.sin(angle) * speed,
-          radius: Math.random() * 2.5 + 0.5,
-          alpha: 1, baseAlpha: 1, life: 1,
-          color: `hsl(${Math.random() * 60 + 240}, 100%, 70%)`,
-          hue: Math.random() * 60 + 240,
-          burst: true,
+          size: Math.random() * 2.8 + 1.2,
+          alpha: 0.9,
+          life: 1.0,
+          color: "#00f0ff",
         });
       }
     };
 
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseleave", handleMouseLeave);
+    // Attach global gesture events to window
+    window.addEventListener("mousedown", handleMouseDown, { passive: true });
+    window.addEventListener("mousemove", handleMouseMoveWindow, { passive: true });
+    window.addEventListener("mouseup", handleMouseUpWindow, { passive: true });
+    window.addEventListener("wheel", handleWheelWindow, { passive: true });
+
+    window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    window.addEventListener("mouseleave", handleMouseLeave, { passive: true });
     window.addEventListener("click", handleClick);
 
     const resize = () => {
@@ -81,134 +185,405 @@ export default function ParticleBackground() {
       canvas.height = window.innerHeight;
     };
 
-    const createParticle = (): Particle => {
-      const hue = Math.random() * 60 + 220;
-      const baseAlpha = Math.random() * 0.6 + 0.15;
-      return {
-        x: Math.random() * canvas.width,
-        y: Math.random() * canvas.height,
-        vx: (Math.random() - 0.5) * 0.5,
-        vy: (Math.random() - 0.5) * 0.5,
-        radius: Math.random() * 2 + 0.5,
-        alpha: baseAlpha, baseAlpha,
-        color: `hsl(${hue}, 80%, 68%)`,
-        hue, burst: false, life: 1,
-      };
-    };
-
     const createShootingStar = (): ShootingStar => ({
       x: Math.random() * canvas.width * 0.7,
-      y: Math.random() * canvas.height * 0.4,
-      vx: Math.random() * 8 + 4,
-      vy: Math.random() * 4 + 2,
-      length: Math.random() * 80 + 60,
-      alpha: 1, life: 1,
+      y: Math.random() * canvas.height * 0.35,
+      vx: Math.random() * 7 + 4,
+      vy: Math.random() * 3 + 1.5,
+      length: Math.random() * 80 + 50,
+      alpha: 0.7,
+      life: 1,
     });
 
     const init = () => {
       resize();
-      const count = Math.min(
-        Math.floor((canvas.width * canvas.height) / 10000),
-        100
-      );
-      particles = Array.from({ length: count }, createParticle);
+      
+      // Initialize 3D Constellation particles — higher count for visible network
+      const count = Math.min(Math.floor((canvas.width * canvas.height) / 12000), 90);
+      particles = [];
+      for (let i = 0; i < count; i++) {
+        particles.push({
+          // Setup initial coords relative to center
+          x: (Math.random() - 0.5) * canvas.width * 0.9,
+          y: (Math.random() - 0.5) * canvas.height * 0.9,
+          z: (Math.random() - 0.5) * 500,
+          vx: (Math.random() - 0.5) * 0.35,
+          vy: (Math.random() - 0.5) * 0.35,
+          vz: (Math.random() - 0.5) * 0.35,
+          radius: Math.random() * 2.2 + 1.4,
+          alpha: Math.random() * 0.35 + 0.45,
+          baseAlpha: Math.random() * 0.35 + 0.45,
+        });
+      }
+
+      // Initialize background stars
+      const starCount = Math.min(Math.floor((canvas.width * canvas.height) / 26000), 40);
+      twinkleStars = Array.from({ length: starCount }, () => ({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        size: Math.random() * 1.2 + 0.5,
+        alpha: Math.random(),
+        phase: Math.random() * Math.PI * 2,
+        speed: 0.01 + Math.random() * 0.018,
+        color: "hsl(190, 100%, 94%)",
+      }));
+
+      // Technical target crosshairs
+      const crosshairCount = 18;
+      techCrosshairs = [];
+      for (let i = 0; i < crosshairCount; i++) {
+        techCrosshairs.push({
+          x: (Math.random() - 0.5) * canvas.width * 0.85,
+          y: (Math.random() - 0.5) * canvas.height * 0.85,
+          z: (Math.random() - 0.5) * 500,
+          size: Math.random() * 3.5 + 3.0,
+          alpha: Math.random() * 0.22 + 0.08,
+          speed: 0.006 + Math.random() * 0.01,
+          phase: Math.random() * Math.PI * 2,
+        });
+      }
     };
 
+    const perspective = 800; // 3D Focal perspective depth
+
     const animate = () => {
-      ctx.fillStyle = "rgba(10,10,26,0.18)";
+      // Full clear each frame for crisp rendering (no ghosting)
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = "#050505";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-      // Shooting stars
-      if (Math.random() < 0.008) shootingStars.push(createShootingStar());
-      shootingStars = shootingStars.filter((s) => s.alpha > 0);
-      shootingStars.forEach((s) => {
-        s.life -= 0.018;
-        s.alpha = s.life;
-        s.x += s.vx;
-        s.y += s.vy;
-        const tailX = s.x - s.length * 0.7;
-        const tailY = s.y - s.length * 0.35;
-        const grad = ctx.createLinearGradient(s.x, s.y, tailX, tailY);
-        grad.addColorStop(0, `rgba(255,255,255,${s.alpha})`);
-        grad.addColorStop(0.3, `rgba(180,160,255,${s.alpha * 0.6})`);
-        grad.addColorStop(1, "rgba(0,0,0,0)");
+      const cx = canvas.width / 2;
+      const cy = canvas.height / 2;
+      scopeRotation += 1;
+
+      // Draw soft cinematic radial backlights
+      const g1 = ctx.createRadialGradient(0, 0, 0, 0, 0, canvas.width * 0.55);
+      g1.addColorStop(0, "rgba(0, 240, 255, 0.045)");
+      g1.addColorStop(1, "rgba(0, 0, 0, 0)");
+      ctx.fillStyle = g1;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      const g2 = ctx.createRadialGradient(canvas.width, canvas.height * 0.45, 0, canvas.width, canvas.height * 0.45, canvas.width * 0.45);
+      g2.addColorStop(0, "rgba(129, 140, 248, 0.035)");
+      g2.addColorStop(1, "rgba(0, 0, 0, 0)");
+      ctx.fillStyle = g2;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Smooth interpolation for 3D gesture camera inputs (Lerp)
+      rotationX += (targetRotationX - rotationX) * 0.07;
+      rotationY += (targetRotationY - rotationY) * 0.07;
+      zoom += (targetZoom - zoom) * 0.07;
+
+      // Slowly auto-rotate constellation when not dragging
+      if (!isDragging) {
+        targetRotationY += 0.00045; // passive revolving drift
+      }
+
+      const cosY = Math.cos(rotationY), sinY = Math.sin(rotationY);
+      const cosX = Math.cos(rotationX), sinX = Math.sin(rotationX);
+
+      // 1. Twinkling Background Stars
+      twinkleStars.forEach((star) => {
+        star.phase += star.speed;
+        star.alpha = 0.18 + Math.sin(star.phase) * 0.3;
+
+        ctx.save();
+        ctx.globalAlpha = star.alpha;
+        ctx.strokeStyle = star.color;
+        ctx.lineWidth = 0.5;
+        
         ctx.beginPath();
-        ctx.moveTo(s.x, s.y);
-        ctx.lineTo(tailX, tailY);
-        ctx.strokeStyle = grad;
-        ctx.lineWidth = 2;
+        ctx.moveTo(star.x, star.y - star.size * 1.5);
+        ctx.lineTo(star.x, star.y + star.size * 1.5);
+        ctx.moveTo(star.x - star.size * 1.5, star.y);
+        ctx.lineTo(star.x + star.size * 1.5, star.y);
         ctx.stroke();
+
+        ctx.fillStyle = "#ffffff";
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size * 0.35, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
       });
 
-      // Connections
-      for (let i = 0; i < particles.length; i++) {
-        for (let j = i + 1; j < particles.length; j++) {
-          const dx = particles[i].x - particles[j].x;
-          const dy = particles[i].y - particles[j].y;
-          const dist = Math.sqrt(dx * dx + dy * dy);
-          if (dist < 110) {
-            ctx.beginPath();
-            ctx.moveTo(particles[i].x, particles[i].y);
-            ctx.lineTo(particles[j].x, particles[j].y);
-            ctx.strokeStyle = `rgba(140,120,255,${(1 - dist / 110) * 0.15})`;
-            ctx.lineWidth = 0.5;
-            ctx.stroke();
+      // 2. Rotate and Draw 3D Dashed HUD Scope Rings (Very low opacity)
+      const rings = [
+        { radius: 180, dashes: 32, speed: 0.45, color: "rgba(0, 240, 255, 0.12)", glowOpacity: 0.04 },
+        { radius: 300, dashes: 48, speed: -0.25, color: "rgba(129, 140, 248, 0.08)", glowOpacity: 0.03 },
+        { radius: 450, dashes: 64, speed: 0.12, color: "rgba(0, 240, 255, 0.06)", glowOpacity: 0.02 }
+      ];
+
+      rings.forEach((ring, ringIdx) => {
+        const segments = 120;
+        let first = true;
+        ctx.save();
+        
+        const opacityScale = Math.min(1.0, zoom);
+        
+        // Pass A: Outer Neon Glow (faint)
+        ctx.strokeStyle = `rgba(0, 240, 255, ${ring.glowOpacity * opacityScale})`;
+        ctx.lineWidth = (ringIdx === 1 ? 3.0 : 2.0) * zoom;
+        
+        ctx.beginPath();
+        const rotAngle = ringIdx * 0.8 + scopeRotation * ring.speed * 0.015;
+        
+        for (let i = 0; i <= segments; i++) {
+          const angle = (i / segments) * Math.PI * 2 + rotAngle;
+          const lx = ring.radius * Math.cos(angle);
+          const ly = ring.radius * Math.sin(angle);
+          const lz = 0;
+          
+          const rx1 = lx * cosY - lz * sinY;
+          const rz1 = lz * cosY + lx * sinY;
+          const ry2 = ly * cosX - rz1 * sinX;
+          const rz2 = rz1 * cosX + ly * sinX;
+
+          const zoomedX = rx1 * zoom;
+          const zoomedY = ry2 * zoom;
+          const zoomedZ = rz2 * zoom;
+          
+          const scale = perspective / (perspective + zoomedZ);
+          const sx = cx + zoomedX * scale;
+          const sy = cy + zoomedY * scale;
+          
+          const dashSegments = Math.floor(segments / ring.dashes);
+          const isDraw = (i % (dashSegments * 2)) < dashSegments;
+          
+          if (isDraw) {
+            if (first) {
+              ctx.moveTo(sx, sy);
+              first = false;
+            } else {
+              ctx.lineTo(sx, sy);
+            }
+          } else {
+            first = true;
           }
         }
-      }
+        ctx.stroke();
+
+        // Pass B: Inner Core
+        first = true;
+        ctx.strokeStyle = ring.color.replace(/[\d.]+\)$/, `${0.35 * opacityScale})`);
+        ctx.lineWidth = (ringIdx === 1 ? 1.2 : 0.75) * zoom;
+        
+        ctx.beginPath();
+        for (let i = 0; i <= segments; i++) {
+          const angle = (i / segments) * Math.PI * 2 + rotAngle;
+          const lx = ring.radius * Math.cos(angle);
+          const ly = ring.radius * Math.sin(angle);
+          const lz = 0;
+          
+          const rx1 = lx * cosY - lz * sinY;
+          const rz1 = lz * cosY + lx * sinY;
+          const ry2 = ly * cosX - rz1 * sinX;
+          const rz2 = rz1 * cosX + ly * sinX;
 
-      // Particles
-      particles = particles.filter((p) => !p.burst || p.life > 0);
-      particles.forEach((p) => {
-        if (p.burst) {
-          p.life -= 0.025;
-          p.alpha = p.life;
-          p.vx *= 0.96;
-          p.vy *= 0.96;
-        } else {
-          // Attract to mouse
-          const mdx = mouse.x - p.x;
-          const mdy = mouse.y - p.y;
-          const mdist = Math.sqrt(mdx * mdx + mdy * mdy);
-          const attractRadius = 120;
-          if (mdist < attractRadius && mdist > 0) {
-            const force = ((attractRadius - mdist) / attractRadius) * 0.012;
-            p.vx += (mdx / mdist) * force * mdist * 0.05;
-            p.vy += (mdy / mdist) * force * mdist * 0.05;
-            p.alpha = Math.min(1, p.baseAlpha + (1 - mdist / attractRadius) * 0.8);
+          const zoomedX = rx1 * zoom;
+          const zoomedY = ry2 * zoom;
+          const zoomedZ = rz2 * zoom;
+          
+          const scale = perspective / (perspective + zoomedZ);
+          const sx = cx + zoomedX * scale;
+          const sy = cy + zoomedY * scale;
+          
+          const dashSegments = Math.floor(segments / ring.dashes);
+          const isDraw = (i % (dashSegments * 2)) < dashSegments;
+          
+          if (isDraw) {
+            if (first) {
+              ctx.moveTo(sx, sy);
+              first = false;
+            } else {
+              ctx.lineTo(sx, sy);
+            }
           } else {
-            p.alpha += (p.baseAlpha - p.alpha) * 0.05;
+            first = true;
           }
-          // Speed limit + drift
-          const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
-          if (speed > 2) { p.vx = (p.vx / speed) * 2; p.vy = (p.vy / speed) * 2; }
-          p.vx *= 0.99; p.vy *= 0.99;
-          p.vx += (Math.random() - 0.5) * 0.02;
-          p.vy += (Math.random() - 0.5) * 0.02;
-          // Hue shift over time
-          p.hue = (p.hue + 0.1) % 360;
-          p.color = `hsl(${p.hue}, 80%, 68%)`;
         }
+        ctx.stroke();
+        ctx.restore();
+      });
+
+      // 3. Rotate and Draw 3D Technical target crosshairs (+) (very low opacity)
+      techCrosshairs.forEach((tc) => {
+        // Rotate local coordinates
+        const ryX = tc.x * cosY - tc.z * sinY;
+        const ryZ = tc.z * cosY + tc.x * sinY;
+        const rxY = tc.y * cosX - ryZ * sinX;
+        const rxZ = ryZ * cosX + tc.y * sinX;
+
+        const zoomedX = ryX * zoom;
+        const zoomedY = rxY * zoom;
+        const zoomedZ = rxZ * zoom;
+
+        // Apply slight alpha wave
+        tc.phase += tc.speed;
+        const baseAlpha = 0.08 + Math.sin(tc.phase) * 0.04;
+
+        const scale = perspective / (perspective + zoomedZ);
+        const sx = cx + zoomedX * scale;
+        const sy = cy + zoomedY * scale;
+        
+        const alpha = baseAlpha * scale * Math.min(1.0, zoom);
+
+        ctx.save();
+        ctx.strokeStyle = `rgba(0, 240, 255, ${alpha * 0.75})`;
+        ctx.lineWidth = 0.55;
+        
+        ctx.beginPath();
+        ctx.moveTo(sx - tc.size * scale * 0.7, sy);
+        ctx.lineTo(sx + tc.size * scale * 0.7, sy);
+        ctx.moveTo(sx, sy - tc.size * scale * 0.7);
+        ctx.lineTo(sx, sy + tc.size * scale * 0.7);
+        ctx.stroke();
+        ctx.restore();
+      });
 
+      // Update particle local positions and project to 3D orbit system
+      const projected = particles.map((p) => {
+        // Drift in local space
         p.x += p.vx;
         p.y += p.vy;
+        p.z += p.vz;
+
+        // Keep inside 3D local boundaries
+        const bound = 420;
+        if (Math.abs(p.x) > bound) p.vx *= -1;
+        if (Math.abs(p.y) > bound) p.vy *= -1;
+        if (Math.abs(p.z) > bound) p.vz *= -1;
+
+        // Rotate local coordinate Copy to preserve physics stability
+        const ryX = p.x * cosY - p.z * sinY;
+        const ryZ = p.z * cosY + p.x * sinY;
+        
+        const rxY = p.y * cosX - ryZ * sinX;
+        const rxZ = ryZ * cosX + p.y * sinX;
+
+        // Apply scale zoom
+        const zoomedX = ryX * zoom;
+        const zoomedY = rxY * zoom;
+        const zoomedZ = rxZ * zoom;
+
+        const scale = perspective / (perspective + zoomedZ);
+        const sx = cx + zoomedX * scale;
+        const sy = cy + zoomedY * scale;
 
-        if (!p.burst) {
-          if (p.x < 0) p.x = canvas.width;
-          if (p.x > canvas.width) p.x = 0;
-          if (p.y < 0) p.y = canvas.height;
-          if (p.y > canvas.height) p.y = 0;
+        return { p, sx, sy, scale, rxZ: zoomedZ };
+      });
+
+      // 4. Draw 3D Web Connections — BRIGHT visible lines matching reference
+      const connectionDist3D = 260;
+      for (let i = 0; i < projected.length; i++) {
+        for (let j = i + 1; j < projected.length; j++) {
+          const dx = projected[i].p.x - projected[j].p.x;
+          const dy = projected[i].p.y - projected[j].p.y;
+          const dz = projected[i].p.z - projected[j].p.z;
+          const dist3D = Math.sqrt(dx * dx + dy * dy + dz * dz);
+
+          if (dist3D < connectionDist3D) {
+            ctx.beginPath();
+            ctx.moveTo(projected[i].sx, projected[i].sy);
+            ctx.lineTo(projected[j].sx, projected[j].sy);
+            
+            const scaleAvg = (projected[i].scale + projected[j].scale) / 2;
+            
+            // Brighter line opacity for visible constellation web
+            const opacity = (1 - dist3D / connectionDist3D) * 0.55 * scaleAvg * Math.min(1.0, zoom);
+            
+            ctx.strokeStyle = `rgba(0, 210, 220, ${opacity})`;
+            ctx.lineWidth = 0.8 * scaleAvg;
+            ctx.stroke();
+          }
         }
+      }
 
-        // Glowing particle
-        const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius * 5);
-        g.addColorStop(0, `hsla(${p.hue}, 80%, 68%, ${p.alpha})`);
-        g.addColorStop(0.4, `hsla(${p.hue}, 80%, 68%, ${p.alpha * 0.4})`);
-        g.addColorStop(1, "rgba(0,0,0,0)");
+      // 5. Draw Constellation Web Nodes — BRIGHT glowing dots matching reference
+      projected.forEach(({ p, sx, sy, scale }) => {
+        const radius = p.radius * scale;
+        
+        // Bright visible alpha values
+        const alpha = p.alpha * scale * 0.85 * Math.min(1.0, zoom);
+
+        ctx.save();
+        // Outer glow halo
+        const g = ctx.createRadialGradient(sx, sy, 0, sx, sy, radius * 6);
+        g.addColorStop(0, `rgba(0, 210, 220, ${alpha * 0.7})`);
+        g.addColorStop(0.3, `rgba(0, 210, 220, ${alpha * 0.25})`);
+        g.addColorStop(1, "rgba(0, 0, 0, 0)");
+        
         ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius * 5, 0, Math.PI * 2);
+        ctx.arc(sx, sy, radius * 6, 0, Math.PI * 2);
         ctx.fillStyle = g;
         ctx.fill();
+
+        // Inner solid node core — bright cyan/teal dot
+        ctx.fillStyle = `rgba(0, 230, 230, ${Math.min(1, alpha * 2.5)})`;
+        ctx.beginPath();
+        ctx.arc(sx, sy, radius * 1.1, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Bright white center point
+        ctx.fillStyle = `rgba(255, 255, 255, ${Math.min(1, alpha * 1.8)})`;
+        ctx.beginPath();
+        ctx.arc(sx, sy, radius * 0.45, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      });
+
+      // 6. Cursor Sparkles (Slightly larger, dynamic sparks)
+      cursorSparkles = cursorSparkles.filter((p) => p.life > 0);
+      cursorSparkles.forEach((p) => {
+        p.life -= 0.024;
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vx *= 0.96;
+        p.vy *= 0.96;
+        p.vy -= 0.01;
+
+        const size = Math.max(0, p.size * p.life);
+        const alpha = Math.max(0, p.life);
+
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.strokeStyle = p.color;
+        ctx.lineWidth = 0.75;
+        
+        ctx.beginPath();
+        ctx.moveTo(p.x - size, p.y);
+        ctx.lineTo(p.x + size, p.y);
+        ctx.moveTo(p.x, p.y - size);
+        ctx.lineTo(p.x, p.y + size);
+        ctx.stroke();
+
+        ctx.fillStyle = "#ffffff";
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, size * 0.3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      });
+
+      // 7. Shooting Stars
+      if (Math.random() < 0.005) shootingStars.push(createShootingStar());
+      shootingStars = shootingStars.filter((s) => s.alpha > 0);
+      shootingStars.forEach((s) => {
+        s.life -= 0.015;
+        s.alpha = s.life;
+        s.x += s.vx;
+        s.y += s.vy;
+        const tailX = s.x - s.length * 0.7;
+        const tailY = s.y - s.length * 0.35;
+        const grad = ctx.createLinearGradient(s.x, s.y, tailX, tailY);
+        grad.addColorStop(0, `rgba(255, 255, 255, ${s.alpha * 0.45})`);
+        grad.addColorStop(0.3, `rgba(0, 240, 255, ${s.alpha * 0.3})`);
+        grad.addColorStop(1, "rgba(0, 0, 0, 0)");
+        
+        ctx.beginPath();
+        ctx.moveTo(s.x, s.y);
+        ctx.lineTo(tailX, tailY);
+        ctx.strokeStyle = grad;
+        ctx.lineWidth = 1.3;
+        ctx.stroke();
       });
 
       animationId = requestAnimationFrame(animate);
@@ -223,6 +598,10 @@ export default function ParticleBackground() {
     return () => {
       cancelAnimationFrame(animationId);
       window.removeEventListener("resize", handleResize);
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMoveWindow);
+      window.removeEventListener("mouseup", handleMouseUpWindow);
+      window.removeEventListener("wheel", handleWheelWindow);
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseleave", handleMouseLeave);
       window.removeEventListener("click", handleClick);
@@ -230,11 +609,19 @@ export default function ParticleBackground() {
   }, []);
 
   return (
-    <canvas
-      ref={canvasRef}
-      className="fixed inset-0 w-full h-full pointer-events-none"
-      style={{ zIndex: 0 }}
-      aria-hidden="true"
-    />
+    <div className="fixed inset-0 w-full h-full pointer-events-none" style={{ zIndex: 0, background: "#050505" }}>
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 w-full h-full pointer-events-none"
+        aria-hidden="true"
+      />
+      {/* Cinematic Film Grain Overlay */}
+      <div 
+        className="absolute inset-0 w-full h-full opacity-[0.02] pointer-events-none"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+        }}
+      />
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/landing/LandingPage.tsx b/src/components/landing/LandingPage.tsx
index 09297618e..547310dff 100644
--- a/src/components/landing/LandingPage.tsx
+++ b/src/components/landing/LandingPage.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import CustomCursor from "@/components/CustomCursor";
 
 /* ═══════════════════════════════════════════
    PUBLIC TYPES
@@ -22,7 +23,7 @@ const BG = 'transparent'
 const SURF = '#0e0e0e';
 const BORDER = '#1a1a1a';
 const TEXT = '#e0e0e0';
-const MUTED = '#555';
+const MUTED = '#94a3b8';
 const HC = ['#111', '#1e1b4b', '#3730a3', '#4f46e5', A]; // heatmap levels
 const MC = ['#111', '#1e1b4b', '#3730a3', A];             // mini heatmap
 
@@ -167,11 +168,11 @@ function LandingNav() {
    BENTO WIDGETS
    ═══════════════════════════════════════════ */
 const wLabel: React.CSSProperties = {
-  fontFamily: MONO, fontSize: 10, fontWeight: 500,
-  color: '#444', textTransform: 'uppercase', letterSpacing: '0.1em',
+  fontFamily: MONO, fontSize: 10, fontWeight: 600,
+  color: '#818cf8', textTransform: 'uppercase', letterSpacing: '0.1em',
 };
 const wValue: React.CSSProperties = {
-  fontFamily: MONO, fontWeight: 600, color: TEXT,
+  fontFamily: MONO, fontWeight: 700, color: TEXT,
 };
 
 function Cell({
@@ -198,23 +199,23 @@ function ChartWidget() {
   const [hovBar, setHovBar] = useState(-1);
   const max = 9;
   return (
-    <Cell spanCols={2} style={{ display: 'flex', flexDirection: 'column', minHeight: 100 }}>
-      <div ref={ref} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+    <Cell spanCols={2} style={{ display: 'flex', flexDirection: 'column', minHeight: 160, padding: '18px 20px' }}>
+      <div ref={ref} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
         <span style={wLabel}>contributions / 30d</span>
-        <span style={{ ...wLabel, color: A }}>■ active</span>
+        <span style={{ ...wLabel, color: '#10b981' }}>■ active</span>
       </div>
-      <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 2, minHeight: 60 }}>
+      <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 3, minHeight: 100 }}>
         {BARS.map((v, i) => (
           <div
             key={i}
             onMouseEnter={() => setHovBar(i)}
             onMouseLeave={() => setHovBar(-1)}
             style={{
-              flex: 1, borderRadius: '2px 2px 0 0',
-              background: hovBar === i ? '#fff' : A,
+              flex: 1, borderRadius: '3px 3px 0 0',
+              background: hovBar === i ? '#ffffff' : A,
               height: vis ? `${(v / max) * 100}%` : '0%',
-              opacity: hovBar === i ? 1 : 0.3 + (v / max) * 0.7,
-              transition: `height 0.5s cubic-bezier(0.4,0,0.2,1) ${i * 20}ms, opacity 0.15s`,
+              opacity: hovBar === i ? 1 : 0.35 + (v / max) * 0.65,
+              transition: `height 0.6s cubic-bezier(0.16,1,0.3,1) ${i * 20}ms, opacity 0.15s, background-color 0.15s`,
               cursor: 'crosshair', position: 'relative',
             }}
           >
@@ -222,9 +223,10 @@ function ChartWidget() {
               <div style={{
                 position: 'absolute', bottom: '100%', left: '50%',
                 transform: 'translateX(-50%)',
-                background: '#fff', color: '#000', fontSize: 9,
-                fontFamily: MONO, padding: '2px 4px', borderRadius: 3,
-                marginBottom: 2, whiteSpace: 'nowrap', fontWeight: 600,
+                background: '#ffffff', color: '#000000', fontSize: 10,
+                fontFamily: MONO, padding: '3px 6px', borderRadius: 4,
+                marginBottom: 4, whiteSpace: 'nowrap', fontWeight: 700,
+                boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
               }}>
                 {v}
               </div>
@@ -238,29 +240,29 @@ function ChartWidget() {
 
 function StreakWidget() {
   const [ref, vis] = useScrollReveal(0);
-  const r = 26, circ = 2 * Math.PI * r, pct = 23 / 30;
+  const r = 38, circ = 2 * Math.PI * r, pct = 23 / 30;
   return (
-    <Cell>
+    <Cell style={{ padding: '18px 16px' }}>
       <div
         ref={ref}
-        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 4 }}
+        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 8 }}
       >
-        <div style={{ position: 'relative', width: 62, height: 62 }}>
-          <svg width="62" height="62" viewBox="0 0 62 62" style={{ transform: 'rotate(-90deg)' }}>
-            <circle cx="31" cy="31" r={r} fill="none" stroke="#1a1a1a" strokeWidth="3" />
+        <div style={{ position: 'relative', width: 90, height: 90 }}>
+          <svg width="90" height="90" viewBox="0 0 90 90" style={{ transform: 'rotate(-90deg)' }}>
+            <circle cx="45" cy="45" r={r} fill="none" stroke="#1e293b" strokeWidth="4" />
             <circle
-              cx="31" cy="31" r={r} fill="none" stroke={A} strokeWidth="3"
+              cx="45" cy="45" r={r} fill="none" stroke={A} strokeWidth="4"
               strokeDasharray={circ}
               strokeDashoffset={circ * (1 - (vis ? pct : 0))}
               strokeLinecap="round"
-              style={{ transition: 'stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1) 0.3s' }}
+              style={{ transition: 'stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s' }}
             />
           </svg>
           <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <span style={{ ...wValue, fontSize: 20 }}>23</span>
+            <span style={{ ...wValue, fontSize: 28 }}>23</span>
           </div>
         </div>
-        <span style={{ ...wLabel, fontSize: 9 }}>day streak</span>
+        <span style={{ ...wLabel, fontSize: 9.5, color: '#94a3b8' }}>day streak</span>
       </div>
     </Cell>
   );
@@ -269,17 +271,17 @@ function StreakWidget() {
 function MergeWidget() {
   const [ref, vis] = useScrollReveal(0);
   return (
-    <Cell>
+    <Cell style={{ padding: '18px 20px' }}>
       <div ref={ref} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
         <span style={wLabel}>merge rate</span>
-        <span style={{ ...wValue, fontSize: 26, marginTop: 4, color: A }}>
-          87<span style={{ color: '#333', fontSize: 14 }}>%</span>
+        <span style={{ ...wValue, fontSize: 32, marginTop: 6, color: A }}>
+          87<span style={{ color: '#94a3b8', fontSize: 16 }}>%</span>
         </span>
-        <div style={{ marginTop: 8, height: 3, borderRadius: 2, background: '#1a1a1a', overflow: 'hidden' }}>
+        <div style={{ marginTop: 10, height: 6, borderRadius: 3, background: '#1e293b', overflow: 'hidden' }}>
           <div style={{
-            height: '100%', borderRadius: 2, background: A,
+            height: '100%', borderRadius: 3, background: A,
             width: vis ? '87%' : '0%',
-            transition: 'width 1s cubic-bezier(0.4,0,0.2,1) 0.2s',
+            transition: 'width 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s',
           }} />
         </div>
       </div>
@@ -290,17 +292,17 @@ function MergeWidget() {
 function GoalWidget() {
   const [ref, vis] = useScrollReveal(0);
   return (
-    <Cell>
+    <Cell style={{ padding: '18px 20px' }}>
       <div ref={ref} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
         <span style={wLabel}>weekly goal</span>
-        <span style={{ ...wValue, fontSize: 26, marginTop: 4 }}>
-          84<span style={{ color: '#333', fontSize: 14 }}>%</span>
+        <span style={{ ...wValue, fontSize: 32, marginTop: 6 }}>
+          84<span style={{ color: '#94a3b8', fontSize: 16 }}>%</span>
         </span>
-        <div style={{ marginTop: 8, height: 3, borderRadius: 2, background: '#1a1a1a', overflow: 'hidden' }}>
+        <div style={{ marginTop: 10, height: 6, borderRadius: 3, background: '#1e293b', overflow: 'hidden' }}>
           <div style={{
-            height: '100%', borderRadius: 2, background: '#f59e0b',
+            height: '100%', borderRadius: 3, background: '#f59e0b',
             width: vis ? '84%' : '0%',
-            transition: 'width 1s cubic-bezier(0.4,0,0.2,1) 0.3s',
+            transition: 'width 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s',
           }} />
         </div>
       </div>
@@ -311,15 +313,15 @@ function GoalWidget() {
 function HeatmapMini() {
   const [ref, vis] = useScrollReveal(0);
   return (
-    <Cell>
+    <Cell style={{ padding: '18px 20px' }}>
       <div ref={ref}>
-        <span style={{ ...wLabel, display: 'block', marginBottom: 8 }}>heatmap</span>
-        <div style={{ display: 'grid', gridTemplateRows: 'repeat(7, 1fr)', gridAutoFlow: 'column', gap: 2 }}>
+        <span style={{ ...wLabel, display: 'block', marginBottom: 12 }}>heatmap</span>
+        <div style={{ display: 'grid', gridTemplateRows: 'repeat(7, 1fr)', gridAutoFlow: 'column', gap: 3 }}>
           {MINI.map((v, i) => (
             <div
               key={i}
               style={{
-                width: 8, height: 8, borderRadius: 1.5,
+                width: 11, height: 11, borderRadius: 2,
                 background: MC[v],
                 opacity: vis ? 1 : 0,
                 transform: vis ? 'scale(1)' : 'scale(0)',
@@ -337,7 +339,7 @@ function BentoGrid() {
   return (
     <div style={{
       display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
-      gap: 5, width: '100%', maxWidth: 380,
+      gap: 12, width: '100%', maxWidth: 500,
     }}>
       <ChartWidget />
       <StreakWidget />
@@ -442,7 +444,7 @@ function CommitTicker() {
           <span
             key={i}
             style={{
-              fontFamily: MONO, fontSize: 12, color: '#333',
+              fontFamily: MONO, fontSize: 12, color: '#cbd5e1',
               display: 'inline-flex', alignItems: 'center', gap: 10,
             }}
           >
@@ -463,15 +465,15 @@ function HeatmapSection() {
   return (
     <section ref={ref} style={{ padding: '64px clamp(20px,4vw,48px)', overflow: 'hidden' }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
-        <span style={{ fontFamily: MONO, fontSize: 11, color: '#333', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+        <span style={{ fontFamily: MONO, fontSize: 11, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
           52 weeks of contributions
         </span>
         <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-          <span style={{ fontFamily: MONO, fontSize: 10, color: '#333' }}>less</span>
+          <span style={{ fontFamily: MONO, fontSize: 10, color: '#64748b' }}>less</span>
           {HC.map((c, i) => (
             <div key={i} style={{ width: 10, height: 10, borderRadius: 2, background: c, border: `1px solid ${BORDER}` }} />
           ))}
-          <span style={{ fontFamily: MONO, fontSize: 10, color: '#333' }}>more</span>
+          <span style={{ fontFamily: MONO, fontSize: 10, color: '#64748b' }}>more</span>
         </div>
       </div>
       <div style={{
@@ -524,22 +526,22 @@ function StatItem({ value, label, delay }: { value: number; label: string; delay
         lineHeight: 1, letterSpacing: '-0.03em',
       }}>
         <Counter end={value} active={vis} />
-        <span style={{ color: '#222', fontSize: 'clamp(18px,3vw,28px)' }}>+</span>
-      </div>
-      <div style={{ fontFamily: MONO, fontSize: 10, color: '#333', letterSpacing: '0.12em', marginTop: 8 }}>
-        {label}
+          <span style={{ color: A, fontSize: 'clamp(18px,3vw,28px)' }}>+</span>
+        </div>
+        <div style={{ fontFamily: MONO, fontSize: 10, color: '#94a3b8', letterSpacing: '0.12em', marginTop: 8 }}>
+          {label}
+        </div>
       </div>
-    </div>
-  );
-}
-
-function StatsSection() {
-  return (
-    <section style={{
-      padding: '64px clamp(20px,4vw,48px)',
-      display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px,1fr))',
-      gap: 24, borderTop: '1px solid #111',
-    }}>
+    );
+  }
+
+  function StatsSection() {
+    return (
+      <section style={{
+        padding: '64px clamp(20px,4vw,48px)',
+        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px,1fr))',
+        gap: 24, borderTop: '1px solid #1f293b',
+      }}>
       {STATS.map((s, i) => (
         <StatItem key={s.label} value={s.value} label={s.label} delay={i * 80} />
       ))}
@@ -584,13 +586,13 @@ function FeatureItem({ f, index }: { f: typeof FEATURES[0]; index: number }) {
       ref={ref}
       style={{
         display: 'flex', gap: 'clamp(16px,3vw,32px)',
-        padding: '24px 0', borderBottom: '1px solid #111',
+        padding: '24px 0', borderBottom: '1px solid #1f293b',
         opacity: vis ? 1 : 0,
         transform: vis ? 'translateX(0)' : 'translateX(-12px)',
         transition: `all 0.5s ease ${index * 50}ms`,
       }}
     >
-      <span style={{ fontFamily: MONO, fontSize: 12, fontWeight: 600, color: A, minWidth: 28, paddingTop: 3 }}>
+      <span style={{ fontFamily: MONO, fontSize: 14, fontWeight: 700, color: A, minWidth: 32, paddingTop: 1 }}>
         {f.num}
       </span>
       <div>
@@ -601,7 +603,7 @@ function FeatureItem({ f, index }: { f: typeof FEATURES[0]; index: number }) {
         }}>
           {f.title}
         </h3>
-        <p style={{ fontSize: 14, color: '#444', lineHeight: 1.65, margin: 0 }}>
+        <p style={{ fontSize: 14, color: '#cbd5e1', lineHeight: 1.65, margin: 0 }}>
           {f.desc}
         </p>
       </div>
@@ -613,10 +615,10 @@ function FeaturesSection() {
   return (
     <section style={{
       padding: '64px clamp(20px,4vw,48px) 80px',
-      borderTop: '1px solid #111',
+      borderTop: '1px solid #1f293b',
       maxWidth: 720, margin: '0 auto',
     }}>
-      <div style={{ fontFamily: MONO, fontSize: 10, color: '#333', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 40 }}>
+      <div style={{ fontFamily: MONO, fontSize: 10, color: A, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 40 }}>
         FEATURES
       </div>
       {FEATURES.map((f, i) => (
@@ -642,22 +644,29 @@ function SetupSection() {
         transition: 'all 0.7s ease',
       }}
     >
-      <div style={{ fontFamily: MONO, fontSize: 10, color: '#333', letterSpacing: '0.12em', marginBottom: 24 }}>
+      <div style={{ fontFamily: MONO, fontSize: 10, color: A, letterSpacing: '0.12em', marginBottom: 24 }}>
         SETUP
       </div>
 
       <div style={{
-        background: SURF, border: `1px solid ${BORDER}`,
-        borderRadius: 8, padding: '20px 28px', maxWidth: 480, width: '100%',
+        background: '#0a0a0c', border: `1px solid #1f293b`,
+        borderRadius: 8, padding: '24px 28px', maxWidth: 480, width: '100%',
         textAlign: 'left', marginBottom: 32,
         fontFamily: MONO, fontSize: 13, lineHeight: 1.8,
+        boxShadow: '0 8px 30px rgba(0,0,0,0.4)',
       }}>
-        <div style={{ color: '#333' }}># start tracking in 30 seconds</div>
+        {/* Terminal Header Mock */}
+        <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ef4444' }} />
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#f59e0b' }} />
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#10b981' }} />
+        </div>
+        <div style={{ color: '#10b981', fontWeight: 500 }}># start tracking in 30 seconds</div>
         <div style={{ color: TEXT }}>
           <span style={{ color: A }}>→</span> sign in at{' '}
           <span style={{ color: A }}>devtrack.vercel.app</span>
         </div>
-        <div style={{ color: '#333', marginTop: 4 }}># or self-host</div>
+        <div style={{ color: '#10b981', marginTop: 8, fontWeight: 500 }}># or self-host</div>
         <div style={{ color: TEXT }}>
           <span style={{ color: A }}>$</span> git clone github.com/…/devtrack
         </div>
@@ -680,7 +689,7 @@ function SetupSection() {
         </a>
       </div>
 
-      <div style={{ fontFamily: MONO, fontSize: 11, color: '#222', marginTop: 20, letterSpacing: '0.06em' }}>
+      <div style={{ fontFamily: MONO, fontSize: 11, color: '#64748b', marginTop: 20, letterSpacing: '0.06em' }}>
         MIT License · Self-hostable · Free forever · Zero vendor lock-in
       </div>
     </section>
@@ -712,7 +721,7 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
       }}
     >
       {/* Label */}
-      <div style={{ fontFamily: MONO, fontSize: 10, color: '#333', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 40 }}>
+      <div style={{ fontFamily: MONO, fontSize: 10, color: A, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 40 }}>
         OPEN SOURCE
       </div>
 
@@ -722,11 +731,11 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
           <div
             key={s.label}
             style={{
-              background: SURF, border: `1px solid ${BORDER}`,
+              background: '#0a0a0c', border: `1px solid #1f293b`,
               borderRadius: 8, padding: '20px 20px 16px',
             }}
           >
-            <div style={{ fontFamily: MONO, fontSize: 10, color: '#444', letterSpacing: '0.1em', marginBottom: 10 }}>
+            <div style={{ fontFamily: MONO, fontSize: 10, color: '#94a3b8', letterSpacing: '0.1em', marginBottom: 10 }}>
               {s.icon} {s.label}
             </div>
             <div style={{
@@ -735,7 +744,7 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
               lineHeight: 1, letterSpacing: '-0.03em',
             }}>
               <Counter end={s.value} active={vis} />
-              {s.suffix && <span style={{ color: '#444', fontSize: '0.55em' }}>{s.suffix}</span>}
+              {s.suffix && <span style={{ color: A, fontSize: '0.75em' }}>{s.suffix}</span>}
             </div>
           </div>
         ))}
@@ -775,7 +784,7 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
               title={`@${c.login}`}
               style={{
                 width: 38, height: 38, borderRadius: '50%',
-                border: `2px solid ${BG}`,
+                border: `2px solid #000000`,
                 marginLeft: i > 0 ? -11 : 0,
                 overflow: 'hidden', display: 'block',
                 position: 'relative', zIndex: stats.contributors.length - i,
@@ -807,10 +816,10 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
           {stats.contributorCount > stats.contributors.length && (
             <div style={{
               width: 38, height: 38, borderRadius: '50%',
-              border: `2px solid ${BG}`,
-              background: '#181818', marginLeft: -11,
+              border: `2px solid #000000`,
+              background: '#1e293b', marginLeft: -11,
               display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontFamily: MONO, fontSize: 9, color: '#555', flexShrink: 0,
+              fontFamily: MONO, fontSize: 10, color: '#cbd5e1', flexShrink: 0,
             }}>
               +{stats.contributorCount - stats.contributors.length}
             </div>
@@ -848,36 +857,6 @@ function ContributeSection({ stats }: { stats: RepoStats }) {
     </section>
   );
 }
-
-/* ═══════════════════════════════════════════
-   LANDING FOOTER  (above global Footer)
-   ═══════════════════════════════════════════ */
-function LandingFooter() {
-  return (
-    <footer style={{
-      borderTop: `1px solid #111`,
-      padding: '24px clamp(20px,4vw,48px)',
-      display: 'flex', flexWrap: 'wrap', gap: '8px 32px',
-      justifyContent: 'space-between', alignItems: 'center',
-    }}>
-      <span style={{ fontFamily: MONO, fontSize: 11, color: '#222' }}>
-        © {new Date().getFullYear()} DEVTRACK
-      </span>
-      <div style={{ display: 'flex', gap: 20 }}>
-        {[
-          { label: 'GitHub', href: 'https://github.com/Priyanshu-byte-coder/devtrack' },
-          { label: 'Docs', href: 'https://github.com/Priyanshu-byte-coder/devtrack/blob/main/DEVELOPMENT.md' },
-          { label: 'Issues', href: 'https://github.com/Priyanshu-byte-coder/devtrack/issues' },
-        ].map(l => (
-          <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer" className="lnd-footer-link">
-            {l.label}
-          </a>
-        ))}
-      </div>
-    </footer>
-  );
-}
-
 /* ═══════════════════════════════════════════
    MAIN EXPORT
    ═══════════════════════════════════════════ */
@@ -885,8 +864,9 @@ export default function LandingPage({ repoStats }: { repoStats: RepoStats }) {
   return (
     <div
       className="lnd-root"
-      style={{ background: BG, color: TEXT, minHeight: '100vh', position: 'relative', overflowX: 'hidden' }}
+      style={{ background: BG, color: TEXT, minHeight: '100vh', position: 'relative', zIndex: 1, overflowX: 'hidden' }}
     >
+      <CustomCursor />
       <MouseSpotlight />
       <LandingNav />
       <HeroSection />
@@ -896,7 +876,6 @@ export default function LandingPage({ repoStats }: { repoStats: RepoStats }) {
       <FeaturesSection />
       <ContributeSection stats={repoStats} />
       <SetupSection />
-      <LandingFooter />
     </div>
   );
 }