diff --git a/.gitignore b/.gitignore
index fafc136..72abfb7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,3 +53,6 @@ next-env.d.ts
 
 # backend cov
 /backend/coverage
+
+# playwright MCP (root)
+/.playwright-mcp
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 364e5a8..6795371 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,8 @@
         "@mui/icons-material": "^6.1.2",
         "@mui/material": "^6.4.9",
         "@react-oauth/google": "^0.12.1",
+        "@react-three/drei": "^9.122.0",
+        "@react-three/fiber": "^8.18.0",
         "@simplewebauthn/browser": "^13.3.0",
         "@supabase/supabase-js": "^2.106.2",
         "@testing-library/jest-dom": "^5.17.0",
@@ -47,6 +49,7 @@
         "remark-gfm": "^4.0.1",
         "remark-math": "^6.0.0",
         "stream-browserify": "^3.0.0",
+        "three": "^0.169.0",
         "util": "^0.12.5",
         "uuid": "^10.0.0",
         "web-vitals": "^2.1.4"
@@ -2430,6 +2433,12 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -5233,6 +5242,24 @@
       "version": "2.0.5",
       "license": "MIT"
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.9.tgz",
@@ -5797,6 +5824,195 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/three": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.5.tgz",
+      "integrity": "sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": ">=6.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "three": ">=0.126"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-three/drei": {
+      "version": "9.122.0",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.122.0.tgz",
+      "integrity": "sha512-SEO/F/rBCTjlLez7WAlpys+iGe9hty4rNgjZvgkQeXFSiwqD4Hbk/wNHMAbdd8vprO2Aj81mihv4dF5bC7D0CA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@react-spring/three": "~9.7.5",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^2.9.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "react-composer": "^5.0.3",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.7.8",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.0",
+        "tunnel-rat": "^0.1.2",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^8",
+        "react": "^18",
+        "react-dom": "^18",
+        "three": ">=0.137"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
+      "integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.26.7",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^1.0.6",
+        "react-reconciler": "^0.27.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.21.0",
+        "suspend-react": "^0.1.3",
+        "zustand": "^3.7.1"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=18 <19",
+        "react-dom": ">=18 <19",
+        "react-native": ">=0.64",
+        "three": ">=0.133"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
@@ -6204,7 +6420,9 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -6212,87 +6430,25 @@
         "@babel/runtime": "^7.12.5",
         "@types/aria-query": "^5.0.1",
         "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
         "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
         "pretty-format": "^27.0.2"
       },
       "engines": {
         "node": ">=18"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/@testing-library/dom/node_modules/aria-query": {
       "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "license": "Apache-2.0",
       "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "license": "MIT",
@@ -6513,6 +6669,12 @@
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "license": "MIT"
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -6600,6 +6762,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
       "license": "MIT",
@@ -6967,25 +7135,27 @@
       }
     },
     "node_modules/@types/node-fetch": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
-      "integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
+      "version": "2.6.13",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.13.tgz",
+      "integrity": "sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "@types/node": "*",
-        "form-data": "^4.0.0"
+        "form-data": "^4.0.4"
       }
     },
     "node_modules/@types/node-fetch/node_modules/form-data": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
-      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -6999,6 +7169,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "license": "MIT"
@@ -7041,6 +7217,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz",
+      "integrity": "sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -7099,6 +7284,12 @@
       "version": "2.0.3",
       "license": "MIT"
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "license": "MIT",
@@ -7106,6 +7297,20 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/three": {
+      "version": "0.184.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.1.tgz",
+      "integrity": "sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -7123,6 +7328,12 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "license": "MIT",
@@ -7638,6 +7849,24 @@
         "win32"
       ]
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/@vercel/analytics": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.3.1.tgz",
@@ -8934,6 +9163,15 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "license": "MIT",
@@ -9318,6 +9556,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
+      "integrity": "sha512-KnaKdcvkBJ1Irbrzl8XD6WtZltkRjp869Jx8c0ujs9K+9WD+1D7ryBsCiVqJYUqt6i/HR5FxT7RLASieUD+Q5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "license": "MIT",
@@ -9850,6 +10097,24 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "license": "MIT"
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "license": "MIT",
@@ -10462,6 +10727,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -10710,6 +10984,12 @@
       "version": "5.1.0",
       "license": "BSD-2-Clause"
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dropbox": {
       "version": "10.34.0",
       "resolved": "https://registry.npmjs.org/dropbox/-/dropbox-10.34.0.tgz",
@@ -12092,6 +12372,12 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "license": "MIT",
@@ -12760,6 +13046,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -13078,6 +13370,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.16",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.16.tgz",
+      "integrity": "sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -13856,6 +14154,12 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "license": "MIT"
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "license": "MIT",
@@ -14138,6 +14442,27 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/its-fine": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+      "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "license": "BlueOak-1.0.0",
@@ -19103,6 +19428,16 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "license": "MIT",
@@ -19546,6 +19881,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "license": "MIT"
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "license": "MIT",
@@ -22146,6 +22496,12 @@
       "version": "4.2.0",
       "license": "MIT"
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "license": "MIT",
@@ -22204,6 +22560,16 @@
         "asap": "~2.0.6"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "license": "MIT",
@@ -22453,6 +22819,18 @@
       "version": "0.13.11",
       "license": "MIT"
     },
+    "node_modules/react-composer": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-composer/-/react-composer-5.0.3.tgz",
+      "integrity": "sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "license": "MIT",
@@ -22724,6 +23102,31 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
+      "integrity": "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.21.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "license": "MIT",
@@ -24320,6 +24723,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "license": "MIT",
@@ -24988,9 +25406,10 @@
       "license": "MIT"
     },
     "node_modules/sdp": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
-      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.2.tgz",
+      "integrity": "sha512-xZocWwfyp4hkbN4hLWxMjmv2Q8aNa9MhmOZ7L9aCZPT+dZsgRr6wZRrSYE3HTdyk/2pZKPSgqI7ns7Een1xMSA==",
+      "license": "MIT",
       "peer": true
     },
     "node_modules/select-hose": {
@@ -25488,6 +25907,32 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "license": "MIT",
@@ -25907,6 +26352,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/svg-parser": {
       "version": "2.0.4",
       "license": "MIT"
@@ -26197,6 +26651,45 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.169.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.169.0.tgz",
+      "integrity": "sha512-Ed906MA3dR4TS5riErd4QBsRGPcx+HBDX2O5yYE5GqJeFQTPU+M56Va/f/Oph9X7uZo3W3o4l2ZhBZ6f6qUv0w==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.8.tgz",
+      "integrity": "sha512-BGEZTOIC14U0XIRw3tO4jY7IjP7n7v24nv9JXS1CyeVRWOCkcOMhRnmENUjuV39gktAw4Ofhr0OvIAiTspQrrw==",
+      "deprecated": "Deprecated due to three.js version incompatibility. Please use v0.8.0, instead.",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.151.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/throat": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
@@ -26284,6 +26777,36 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/trough": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
@@ -26413,6 +26936,43 @@
       "version": "1.14.1",
       "license": "0BSD"
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "license": "MIT",
@@ -26527,6 +27087,8 @@
     },
     "node_modules/typescript": {
       "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -26842,6 +27404,15 @@
       "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz",
       "integrity": "sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ=="
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@@ -26876,6 +27447,15 @@
       "version": "0.4.0",
       "license": "MIT"
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "license": "MIT",
@@ -27033,6 +27613,17 @@
       "version": "2.1.4",
       "license": "Apache-2.0"
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -27253,9 +27844,10 @@
       }
     },
     "node_modules/webrtc-adapter": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz",
-      "integrity": "sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.5.tgz",
+      "integrity": "sha512-U9vjByy/sK2OMXu5mmfuZFKTMIUQe34c0JXRO+oDrxJTsntdYT2iIFwYMOV7HhMTuktcZLGf2W1N/OcSf9ssWg==",
+      "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
         "sdp": "^3.2.0"
@@ -27910,6 +28502,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zustand": {
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.14.tgz",
+      "integrity": "sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 55f5195..d72184c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,8 @@
     "@mui/icons-material": "^6.1.2",
     "@mui/material": "^6.4.9",
     "@react-oauth/google": "^0.12.1",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
     "@simplewebauthn/browser": "^13.3.0",
     "@supabase/supabase-js": "^2.106.2",
     "@testing-library/jest-dom": "^5.17.0",
@@ -51,6 +53,7 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "stream-browserify": "^3.0.0",
+    "three": "^0.169.0",
     "util": "^0.12.5",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4"
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 8870146..344f9cb 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   BrowserRouter as Router,
   Routes,
@@ -35,17 +35,29 @@ const getStoredTheme = () => {
   return localStorage.getItem("theme") === "dark" ? "dark" : "light";
 };
 
-// Reset scroll to the top on every route change so a new page never starts
-// scrolled down to wherever the previous page was (the browser otherwise keeps
-// the prior scroll offset on client-side navigation).
-function ScrollToTop() {
-  const { pathname } = useLocation();
-
+// Tracks the user's reduced-motion preference so page transitions can be
+// skipped entirely (and the route swap happens instantly) for those users.
+function usePrefersReducedMotion() {
+  const [reduce, setReduce] = useState(false);
   useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
-
-  return null;
+    if (typeof window === "undefined" || !window.matchMedia) return undefined;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduce(media.matches);
+    update();
+    if (media.addEventListener) {
+      media.addEventListener("change", update);
+    } else {
+      media.addListener(update);
+    }
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", update);
+      } else {
+        media.removeListener(update);
+      }
+    };
+  }, []);
+  return reduce;
 }
 
 // Custom hook to track page views
@@ -89,7 +101,6 @@ function App() {
   return (
     <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
       <Router>
-        <ScrollToTop />
         <Analytics />
         <GoogleAnalytics />
         <TrackPageView />
@@ -102,14 +113,58 @@ function App() {
 
 function AppLayout({ theme, onThemeToggle }) {
   const location = useLocation();
+  const reduceMotion = usePrefersReducedMotion();
+  // `displayLocation` is the route currently painted; it lags `location` by one
+  // exit animation so the outgoing page can animate away before the swap.
+  const [displayLocation, setDisplayLocation] = useState(location);
+  const [stage, setStage] = useState("enter"); // "enter" | "exit"
+  const swapTimer = useRef(null);
+
+  // Show the new page: update what's painted, reset scroll, play the enter anim.
+  const showNext = (nextLocation) => {
+    clearTimeout(swapTimer.current);
+    setDisplayLocation(nextLocation);
+    window.scrollTo(0, 0);
+    setStage("enter");
+  };
+
+  useEffect(() => {
+    if (location.pathname === displayLocation.pathname) return undefined;
+    // Reduced motion: swap immediately, no slide.
+    if (reduceMotion) {
+      setDisplayLocation(location);
+      window.scrollTo(0, 0);
+      return undefined;
+    }
+    // Otherwise animate the current page out; the swap happens on animation end
+    // (with a timeout fallback in case the event is missed).
+    setStage("exit");
+    clearTimeout(swapTimer.current);
+    swapTimer.current = setTimeout(() => showNext(location), 650);
+    return () => clearTimeout(swapTimer.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location, displayLocation, reduceMotion]);
+
+  const handleAnimationEnd = (e) => {
+    // Ignore animations bubbling up from page content; only react to the
+    // wrapper's own enter/exit animation.
+    if (e.target !== e.currentTarget) return;
+    if (stage === "exit") showNext(location);
+  };
+
   const hideNavbar =
-    location.pathname === "/" || location.pathname.startsWith("/landing");
+    displayLocation.pathname === "/" ||
+    displayLocation.pathname.startsWith("/landing");
+  const animClass = reduceMotion
+    ? ""
+    : `page-transition ${stage === "exit" ? "is-exit" : "is-enter"}`;
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
       {!hideNavbar && <Navbar theme={theme} onThemeToggle={onThemeToggle} />}
       <Box sx={{ flexGrow: 1 }}>
-        <Routes>
+        <div className={animClass} onAnimationEnd={handleAnimationEnd}>
+          <Routes location={displayLocation}>
           <Route path="/home" element={<Home theme={theme} />} />
           <Route path="/" element={<LandingPage />} />
           <Route path="/landing" element={<LandingPage />} />
@@ -157,7 +212,8 @@ function AppLayout({ theme, onThemeToggle }) {
             }
           />
           <Route path="*" element={<NotFoundPage theme={theme} />} />
-        </Routes>
+          </Routes>
+        </div>
       </Box>
       <Footer />
     </Box>
diff --git a/frontend/src/components/three/HeroExperience.js b/frontend/src/components/three/HeroExperience.js
new file mode 100644
index 0000000..6ecfce0
--- /dev/null
+++ b/frontend/src/components/three/HeroExperience.js
@@ -0,0 +1,412 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import {
+  Float,
+  RoundedBox,
+  MeshDistortMaterial,
+  Environment,
+  Lightformer,
+  Sparkles,
+} from "@react-three/drei";
+import * as THREE from "three";
+
+/**
+ * HeroExperience — a fully procedural react-three-fiber scene.
+ *
+ * No binary assets are used: every shape is generated from primitive geometry,
+ * every material is shader/standard based, lighting comes from `<Lightformer>`
+ * panels rendered into an in-memory cube (no .hdr files), and the particle
+ * field is `<Sparkles>` (procedurally drawn points). The concept maps to the
+ * product: frosted-glass "document" panels orbit a glowing AI core while data
+ * sparkles drift through the warm light.
+ *
+ * Props:
+ *   reduceMotion — freeze all animation (prefers-reduced-motion).
+ *   variant      — "hero" (full) | "cta" (lighter, used in the bottom band).
+ *   paused       — when true the render loop runs on-demand only (offscreen).
+ */
+
+const PALETTE = {
+  core: "#ff8a1e",
+  coreEmissive: "#ff4d00",
+  glow: "#ff6a00",
+  panel: "#fff3e4",
+  attenuation: "#ffae5e",
+  metalDark: "#1a120b",
+};
+
+// ---- Capability detection (so low/no-GPU devices still get a clean page) ----
+
+function detectWebGL() {
+  if (typeof window === "undefined") return false;
+  try {
+    const canvas = document.createElement("canvas");
+    return !!(
+      window.WebGLRenderingContext &&
+      (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+    );
+  } catch (e) {
+    return false;
+  }
+}
+
+// Heuristic for weak hardware (few cores / little memory) → render a lighter
+// scene: lower resolution, no shadows/antialias, cheaper materials.
+function detectLowPower() {
+  if (typeof navigator === "undefined") return false;
+  const mem = navigator.deviceMemory;
+  const cores = navigator.hardwareConcurrency;
+  return (
+    (typeof mem === "number" && mem <= 4) ||
+    (typeof cores === "number" && cores <= 4)
+  );
+}
+
+// Pure-CSS fallback shown when WebGL is unavailable or the canvas errors. It
+// mirrors the dark hero with a warm glow where the 3D core would sit, so the
+// layout and copy on top stay perfectly legible.
+function Fallback() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        position: "absolute",
+        inset: 0,
+        background:
+          "radial-gradient(circle at 60% 44%, rgba(255,138,26,0.55), rgba(255,77,0,0.18) 28%, rgba(12,8,5,0) 58%)," +
+          "radial-gradient(circle at 28% 72%, rgba(111,155,255,0.16), transparent 45%)," +
+          "#0c0805",
+      }}
+    />
+  );
+}
+
+// Catches any runtime error from the WebGL canvas (e.g. context creation
+// failure) and swaps in the CSS fallback instead of blanking the page.
+class CanvasErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch() {
+    /* swallow — fallback is rendered instead */
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+
+// The glowing, gently morphing AI core at the centre of the composition.
+function Core({ reduceMotion, radius = 1.05 }) {
+  const ref = useRef();
+  useFrame((_, delta) => {
+    if (reduceMotion || !ref.current) return;
+    ref.current.rotation.y += delta * 0.12;
+    ref.current.rotation.x += delta * 0.04;
+  });
+  return (
+    <Float
+      speed={reduceMotion ? 0 : 1.1}
+      rotationIntensity={reduceMotion ? 0 : 0.5}
+      floatIntensity={reduceMotion ? 0 : 1.1}
+    >
+      <mesh ref={ref} castShadow>
+        <icosahedronGeometry args={[radius, 18]} />
+        <MeshDistortMaterial
+          color={PALETTE.core}
+          emissive={PALETTE.coreEmissive}
+          emissiveIntensity={0.35}
+          roughness={0.12}
+          metalness={0.65}
+          distort={0.38}
+          speed={reduceMotion ? 0 : 1.4}
+        />
+      </mesh>
+      {/* Soft additive halo — cheap bloom stand-in (no postprocessing pass). */}
+      <mesh scale={1.5}>
+        <sphereGeometry args={[radius, 32, 32]} />
+        <meshBasicMaterial
+          color={PALETTE.glow}
+          transparent
+          opacity={0.11}
+          blending={THREE.AdditiveBlending}
+          depthWrite={false}
+        />
+      </mesh>
+    </Float>
+  );
+}
+
+// A frosted-glass document panel. On capable GPUs MeshPhysicalMaterial
+// transmission gives a single-pass glass look; on weak hardware we fall back to
+// a cheap translucent standard material that reads the same but costs nothing.
+function Panel({ position, rotation, scale, reduceMotion, floatSeed, lowPower }) {
+  return (
+    <Float
+      speed={reduceMotion ? 0 : 0.9 + floatSeed * 0.4}
+      rotationIntensity={reduceMotion ? 0 : 0.4}
+      floatIntensity={reduceMotion ? 0 : 0.8 + floatSeed * 0.5}
+    >
+      <RoundedBox
+        args={[1.35, 1.85, 0.07]}
+        radius={0.09}
+        smoothness={lowPower ? 2 : 4}
+        position={position}
+        rotation={rotation}
+        scale={scale}
+        castShadow={!lowPower}
+      >
+        {lowPower ? (
+          <meshStandardMaterial
+            color={PALETTE.panel}
+            roughness={0.25}
+            metalness={0.1}
+            transparent
+            opacity={0.6}
+          />
+        ) : (
+          <meshPhysicalMaterial
+            color={PALETTE.panel}
+            transmission={0.94}
+            thickness={0.6}
+            roughness={0.12}
+            ior={1.4}
+            metalness={0}
+            clearcoat={1}
+            clearcoatRoughness={0.15}
+            attenuationColor={PALETTE.attenuation}
+            attenuationDistance={1.6}
+            transparent
+            opacity={0.92}
+          />
+        )}
+      </RoundedBox>
+    </Float>
+  );
+}
+
+// Small metallic accent solids that catch the warm rim light.
+function Accent({ geometry, position, color, reduceMotion, floatSeed }) {
+  return (
+    <Float
+      speed={reduceMotion ? 0 : 1.2 + floatSeed}
+      rotationIntensity={reduceMotion ? 0 : 1.4}
+      floatIntensity={reduceMotion ? 0 : 1.6}
+    >
+      <mesh position={position} castShadow>
+        {geometry}
+        <meshStandardMaterial color={color} metalness={0.9} roughness={0.25} />
+      </mesh>
+    </Float>
+  );
+}
+
+// Subtle parallax: the whole group leans toward the pointer. Driven by a window
+// listener so it keeps working even with DOM content layered on top.
+function Rig({ children, reduceMotion, strength = 0.32 }) {
+  const ref = useRef();
+  const mouse = useRef({ x: 0, y: 0 });
+  useEffect(() => {
+    if (reduceMotion) return undefined;
+    const onMove = (e) => {
+      mouse.current.x = (e.clientX / window.innerWidth) * 2 - 1;
+      mouse.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    return () => window.removeEventListener("pointermove", onMove);
+  }, [reduceMotion]);
+  useFrame(() => {
+    if (reduceMotion || !ref.current) return;
+    ref.current.rotation.y = THREE.MathUtils.lerp(
+      ref.current.rotation.y,
+      mouse.current.x * strength,
+      0.04,
+    );
+    ref.current.rotation.x = THREE.MathUtils.lerp(
+      ref.current.rotation.x,
+      mouse.current.y * strength * 0.55,
+      0.04,
+    );
+  });
+  return <group ref={ref}>{children}</group>;
+}
+
+function Scene({ reduceMotion, variant, lowPower }) {
+  const isCta = variant === "cta";
+
+  const panels = useMemo(() => {
+    const all = [
+      {
+        position: [-2.55, 0.45, -0.6],
+        rotation: [0.18, 0.55, 0.12],
+        scale: 1.05,
+        floatSeed: 0.2,
+      },
+      {
+        position: [2.65, -0.35, -0.4],
+        rotation: [-0.2, -0.6, -0.15],
+        scale: 0.95,
+        floatSeed: 0.6,
+      },
+      {
+        position: [0.2, 1.9, -1.4],
+        rotation: [0.4, 0.1, 0.3],
+        scale: 0.78,
+        floatSeed: 0.9,
+      },
+    ];
+    const count = isCta || lowPower ? 2 : 3;
+    return all.slice(0, count);
+  }, [isCta, lowPower]);
+
+  const sparkleCount = lowPower ? (isCta ? 18 : 30) : isCta ? 40 : 70;
+
+  return (
+    <>
+      <color attach="background" args={["#0c0805"]} />
+      <fog attach="fog" args={["#0c0805", 7, 16]} />
+
+      <ambientLight intensity={0.35} />
+      <directionalLight
+        position={[5, 6, 4]}
+        intensity={2.2}
+        color="#ffd9a8"
+        castShadow={!isCta && !lowPower}
+      />
+      <pointLight
+        position={[0, 0, 2]}
+        intensity={6}
+        color={PALETTE.glow}
+        distance={9}
+      />
+      <pointLight
+        position={[-4, -3, 2]}
+        intensity={2}
+        color="#7aa7ff"
+        distance={12}
+      />
+
+      <Rig reduceMotion={reduceMotion} strength={isCta ? 0.18 : 0.32}>
+        <Core reduceMotion={reduceMotion} radius={isCta ? 0.85 : 1.05} />
+
+        {panels.map((p, i) => (
+          <Panel key={i} reduceMotion={reduceMotion} lowPower={lowPower} {...p} />
+        ))}
+
+        <Accent
+          geometry={<octahedronGeometry args={[0.42, 0]} />}
+          position={[-1.7, -1.6, 0.6]}
+          color={PALETTE.core}
+          reduceMotion={reduceMotion}
+          floatSeed={0.3}
+        />
+        {!isCta && !lowPower && (
+          <>
+            <Accent
+              geometry={<torusKnotGeometry args={[0.32, 0.12, 120, 16]} />}
+              position={[2.1, 1.7, 0.4]}
+              color="#3a2a1c"
+              reduceMotion={reduceMotion}
+              floatSeed={0.7}
+            />
+            <Accent
+              geometry={<dodecahedronGeometry args={[0.36, 0]} />}
+              position={[1.5, -1.9, 1]}
+              color={PALETTE.core}
+              reduceMotion={reduceMotion}
+              floatSeed={0.5}
+            />
+          </>
+        )}
+
+        <Sparkles
+          count={sparkleCount}
+          scale={[10, 7, 6]}
+          size={2.4}
+          speed={reduceMotion ? 0 : 0.35}
+          opacity={0.7}
+          color="#ffcf99"
+        />
+      </Rig>
+
+      {/* Procedural lighting environment — Lightformer panels rendered to an
+          in-memory cube. No .hdr / image files involved. */}
+      <Environment
+        resolution={lowPower ? 128 : 256}
+        frames={reduceMotion || lowPower ? 1 : Infinity}
+      >
+        <color attach="background" args={["#0c0805"]} />
+        <Lightformer
+          form="rect"
+          intensity={3}
+          color="#ff8a3a"
+          position={[3, 2, 4]}
+          scale={[6, 6, 1]}
+        />
+        <Lightformer
+          form="rect"
+          intensity={2}
+          color="#ffe1b8"
+          position={[-4, -1, 3]}
+          scale={[5, 5, 1]}
+        />
+        <Lightformer
+          form="ring"
+          intensity={2.5}
+          color="#6f9bff"
+          position={[-2, 3, -4]}
+          scale={[4, 4, 1]}
+        />
+      </Environment>
+    </>
+  );
+}
+
+export default function HeroExperience({
+  reduceMotion = false,
+  variant = "hero",
+  paused = false,
+}) {
+  const [supported] = useState(detectWebGL);
+  const lowPower = useMemo(detectLowPower, []);
+  const isCta = variant === "cta";
+
+  // No WebGL at all → clean CSS fallback, no canvas mounted.
+  if (!supported) return <Fallback />;
+
+  const maxDpr = lowPower ? 1 : isCta ? 1.4 : 1.6;
+
+  return (
+    <CanvasErrorBoundary fallback={<Fallback />}>
+      <Canvas
+        dpr={[1, maxDpr]}
+        shadows={!isCta && !lowPower}
+        gl={{
+          antialias: !lowPower,
+          alpha: false,
+          powerPreference: lowPower ? "default" : "high-performance",
+          // Allow software (e.g. SwiftShader) rendering on machines without a
+          // capable GPU instead of refusing to create a context.
+          failIfMajorPerformanceCaveat: false,
+        }}
+        camera={{ position: [0, 0, isCta ? 7.5 : 6.5], fov: 38 }}
+        frameloop={reduceMotion || paused ? "demand" : "always"}
+        style={{ position: "absolute", inset: 0, display: "block" }}
+        onCreated={({ gl }) => {
+          // Keep the page alive across a GPU context loss; let the browser
+          // attempt to restore rather than tearing down to a blank canvas.
+          gl.domElement.addEventListener(
+            "webglcontextlost",
+            (e) => e.preventDefault(),
+            false,
+          );
+        }}
+      >
+        <Scene reduceMotion={reduceMotion} variant={variant} lowPower={lowPower} />
+      </Canvas>
+    </CanvasErrorBoundary>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index c417f94..60dead3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap");
 
 body {
   margin: 0;
@@ -55,3 +56,38 @@ code {
   color: #fff !important;
   background-color: rgba(245, 124, 0, 0.55) !important;
 }
+
+/* ---- App-wide page transitions ----
+ * Incoming pages rise up into view and fade in; outgoing pages descend and
+ * fade out. Orchestrated from App.js (AppLayout) so enter/exit stay in sync
+ * with route changes. Honored only when motion is allowed (the JS bypasses
+ * these classes entirely under prefers-reduced-motion). */
+.page-transition {
+  will-change: transform, opacity;
+}
+.page-transition.is-enter {
+  animation: pageEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.page-transition.is-exit {
+  animation: pageExit 0.55s cubic-bezier(0.55, 0, 0.68, 0.19) both;
+}
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 28px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes pageExit {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(0, 28px, 0);
+  }
+}
diff --git a/frontend/src/pages/LandingPage.js b/frontend/src/pages/LandingPage.js
index 1a3877c..b2ab7bc 100644
--- a/frontend/src/pages/LandingPage.js
+++ b/frontend/src/pages/LandingPage.js
@@ -1,4 +1,11 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  Suspense,
+  lazy,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Box,
   Typography,
@@ -9,9 +16,10 @@ import {
   CardContent,
   Stack,
   Chip,
-  Divider,
   IconButton,
-  Avatar,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from "@mui/material";
 import { Link } from "react-router-dom";
 import { keyframes } from "@emotion/react";
@@ -19,6 +27,9 @@ import {
   ArrowBackIosNew,
   ArrowForwardIos,
   ArrowDownward,
+  ArrowForward,
+  ExpandMore,
+  AutoStories,
   AutoAwesome,
   Bolt,
   Chat,
@@ -37,69 +48,58 @@ import {
   Groups,
 } from "@mui/icons-material";
 
-const slideUp = keyframes`
-  from {
-    transform: translateY(24px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`;
+// The react-three-fiber scene is heavy (three.js core). Load it lazily so the
+// first paint of the hero copy never waits on the 3D bundle.
+const HeroExperience = lazy(() => import("../components/three/HeroExperience"));
 
-const shimmer = keyframes`
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+const slideUp = keyframes`
+  from { transform: translateY(24px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 `;
 
 const fadeSwap = keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  0% { opacity: 0; transform: translateY(12px); }
+  100% { opacity: 1; transform: translateY(0); }
 `;
 
 const ambientShift = keyframes`
-  0% {
-    background-position: 0% 50%;
-    opacity: 0.7;
-  }
-  50% {
-    background-position: 100% 50%;
-    opacity: 1;
-  }
-  100% {
-    background-position: 0% 50%;
-    opacity: 0.7;
-  }
+  0% { background-position: 0% 50%; opacity: 0.7; }
+  50% { background-position: 100% 50%; opacity: 1; }
+  100% { background-position: 0% 50%; opacity: 0.7; }
 `;
 
 const bounceHint = keyframes`
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(6px);
-  }
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(6px); }
+`;
+
+const textShimmer = keyframes`
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+`;
+
+const heroFloat = keyframes`
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+`;
+
+const marquee = keyframes`
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+`;
+
+const marqueeReverse = keyframes`
+  from { transform: translateX(-50%); }
+  to { transform: translateX(0); }
 `;
 
 const LandingPage = () => {
   const [reduceMotion, setReduceMotion] = useState(false);
   const [spotlightIndex, setSpotlightIndex] = useState(0);
   const [testimonialIndex, setTestimonialIndex] = useState(0);
+  const [ctaInView, setCtaInView] = useState(false);
   const clarityRef = useRef(null);
+  const ctaRef = useRef(null);
 
   useEffect(() => {
     if (typeof window === "undefined") return undefined;
@@ -132,65 +132,131 @@ const LandingPage = () => {
       accent: "#f57c00",
       accentDark: "#cc6600",
       accentSoft: "#ffe6cc",
-      border: "#f0e2d3",
-      shadow: "0 20px 40px rgba(20, 12, 4, 0.08)",
-      shadowSoft: "0 12px 24px rgba(20, 12, 4, 0.08)",
+      border: "#efe2d2",
+      shadow: "0 30px 60px rgba(20, 12, 4, 0.10)",
+      shadowSoft: "0 18px 40px rgba(20, 12, 4, 0.08)",
+      // Dark / hero tokens
+      heroBg: "#0c0805",
+      heroText: "#fbf2e6",
+      heroMuted: "rgba(251, 242, 230, 0.66)",
+      heroGlass: "rgba(255, 244, 230, 0.06)",
+      heroGlassBorder: "rgba(255, 196, 138, 0.22)",
     }),
     [],
   );
 
+  // Distinctive display serif for headlines (loaded in index.css). It nods to
+  // the product's subject — documents and typography — and reads as premium
+  // against the Poppins body copy.
+  const displayFont = '"Fraunces", "Poppins", serif';
+
   const sectionTitleSx = {
-    font: "inherit",
-    fontWeight: 700,
+    fontFamily: displayFont,
+    fontWeight: 600,
     color: palette.textPrimary,
-    fontSize: { xs: "1.85rem", md: "2.4rem" },
+    fontSize: { xs: "2.1rem", md: "2.9rem" },
+    letterSpacing: "-0.015em",
+    lineHeight: 1.08,
   };
 
   const sectionSubtitleSx = {
     font: "inherit",
     color: palette.textSecondary,
-    fontSize: { xs: "1rem", md: "1.1rem" },
+    fontSize: { xs: "1rem", md: "1.12rem" },
+    lineHeight: 1.6,
+  };
+
+  const sectionSpacing = { xs: 9, md: 16 };
+
+  const lightCardSx = {
+    height: "100%",
+    borderRadius: "20px",
+    border: `1px solid ${palette.border}`,
+    backgroundColor: palette.surface,
+    boxShadow: "none",
   };
 
-  const sectionSpacing = { xs: 6, md: 10 };
+  // Small editorial eyebrow label with rules.
+  const Eyebrow = ({ label, light, align = "center" }) => (
+    <Stack
+      direction="row"
+      spacing={1.25}
+      alignItems="center"
+      justifyContent={align === "center" ? "center" : "flex-start"}
+      sx={{ mb: 2 }}
+    >
+      <Box
+        sx={{
+          width: 26,
+          height: "2px",
+          backgroundColor: light ? "#ffb066" : palette.accent,
+          opacity: 0.8,
+        }}
+      />
+      <Typography
+        sx={{
+          font: "inherit",
+          fontWeight: 600,
+          fontSize: "0.78rem",
+          letterSpacing: "0.2em",
+          textTransform: "uppercase",
+          color: light ? "#ffb066" : palette.accent,
+        }}
+      >
+        {label}
+      </Typography>
+      {align === "center" && (
+        <Box
+          sx={{
+            width: 26,
+            height: "2px",
+            backgroundColor: light ? "#ffb066" : palette.accent,
+            opacity: 0.8,
+          }}
+        />
+      )}
+    </Stack>
+  );
+
+  // Rounded-square icon tile (replaces the round avatars for a more modern feel).
+  const IconTile = ({ children, light, large }) => (
+    <Box
+      sx={{
+        width: large ? 58 : 48,
+        height: large ? 58 : 48,
+        borderRadius: "16px",
+        display: "grid",
+        placeItems: "center",
+        flexShrink: 0,
+        color: light ? "#ffd9a8" : palette.accent,
+        background: light
+          ? "rgba(255,138,26,0.14)"
+          : "linear-gradient(135deg, #fff1de, #ffe1bd)",
+        border: `1px solid ${light ? "rgba(255,196,138,0.28)" : palette.accentSoft}`,
+        "& .MuiSvgIcon-root": { fontSize: large ? "1.7rem" : "1.4rem" },
+      }}
+    >
+      {children}
+    </Box>
+  );
 
-  const metrics = [
-    { label: "Files", value: "PDF, Word, text" },
-    { label: "Data", value: "CSV, JSON, code" },
-    { label: "Workspace", value: "Summary + chat" },
-    { label: "Analysis tools", value: "Sentiment + stats" },
+  const stats = [
+    { value: "10+", label: "File types supported" },
+    { value: "9", label: "AI tools in one place" },
+    { value: "1", label: "Connected workspace" },
+    { value: "0", label: "Setup required" },
   ];
 
   const heroHighlights = [
     "PDF + Word upload",
-    "Markdown + HTML",
-    "CSV / TSV tables",
-    "JSON + code files",
-    "Google Drive import",
-    "Plain text + logs",
+    "CSV / JSON tables",
     "AI summaries",
     "Bullet points",
     "Sentiment analysis",
-    "Document analytics",
     "Document chat",
     "Voice responses",
-    "Rewrite content",
-    "Translate summary",
-  ];
-
-  const heroWorkspaceItems = [
-    {
-      title: "Import",
-      icon: <CloudUpload />,
-    },
-    {
-      title: "Understand",
-      icon: <Insights />,
-    },
-    {
-      title: "Act",
-      icon: <Bolt />,
-    },
+    "Rewrite + translate",
+    "Google Drive import",
   ];
 
   const spotlights = [
@@ -229,18 +295,19 @@ const LandingPage = () => {
     {
       title: "Summaries that read cleanly",
       description:
-        "Standard summaries plus bullet-point views in a consistent format.",
+        "Standard summaries plus bullet-point views in a consistent, copy-ready format.",
       icon: <Insights />,
     },
     {
       title: "Analysis in one view",
       description:
-        "Sentiment analysis and document statistics alongside the summary.",
+        "Sentiment analysis and document statistics sit right alongside the summary.",
       icon: <Bolt />,
     },
     {
       title: "Refine and rewrite",
-      description: "Refine summaries or rewrite selected text to a new style.",
+      description:
+        "Refine summaries or rewrite selected text into a new tone or style in seconds.",
       icon: <VerifiedUser />,
     },
   ];
@@ -249,7 +316,7 @@ const LandingPage = () => {
     {
       title: "Upload more than PDFs",
       description:
-        "Upload PDF, Word, Markdown, HTML, CSV/TSV, JSON, text, logs, and code/config files.",
+        "PDF, Word, Markdown, HTML, CSV/TSV, JSON, plain text, logs, and code/config files — all welcome.",
       icon: <CloudUpload />,
     },
     {
@@ -264,8 +331,7 @@ const LandingPage = () => {
     },
     {
       title: "Refine or rewrite",
-      description:
-        "Refine the summary or rewrite selected text in a new style.",
+      description: "Refine the summary or rewrite selected text in a new style.",
       icon: <Tune />,
     },
     {
@@ -315,8 +381,7 @@ const LandingPage = () => {
     },
     {
       title: "Refine",
-      description:
-        "Refine the summary or rewrite selected text in a new style.",
+      description: "Refine the summary or rewrite selected text in a new style.",
       icon: <Bolt />,
     },
   ];
@@ -363,8 +428,7 @@ const LandingPage = () => {
     },
     {
       title: "Refine and rewrite",
-      description:
-        "Refine the summary or rewrite selected text to a new style.",
+      description: "Refine the summary or rewrite selected text to a new style.",
       icon: <Tune />,
     },
   ];
@@ -451,8 +515,11 @@ const LandingPage = () => {
   }, [reduceMotion, testimonials.length]);
 
   useEffect(() => {
-    if (reduceMotion) return undefined;
     const elements = Array.from(document.querySelectorAll(".reveal"));
+    if (reduceMotion) {
+      elements.forEach((el) => el.classList.add("is-visible"));
+      return undefined;
+    }
     if (elements.length === 0) return undefined;
     const observer = new IntersectionObserver(
       (entries, obs) => {
@@ -463,12 +530,27 @@ const LandingPage = () => {
           }
         });
       },
-      { threshold: 0.15, rootMargin: "0px 0px -10% 0px" },
+      { threshold: 0.12, rootMargin: "0px 0px -10% 0px" },
     );
     elements.forEach((el) => observer.observe(el));
     return () => observer.disconnect();
   }, [reduceMotion]);
 
+  // Pause the bottom 3D band's render loop while it is off-screen.
+  useEffect(() => {
+    const node = ctaRef.current;
+    if (!node) return undefined;
+    const observer = new IntersectionObserver(
+      ([entry]) => setCtaInView(entry.isIntersecting),
+      { threshold: 0.05 },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  const scrollToClarity = () =>
+    clarityRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+
   return (
     <Box
       sx={{
@@ -478,555 +560,543 @@ const LandingPage = () => {
         position: "relative",
         overflow: "hidden",
         fontFamily: '"Poppins", sans-serif',
-        "& *": {
-          minWidth: 0,
-          boxSizing: "border-box",
-        },
-        "& img, & svg": {
-          maxWidth: "100%",
-        },
+        "& *": { minWidth: 0, boxSizing: "border-box" },
+        "& img, & svg": { maxWidth: "100%" },
         "& .MuiCard-root": {
-          boxShadow: "0 6px 16px rgba(20, 12, 4, 0.06) !important",
           transition: reduceMotion
             ? "none"
-            : "transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease",
+            : "transform 0.45s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.45s ease, border-color 0.45s ease",
           willChange: "transform, box-shadow",
           "&:hover": {
-            transform: "translateY(-2px)",
-            boxShadow: "0 14px 30px rgba(20, 12, 4, 0.12)",
-            borderColor: palette.accentSoft,
+            transform: "translateY(-6px)",
+            boxShadow: palette.shadowSoft,
+            borderColor: "rgba(245, 124, 0, 0.4)",
           },
         },
         "& .MuiChip-root": {
           transition: reduceMotion
             ? "none"
-            : "transform 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease",
+            : "transform 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease, border-color 0.45s ease",
           willChange: "transform, box-shadow",
-          "&:hover": {
-            transform: "translateY(-1px)",
-            boxShadow: "0 10px 20px rgba(20, 12, 4, 0.1)",
-            backgroundColor: palette.surfaceAlt,
-          },
         },
         "& .reveal": {
           opacity: 0,
-          transform: "translateY(16px)",
+          transform: "translateY(20px)",
           transition: reduceMotion
             ? "none"
-            : "opacity 0.6s ease, transform 0.6s ease",
-        },
-        "& .reveal.is-visible": {
-          opacity: 1,
-          transform: "translateY(0)",
+            : "opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.8,0.2,1)",
         },
+        "& .reveal.is-visible": { opacity: 1, transform: "translateY(0)" },
       }}
     >
+      {/* Soft warm corner glows */}
       <Box
         sx={{
           position: "absolute",
           inset: 0,
-          background: `radial-gradient(circle at 15% 10%, ${palette.accentSoft} 0%, transparent 55%),
-            radial-gradient(circle at 85% 20%, rgba(245, 124, 0, 0.12) 0%, transparent 45%)`,
-          opacity: 0.9,
+          background: `radial-gradient(circle at 12% 8%, ${palette.accentSoft} 0%, transparent 50%),
+            radial-gradient(circle at 88% 18%, rgba(245, 124, 0, 0.10) 0%, transparent 42%)`,
+          opacity: 0.85,
           pointerEvents: "none",
         }}
       />
+      {/* Very subtle animated warm wash (toned down for a cleaner light look) */}
       <Box
         sx={{
           position: "absolute",
           inset: 0,
           background:
-            "linear-gradient(120deg, rgba(245, 124, 0, 0.85), rgba(255, 210, 160, 0.9), rgba(245, 124, 0, 0.6))",
+            "linear-gradient(120deg, rgba(245,124,0,0.06), rgba(255,210,160,0.08), rgba(245,124,0,0.04))",
           backgroundSize: "220% 220%",
           animation: reduceMotion
             ? "none"
-            : `${ambientShift} 10s ease-in-out infinite`,
+            : `${ambientShift} 14s ease-in-out infinite`,
           pointerEvents: "none",
-          mixBlendMode: "normal",
-          filter: "saturate(1.2)",
         }}
       />
 
-      <Container
-        maxWidth="lg"
-        sx={{ position: "relative", zIndex: 1, px: { xs: 2, sm: 3 } }}
+      {/* ===================== Cinematic 3D hero (full-bleed) ===================== */}
+      <Box
+        component="section"
+        sx={{
+          position: "relative",
+          zIndex: 1,
+          width: "100%",
+          minHeight: { xs: "94svh", md: "100svh" },
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          overflow: "hidden",
+          backgroundColor: palette.heroBg,
+          isolation: "isolate",
+        }}
       >
-        {/* Hero */}
         <Box
+          sx={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none" }}
+        >
+          <Suspense fallback={null}>
+            <HeroExperience reduceMotion={reduceMotion} variant="hero" />
+          </Suspense>
+        </Box>
+
+        {/* Center scrim so the headline reads over the glowing core */}
+        <Box
+          sx={{
+            position: "absolute",
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: "none",
+            background:
+              "radial-gradient(ellipse 130% 95% at 50% 44%, rgba(10,6,3,0.66) 0%, rgba(10,6,3,0.30) 38%, rgba(10,6,3,0) 72%)",
+          }}
+        />
+
+        {/* Fine grain for filmic depth */}
+        <Box
+          sx={{
+            position: "absolute",
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: "none",
+            opacity: 0.07,
+            mixBlendMode: "overlay",
+            backgroundImage:
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
+          }}
+        />
+
+        {/* Slim brand bar (the global navbar is hidden on the landing route) */}
+        <Box sx={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 3 }}>
+          <Container
+            maxWidth="lg"
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              py: { xs: 2.25, md: 3.25 },
+              px: { xs: 2, sm: 3 },
+            }}
+          >
+            <Stack direction="row" spacing={1.25} alignItems="center">
+              <Box
+                sx={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: "9px",
+                  background: `linear-gradient(135deg, ${palette.accent}, #ffb066)`,
+                  boxShadow: "0 6px 18px rgba(245,124,0,0.5)",
+                  display: "grid",
+                  placeItems: "center",
+                  color: "#fff",
+                  "& .MuiSvgIcon-root": { fontSize: "1.15rem" },
+                }}
+                aria-hidden="true"
+              >
+                <AutoStories />
+              </Box>
+              <Typography
+                sx={{
+                  fontFamily: displayFont,
+                  fontWeight: 600,
+                  fontSize: "1.25rem",
+                  color: palette.heroText,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                DocuThinker
+              </Typography>
+            </Stack>
+            <Stack direction="row" spacing={1.5} alignItems="center">
+              <Button
+                component={Link}
+                to="/login"
+                sx={{
+                  display: { xs: "none", sm: "inline-flex" },
+                  font: "inherit",
+                  fontWeight: 500,
+                  color: palette.heroMuted,
+                  textTransform: "none",
+                  "&:hover": {
+                    color: palette.heroText,
+                    backgroundColor: "rgba(255,255,255,0.04)",
+                  },
+                }}
+              >
+                Log in
+              </Button>
+              <Button
+                component={Link}
+                to="/register"
+                variant="contained"
+                sx={{
+                  backgroundColor: palette.accent,
+                  font: "inherit",
+                  fontWeight: 600,
+                  textTransform: "none",
+                  borderRadius: "999px",
+                  px: 2.5,
+                  boxShadow: "0 8px 22px rgba(245,124,0,0.4)",
+                  "&:hover": { backgroundColor: palette.accentDark },
+                }}
+              >
+                Get Started
+              </Button>
+            </Stack>
+          </Container>
+        </Box>
+
+        {/* Hero content */}
+        <Container
+          maxWidth="lg"
           sx={{
-            minHeight: { xs: "auto", md: "100svh" },
             position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            py: { xs: 6, md: 0 },
-            pb: { xs: 10, md: 0 },
+            zIndex: 2,
+            px: { xs: 2, sm: 3 },
+            py: { xs: 12, md: 6 },
+            textAlign: "center",
           }}
         >
-          <Grid
-            container
-            spacing={{ xs: 4, md: 6 }}
-            alignItems="center"
-            justifyContent="center"
-            sx={{ width: "100%" }}
+          <Box
+            sx={{
+              maxWidth: 920,
+              mx: "auto",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              animation: reduceMotion ? "none" : `${slideUp} 0.9s ease-out both`,
+            }}
           >
-            <Grid item xs={12} md={6}>
+            <Chip
+              label="AI document workspace"
+              icon={<AutoAwesome sx={{ fontSize: "1rem !important" }} />}
+              sx={{
+                mb: 3,
+                fontWeight: 600,
+                font: "inherit",
+                color: "#ffd9a8",
+                backgroundColor: palette.heroGlass,
+                border: `1px solid ${palette.heroGlassBorder}`,
+                backdropFilter: "blur(8px)",
+                "& .MuiChip-icon": { color: "#ffb066" },
+              }}
+            />
+            <Typography
+              component="h1"
+              sx={{
+                fontFamily: displayFont,
+                fontWeight: 600,
+                fontSize: { xs: "2.6rem", sm: "3.6rem", md: "5rem" },
+                lineHeight: 1.1,
+                letterSpacing: "-0.02em",
+                color: palette.heroText,
+                mb: 2.5,
+                px: { xs: 1, sm: 0 },
+                pb: "0.12em",
+                textShadow: "0 2px 30px rgba(0,0,0,0.45)",
+              }}
+            >
+              Every document,
+              <br />
+              instantly{" "}
               <Box
+                component="span"
                 sx={{
-                  animation: reduceMotion ? "none" : `${slideUp} 0.8s ease-out`,
-                  textAlign: "center",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
+                  display: "inline-block",
+                  pr: "0.14em",
+                  background:
+                    "linear-gradient(90deg, #ff8a1e 0%, #ffd27f 45%, #ff6a00 90%)",
+                  backgroundSize: "200% auto",
+                  WebkitBackgroundClip: "text",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                  color: "transparent",
+                  animation: reduceMotion
+                    ? "none"
+                    : `${textShimmer} 6s linear infinite`,
+                  fontStyle: "italic",
+                }}
+              >
+                understood
+              </Box>
+              .
+            </Typography>
+            <Typography
+              sx={{
+                font: "inherit",
+                color: palette.heroMuted,
+                maxWidth: 640,
+                fontSize: { xs: "1.05rem", md: "1.2rem" },
+                lineHeight: 1.6,
+                mb: 4,
+              }}
+            >
+              Upload PDFs, Word, Markdown, CSV, JSON, code, and more — then
+              summarize, analyze, chat, rewrite, translate, and reply by voice,
+              all in one intelligent workspace.
+            </Typography>
+            <Stack
+              direction={{ xs: "column", sm: "row" }}
+              spacing={2}
+              sx={{
+                mb: 4,
+                width: { xs: "100%", sm: "auto" },
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Button
+                component={Link}
+                to="/register"
+                variant="contained"
+                size="large"
+                endIcon={<Bolt />}
+                sx={{
+                  backgroundColor: palette.accent,
+                  font: "inherit",
+                  fontWeight: 600,
+                  textTransform: "none",
+                  fontSize: "1.05rem",
+                  px: 4,
+                  py: 1.3,
+                  borderRadius: "999px",
+                  boxShadow: "0 12px 34px rgba(245,124,0,0.45)",
+                  transition: "transform 0.25s ease, box-shadow 0.25s ease",
+                  "&:hover": {
+                    backgroundColor: palette.accentDark,
+                    transform: "translateY(-2px)",
+                    boxShadow: "0 18px 44px rgba(245,124,0,0.55)",
+                  },
+                }}
+              >
+                Start for free
+              </Button>
+              <Button
+                component={Link}
+                to="/how-to-use"
+                variant="outlined"
+                size="large"
+                sx={{
+                  borderColor: palette.heroGlassBorder,
+                  color: palette.heroText,
+                  font: "inherit",
+                  fontWeight: 600,
+                  textTransform: "none",
+                  fontSize: "1.05rem",
+                  px: 4,
+                  py: 1.3,
+                  borderRadius: "999px",
+                  backgroundColor: "rgba(255,255,255,0.03)",
+                  backdropFilter: "blur(6px)",
+                  "&:hover": {
+                    borderColor: "#ffb066",
+                    backgroundColor: "rgba(255,138,26,0.1)",
+                  },
                 }}
-                className="reveal"
               >
+                Take the tour
+              </Button>
+            </Stack>
+
+            <Box
+              sx={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 1,
+                justifyContent: "center",
+                maxWidth: 720,
+              }}
+            >
+              {heroHighlights.map((label) => (
                 <Chip
-                  label="AI document workspace"
+                  key={label}
+                  label={label}
+                  size="small"
                   sx={{
-                    mb: 2,
-                    fontWeight: 600,
                     font: "inherit",
-                    backgroundColor: palette.accentSoft,
-                    color: palette.accent,
+                    color: palette.heroMuted,
+                    backgroundColor: "rgba(255,255,255,0.04)",
+                    border: "1px solid rgba(255,255,255,0.09)",
+                    backdropFilter: "blur(6px)",
+                    "&:hover": {
+                      color: palette.heroText,
+                      borderColor: palette.heroGlassBorder,
+                    },
                   }}
                 />
-                <Typography
-                  variant="h2"
-                  sx={{
-                    font: "inherit",
-                    fontWeight: 700,
-                    fontSize: { xs: "2.1rem", sm: "2.6rem", md: "3.6rem" },
-                    lineHeight: 1.05,
-                    mb: 2,
-                    color: palette.textPrimary,
-                    textAlign: "center",
-                  }}
-                >
-                  Understand more file types in one AI workspace.
-                </Typography>
-                <Typography
-                  variant="h6"
+              ))}
+            </Box>
+          </Box>
+        </Container>
+
+        {/* Bottom fade into the light sections below */}
+        <Box
+          sx={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: { xs: 120, md: 200 },
+            zIndex: 2,
+            pointerEvents: "none",
+            background: `linear-gradient(to bottom, transparent, ${palette.background})`,
+          }}
+        />
+
+        {/* Scroll cue */}
+        <Box
+          sx={{
+            position: "absolute",
+            bottom: { xs: 22, md: 30 },
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 3,
+            animation: reduceMotion
+              ? "none"
+              : `${heroFloat} 2.6s ease-in-out infinite`,
+          }}
+        >
+          <IconButton
+            aria-label="Scroll to learn more"
+            onClick={scrollToClarity}
+            sx={{
+              color: palette.heroText,
+              border: `1px solid ${palette.heroGlassBorder}`,
+              backgroundColor: "rgba(255,255,255,0.04)",
+              backdropFilter: "blur(6px)",
+              animation: reduceMotion
+                ? "none"
+                : `${bounceHint} 2.2s ease-in-out infinite`,
+              "&:hover": {
+                backgroundColor: "rgba(255,138,26,0.14)",
+                borderColor: "#ffb066",
+              },
+            }}
+          >
+            <ArrowDownward />
+          </IconButton>
+        </Box>
+      </Box>
+
+      <Container
+        maxWidth="lg"
+        sx={{ position: "relative", zIndex: 2, px: { xs: 2, sm: 3 } }}
+      >
+        {/* Floating stats band (overlaps the hero fade) */}
+        <Box
+          ref={clarityRef}
+          sx={{
+            mt: { xs: -6, md: -9 },
+            position: "relative",
+            zIndex: 3,
+            borderRadius: "24px",
+            backgroundColor: palette.surface,
+            border: `1px solid ${palette.border}`,
+            boxShadow: palette.shadow,
+            p: { xs: 3, md: 4 },
+          }}
+          className="reveal"
+        >
+          <Grid container spacing={2}>
+            {stats.map((stat, i) => (
+              <Grid item xs={6} md={3} key={stat.label}>
+                <Box
                   sx={{
-                    font: "inherit",
-                    color: palette.textSecondary,
-                    maxWidth: "560px",
-                    fontSize: { xs: "1rem", md: "1.15rem" },
-                    mb: 3,
                     textAlign: "center",
+                    py: { xs: 1, md: 0.5 },
+                    borderLeft: {
+                      md:
+                        i === 0
+                          ? "none"
+                          : `1px solid ${palette.border}`,
+                    },
                   }}
                 >
-                  Upload PDFs, Word docs, Markdown, HTML, CSV/TSV, JSON, text,
-                  logs, and code files, then summarize, analyze, chat, rewrite,
-                  translate, or use voice responses without leaving the page.
-                </Typography>
-                <Stack
-                  direction={{ xs: "column", sm: "row" }}
-                  spacing={2}
-                  sx={{
-                    mb: 3,
-                    justifyContent: "center",
-                    alignItems: { xs: "stretch", sm: "center" },
-                  }}
-                >
-                  <Button
-                    component={Link}
-                    to="/home"
-                    variant="contained"
-                    size="large"
+                  <Typography
                     sx={{
-                      backgroundColor: palette.accent,
-                      font: "inherit",
+                      fontFamily: displayFont,
                       fontWeight: 600,
-                      px: 3,
-                      boxShadow: "none",
-                      "&:hover": {
-                        backgroundColor: palette.accentDark,
-                      },
+                      fontSize: { xs: "2rem", md: "2.6rem" },
+                      lineHeight: 1,
+                      background: `linear-gradient(135deg, ${palette.accent}, #ffab5e)`,
+                      WebkitBackgroundClip: "text",
+                      backgroundClip: "text",
+                      WebkitTextFillColor: "transparent",
+                      color: "transparent",
                     }}
                   >
-                    Get Started
-                  </Button>
-                  <Button
-                    component={Link}
-                    to="/how-to-use"
-                    variant="outlined"
-                    size="large"
+                    {stat.value}
+                  </Typography>
+                  <Typography
                     sx={{
-                      borderColor: palette.accent,
-                      color: palette.accent,
                       font: "inherit",
-                      fontWeight: 600,
-                      px: 3,
-                      "&:hover": {
-                        borderColor: palette.accent,
-                        backgroundColor: palette.accentSoft,
-                      },
+                      mt: 0.75,
+                      fontSize: { xs: "0.78rem", md: "0.9rem" },
+                      color: palette.textMuted,
                     }}
                   >
-                    Product Tour
-                  </Button>
-                </Stack>
-                <Box
-                  sx={{
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: 1,
-                    justifyContent: "center",
-                  }}
-                >
-                  {heroHighlights.map((label) => (
-                    <Chip
-                      key={label}
-                      label={label}
+                    {stat.label}
+                  </Typography>
+                </Box>
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+
+        {/* Pillars */}
+        <Box sx={{ mt: sectionSpacing }}>
+          <Eyebrow label="Why DocuThinker" />
+          <Typography
+            sx={{ ...sectionTitleSx, textAlign: "center", mb: 2 }}
+            className="reveal"
+          >
+            Professional clarity, at any scale
+          </Typography>
+          <Typography
+            sx={{
+              ...sectionSubtitleSx,
+              textAlign: "center",
+              maxWidth: "680px",
+              mx: "auto",
+              mb: { xs: 5, md: 7 },
+            }}
+            className="reveal"
+          >
+            Grounded in the features available today — summaries, bullet points,
+            analytics, and chat, all in one place.
+          </Typography>
+          <Grid container spacing={3}>
+            {pillars.map((pillar, i) => (
+              <Grid item xs={12} md={4} key={pillar.title}>
+                <Card sx={lightCardSx} className="reveal">
+                  <CardContent sx={{ p: { xs: 3, md: 3.5 }, position: "relative" }}>
+                    <Typography
+                      sx={{
+                        position: "absolute",
+                        top: 18,
+                        right: 24,
+                        fontFamily: displayFont,
+                        fontWeight: 600,
+                        fontSize: "2.4rem",
+                        color: palette.accentSoft,
+                        lineHeight: 1,
+                      }}
+                    >
+                      0{i + 1}
+                    </Typography>
+                    <IconTile large>{pillar.icon}</IconTile>
+                    <Typography
                       sx={{
-                        mb: 1,
                         font: "inherit",
-                        backgroundColor: palette.surface,
-                        color: palette.textSecondary,
-                        border: `1px solid ${palette.border}`,
-                      }}
-                    />
-                  ))}
-                </Box>
-              </Box>
-            </Grid>
-            <Grid item xs={12} md={6}>
-              <Box
-                sx={{
-                  background:
-                    "linear-gradient(145deg, #ffffff 0%, #fff7ee 54%, #ffffff 100%)",
-                  borderRadius: 4,
-                  p: { xs: 2, sm: 3 },
-                  boxShadow: palette.shadow,
-                  position: "relative",
-                  overflow: "hidden",
-                  maxWidth: "100%",
-                  mx: "auto",
-                  width: "100%",
-                }}
-                className="reveal"
-              >
-                <Box
-                  sx={{
-                    position: "absolute",
-                    inset: 0,
-                    background: `linear-gradient(120deg, ${palette.accentSoft}, transparent, ${palette.accentSoft})`,
-                    opacity: 0.45,
-                    animation: reduceMotion
-                      ? "none"
-                      : `${shimmer} 10s ease infinite`,
-                  }}
-                />
-                <Box
-                  sx={{
-                    position: "relative",
-                    zIndex: 1,
-                    display: "grid",
-                    gap: 2,
-                    minWidth: 0,
-                  }}
-                >
-                  <Typography
-                    variant="subtitle1"
-                    sx={{
-                      font: "inherit",
-                      fontWeight: 700,
-                      color: palette.textPrimary,
-                      wordBreak: "break-word",
-                      overflowWrap: "anywhere",
-                    }}
-                  >
-                    AI workspace
-                  </Typography>
-                  <Grid container spacing={1.5}>
-                    {heroWorkspaceItems.map((item) => (
-                      <Grid item xs={12} sm={4} key={item.title}>
-                        <Box
-                          sx={{
-                            height: "100%",
-                            p: 1.5,
-                            borderRadius: 2,
-                            backgroundColor: palette.surface,
-                            border: `1px solid ${palette.border}`,
-                            boxShadow: "0 8px 18px rgba(20, 12, 4, 0.06)",
-                          }}
-                        >
-                          <Stack
-                            direction={{ xs: "row", sm: "column" }}
-                            spacing={1}
-                            alignItems={{ xs: "center", sm: "flex-start" }}
-                          >
-                            <Avatar
-                              sx={{
-                                width: 34,
-                                height: 34,
-                                bgcolor: palette.accentSoft,
-                                color: palette.accent,
-                              }}
-                            >
-                              {React.cloneElement(item.icon, {
-                                fontSize: "small",
-                              })}
-                            </Avatar>
-                            <Typography
-                              variant="subtitle2"
-                              sx={{
-                                font: "inherit",
-                                fontWeight: 700,
-                                color: palette.textPrimary,
-                              }}
-                            >
-                              {item.title}
-                            </Typography>
-                          </Stack>
-                        </Box>
-                      </Grid>
-                    ))}
-                  </Grid>
-                  <Box
-                    sx={{
-                      p: 2,
-                      borderRadius: 2,
-                      backgroundColor: palette.surfaceAlt,
-                      border: `1px solid ${palette.border}`,
-                      minWidth: 0,
-                    }}
-                  >
-                    <Typography
-                      variant="subtitle2"
-                      sx={{
-                        font: "inherit",
-                        fontWeight: 600,
-                        color: palette.textPrimary,
-                        wordBreak: "break-word",
-                        overflowWrap: "anywhere",
-                      }}
-                    >
-                      One connected view
-                    </Typography>
-                    <Typography
-                      variant="body2"
-                      sx={{
-                        font: "inherit",
-                        color: palette.textSecondary,
-                        mb: 2,
-                        wordBreak: "break-word",
-                        overflowWrap: "anywhere",
-                      }}
-                    >
-                      Summaries, bullets, analytics, chat, rewrite, translation,
-                      and voice stay with the same document.
-                    </Typography>
-                    <Divider sx={{ borderColor: palette.border }} />
-                    <Grid container spacing={2} sx={{ mt: 1 }}>
-                      {metrics.map((metric) => (
-                        <Grid item xs={12} sm={6} key={metric.label}>
-                          <Typography
-                            variant="h6"
-                            sx={{
-                              font: "inherit",
-                              fontWeight: 700,
-                              color: palette.accent,
-                            }}
-                          >
-                            {metric.value}
-                          </Typography>
-                          <Typography
-                            variant="caption"
-                            sx={{ font: "inherit", color: palette.textMuted }}
-                          >
-                            {metric.label}
-                          </Typography>
-                        </Grid>
-                      ))}
-                    </Grid>
-                  </Box>
-                  <Grid container spacing={2}>
-                    {[Security, VerifiedUser].map((Icon, index) => (
-                      <Grid
-                        item
-                        xs={12}
-                        sm={6}
-                        key={Icon.displayName || Icon.name}
-                      >
-                        <Box
-                          sx={{
-                            height: "100%",
-                            p: { xs: 2.25, sm: 2.5 },
-                            borderRadius: 2,
-                            background:
-                              "linear-gradient(180deg, #ffffff 0%, #fffaf4 100%)",
-                            border: `1px solid ${palette.accentSoft}`,
-                            boxShadow: "0 14px 30px rgba(20, 12, 4, 0.08)",
-                            minWidth: 0,
-                            transition:
-                              "transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease",
-                            "&:hover": {
-                              transform: "translateY(-3px)",
-                              borderColor: "rgba(245, 124, 0, 0.35)",
-                              boxShadow: "0 18px 36px rgba(20, 12, 4, 0.12)",
-                            },
-                          }}
-                        >
-                          <Stack
-                            spacing={1.5}
-                            alignItems="center"
-                            textAlign="center"
-                            sx={{ minWidth: 0, height: "100%" }}
-                          >
-                            <Avatar
-                              sx={{
-                                width: 52,
-                                height: 52,
-                                bgcolor: palette.accent,
-                                color: "white",
-                                boxShadow:
-                                  "0 10px 22px rgba(245, 124, 0, 0.28)",
-                                "& .MuiSvgIcon-root": {
-                                  fontSize: "1.65rem",
-                                },
-                              }}
-                            >
-                              <Icon />
-                            </Avatar>
-                            <Box sx={{ minWidth: 0 }}>
-                              <Typography
-                                variant="subtitle2"
-                                sx={{
-                                  font: "inherit",
-                                  fontWeight: 700,
-                                  color: palette.textPrimary,
-                                  fontSize: "1rem",
-                                  lineHeight: 1.25,
-                                  mb: 0.65,
-                                  wordBreak: "break-word",
-                                  overflowWrap: "anywhere",
-                                }}
-                              >
-                                {index === 0
-                                  ? "Drive import"
-                                  : "Signed-in access"}
-                              </Typography>
-                              <Typography
-                                variant="body2"
-                                sx={{
-                                  font: "inherit",
-                                  color: palette.textSecondary,
-                                  lineHeight: 1.55,
-                                  wordBreak: "break-word",
-                                  overflowWrap: "anywhere",
-                                }}
-                              >
-                                {index === 0
-                                  ? "Read-only file picker."
-                                  : "Save documents for later."}
-                              </Typography>
-                            </Box>
-                          </Stack>
-                        </Box>
-                      </Grid>
-                    ))}
-                  </Grid>
-                </Box>
-              </Box>
-            </Grid>
-          </Grid>
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              position: "absolute",
-              left: "50%",
-              bottom: { xs: 16, md: 24 },
-              transform: "translateX(-50%)",
-            }}
-          >
-            <Button
-              variant="outlined"
-              size="large"
-              onClick={() =>
-                clarityRef.current?.scrollIntoView({
-                  behavior: "smooth",
-                  block: "start",
-                })
-              }
-              endIcon={<ArrowDownward />}
-              sx={{
-                borderColor: palette.accent,
-                color: palette.accent,
-                font: "inherit",
-                fontWeight: 600,
-                px: 4,
-                "&:hover": {
-                  borderColor: palette.accentDark,
-                  backgroundColor: palette.accentSoft,
-                },
-                animation: reduceMotion
-                  ? "none"
-                  : `${bounceHint} 2.2s ease-in-out infinite`,
-              }}
-            >
-              Learn more
-            </Button>
-          </Box>
-        </Box>
-
-        {/* Pillars */}
-        <Box sx={{ mt: sectionSpacing }} ref={clarityRef}>
-          <Typography
-            variant="h4"
-            sx={{ ...sectionTitleSx, textAlign: "center", mb: 2 }}
-            className="reveal"
-          >
-            Professional clarity at scale
-          </Typography>
-          <Typography
-            variant="body1"
-            sx={{
-              ...sectionSubtitleSx,
-              textAlign: "center",
-              maxWidth: "720px",
-              mx: "auto",
-              mb: 4,
-            }}
-            className="reveal"
-          >
-            Grounded in the features available today: summaries, bullet points,
-            analytics, and chat.
-          </Typography>
-          <Grid container spacing={3}>
-            {pillars.map((pillar) => (
-              <Grid item xs={12} md={4} key={pillar.title}>
-                <Card
-                  sx={{
-                    height: "100%",
-                    borderRadius: 3,
-                    border: `1px solid ${palette.border}`,
-                    backgroundColor: palette.surface,
-                    boxShadow: "none",
-                  }}
-                  className="reveal"
-                >
-                  <CardContent>
-                    <Avatar
-                      sx={{ bgcolor: palette.accent, color: "white", mb: 2 }}
-                    >
-                      {pillar.icon}
-                    </Avatar>
-                    <Typography
-                      variant="h6"
-                      sx={{
-                        font: "inherit",
-                        fontWeight: 600,
-                        mb: 1,
-                        color: palette.textPrimary,
+                        fontWeight: 600,
+                        fontSize: "1.2rem",
+                        mt: 2.5,
+                        mb: 1,
+                        color: palette.textPrimary,
                       }}
                     >
                       {pillar.title}
                     </Typography>
                     <Typography
-                      variant="body2"
                       sx={{ font: "inherit", color: palette.textSecondary }}
                     >
                       {pillar.description}
@@ -1038,17 +1108,16 @@ const LandingPage = () => {
           </Grid>
         </Box>
 
-        {/* Spotlight */}
+        {/* Spotlight (dark mid-page moment) */}
         <Box
           sx={{
             mt: sectionSpacing,
-            p: { xs: 3, md: 5 },
-            borderRadius: 4,
-            backgroundColor: palette.surface,
-            border: `1px solid ${palette.border}`,
-            boxShadow: palette.shadowSoft,
+            p: { xs: 3, md: 6 },
+            borderRadius: "28px",
+            backgroundColor: palette.heroBg,
             position: "relative",
             overflow: "hidden",
+            boxShadow: palette.shadow,
           }}
           className="reveal"
         >
@@ -1056,94 +1125,87 @@ const LandingPage = () => {
             sx={{
               position: "absolute",
               inset: 0,
-              background: `linear-gradient(120deg, ${palette.accentSoft}, transparent, ${palette.accentSoft})`,
-              opacity: 0.35,
+              background:
+                "radial-gradient(circle at 20% 20%, rgba(245,124,0,0.30), transparent 45%), radial-gradient(circle at 90% 80%, rgba(111,155,255,0.18), transparent 45%)",
+              pointerEvents: "none",
             }}
           />
           <Grid
             container
-            spacing={{ xs: 3, md: 4 }}
+            spacing={{ xs: 4, md: 6 }}
             alignItems="center"
             sx={{ position: "relative", zIndex: 1 }}
           >
             <Grid item xs={12} md={6}>
+              <Eyebrow label="Capability spotlight" light align="left" />
               <Typography
-                variant="h4"
-                sx={{ ...sectionTitleSx, mb: 2 }}
+                sx={{
+                  ...sectionTitleSx,
+                  color: palette.heroText,
+                  mb: 2,
+                }}
                 className="reveal"
               >
-                Capability spotlight
+                Clarity for complex documents
               </Typography>
               <Typography
-                variant="body1"
-                sx={{ ...sectionSubtitleSx, mb: 3 }}
+                sx={{
+                  font: "inherit",
+                  color: palette.heroMuted,
+                  fontSize: { xs: "1rem", md: "1.1rem" },
+                  mb: 3,
+                }}
                 className="reveal"
               >
-                See how DocuThinker brings clarity to complex documents through
-                key features.
+                Step through what DocuThinker does the moment a file lands.
               </Typography>
               <Box
                 key={spotlightIndex}
                 sx={{
-                  animation: reduceMotion
-                    ? "none"
-                    : `${fadeSwap} 0.6s ease-out`,
+                  animation: reduceMotion ? "none" : `${fadeSwap} 0.6s ease-out`,
                 }}
               >
                 <Stack
-                  direction={{ xs: "column", sm: "row" }}
+                  direction="row"
                   spacing={2}
-                  alignItems={{ xs: "flex-start", sm: "center" }}
+                  alignItems="center"
                   sx={{ mb: 2 }}
                 >
-                  <Avatar sx={{ bgcolor: palette.accent, color: "white" }}>
+                  <IconTile light large>
                     {spotlights[spotlightIndex].icon}
-                  </Avatar>
+                  </IconTile>
                   <Typography
-                    variant="h6"
                     sx={{
-                      font: "inherit",
+                      fontFamily: displayFont,
                       fontWeight: 600,
-                      color: palette.textPrimary,
-                      wordBreak: "break-word",
-                      overflowWrap: "anywhere",
+                      fontSize: "1.5rem",
+                      color: palette.heroText,
                     }}
                   >
                     {spotlights[spotlightIndex].title}
                   </Typography>
                 </Stack>
                 <Typography
-                  variant="body1"
                   sx={{
-                    ...sectionSubtitleSx,
-                    mb: 2,
-                    wordBreak: "break-word",
-                    overflowWrap: "anywhere",
+                    font: "inherit",
+                    color: palette.heroMuted,
+                    fontSize: "1.05rem",
+                    mb: 2.5,
                   }}
                 >
                   {spotlights[spotlightIndex].description}
                 </Typography>
-                <Stack spacing={1} sx={{ minWidth: 0 }}>
+                <Stack spacing={1.25}>
                   {spotlights[spotlightIndex].points.map((point) => (
                     <Stack
                       key={point}
                       direction="row"
                       spacing={1.5}
-                      alignItems="flex-start"
-                      sx={{ minWidth: 0 }}
+                      alignItems="center"
                     >
-                      <CheckCircle
-                        fontSize="small"
-                        sx={{ color: palette.accent }}
-                      />
+                      <CheckCircle fontSize="small" sx={{ color: "#ffb066" }} />
                       <Typography
-                        variant="body2"
-                        sx={{
-                          font: "inherit",
-                          color: palette.textSecondary,
-                          wordBreak: "break-word",
-                          overflowWrap: "anywhere",
-                        }}
+                        sx={{ font: "inherit", color: palette.heroText }}
                       >
                         {point}
                       </Typography>
@@ -1151,266 +1213,351 @@ const LandingPage = () => {
                   ))}
                 </Stack>
               </Box>
-              <Stack direction="row" spacing={1} sx={{ mt: 3 }}>
-                <IconButton
-                  aria-label="Previous spotlight"
-                  onClick={() =>
-                    setSpotlightIndex(
-                      (prev) =>
-                        (prev - 1 + spotlights.length) % spotlights.length,
-                    )
-                  }
-                  sx={{
-                    border: `1px solid ${palette.border}`,
-                    color: palette.textPrimary,
-                  }}
-                >
-                  <ArrowBackIosNew fontSize="small" />
-                </IconButton>
-                <IconButton
-                  aria-label="Next spotlight"
-                  onClick={() =>
-                    setSpotlightIndex((prev) => (prev + 1) % spotlights.length)
-                  }
-                  sx={{
-                    border: `1px solid ${palette.border}`,
-                    color: palette.textPrimary,
-                  }}
-                >
-                  <ArrowForwardIos fontSize="small" />
-                </IconButton>
+              <Stack direction="row" spacing={1.5} sx={{ mt: 4 }}>
+                {spotlights.map((_, i) => (
+                  <Box
+                    key={i}
+                    onClick={() => setSpotlightIndex(i)}
+                    role="button"
+                    aria-label={`Show spotlight ${i + 1}`}
+                    sx={{
+                      cursor: "pointer",
+                      height: 6,
+                      borderRadius: 3,
+                      width: i === spotlightIndex ? 30 : 14,
+                      backgroundColor:
+                        i === spotlightIndex
+                          ? palette.accent
+                          : "rgba(255,255,255,0.25)",
+                      transition: "all 0.4s ease",
+                    }}
+                  />
+                ))}
               </Stack>
             </Grid>
             <Grid item xs={12} md={6}>
-              <Stack spacing={2} sx={{ minWidth: 0 }}>
+              <Stack spacing={2}>
                 {features.slice(0, 3).map((feature) => (
-                  <Card
+                  <Box
                     key={feature.title}
+                    className="reveal"
                     sx={{
-                      width: "100%",
-                      borderRadius: 3,
-                      border: `1px solid ${palette.border}`,
-                      backgroundColor: palette.surfaceAlt,
-                      boxShadow: "none",
+                      borderRadius: "18px",
+                      p: { xs: 2.25, md: 2.75 },
+                      backgroundColor: "rgba(255,255,255,0.05)",
+                      border: "1px solid rgba(255,255,255,0.09)",
+                      backdropFilter: "blur(8px)",
+                      transition: reduceMotion
+                        ? "none"
+                        : "transform 0.35s ease, border-color 0.35s ease",
+                      "&:hover": {
+                        transform: "translateX(6px)",
+                        borderColor: palette.heroGlassBorder,
+                      },
                     }}
-                    className="reveal"
                   >
-                    <CardContent>
-                      <Stack
-                        direction={{ xs: "column", sm: "row" }}
-                        spacing={2}
-                        alignItems={{ xs: "flex-start", sm: "center" }}
-                        sx={{ minWidth: 0 }}
-                      >
-                        <Avatar
-                          sx={{ bgcolor: palette.accent, color: "white" }}
+                    <Stack direction="row" spacing={2} alignItems="center">
+                      <IconTile light>{feature.icon}</IconTile>
+                      <Box>
+                        <Typography
+                          sx={{
+                            font: "inherit",
+                            fontWeight: 600,
+                            color: palette.heroText,
+                          }}
                         >
-                          {feature.icon}
-                        </Avatar>
-                        <Box sx={{ minWidth: 0 }}>
-                          <Typography
-                            variant="subtitle1"
-                            sx={{
-                              font: "inherit",
-                              fontWeight: 600,
-                              color: palette.textPrimary,
-                              wordBreak: "break-word",
-                              overflowWrap: "anywhere",
-                            }}
-                          >
-                            {feature.title}
-                          </Typography>
-                          <Typography
-                            variant="body2"
-                            sx={{
-                              font: "inherit",
-                              color: palette.textSecondary,
-                              wordBreak: "break-word",
-                              overflowWrap: "anywhere",
-                            }}
-                          >
-                            {feature.description}
-                          </Typography>
-                        </Box>
-                      </Stack>
-                    </CardContent>
-                  </Card>
+                          {feature.title}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            font: "inherit",
+                            fontSize: "0.9rem",
+                            color: palette.heroMuted,
+                          }}
+                        >
+                          {feature.description}
+                        </Typography>
+                      </Box>
+                    </Stack>
+                  </Box>
                 ))}
               </Stack>
             </Grid>
           </Grid>
         </Box>
 
-        {/* Features */}
+        {/* Features — bento grid */}
         <Box sx={{ mt: sectionSpacing }}>
+          <Eyebrow label="Features" />
           <Typography
-            variant="h4"
             sx={{ ...sectionTitleSx, textAlign: "center", mb: 2 }}
             className="reveal"
           >
             Everything you need to move faster
           </Typography>
           <Typography
-            variant="body1"
             sx={{
               ...sectionSubtitleSx,
               textAlign: "center",
-              maxWidth: "720px",
+              maxWidth: "680px",
               mx: "auto",
-              mb: 4,
+              mb: { xs: 5, md: 7 },
             }}
             className="reveal"
           >
             Built for clarity, accessibility, and shared understanding across
             teams.
           </Typography>
-          <Grid container spacing={3}>
-            {features.map((feature) => (
-              <Grid item xs={12} md={4} key={feature.title}>
+          <Box
+            sx={{
+              display: "grid",
+              gap: { xs: 2, md: 3 },
+              gridTemplateColumns: {
+                xs: "1fr",
+                sm: "repeat(2, 1fr)",
+                md: "repeat(3, 1fr)",
+              },
+              gridAutoFlow: "dense",
+            }}
+          >
+            {features.map((feature, i) => {
+              const featured = i === 0;
+              return (
                 <Card
+                  key={feature.title}
+                  className="reveal"
                   sx={{
-                    height: "100%",
-                    borderRadius: 3,
-                    border: `1px solid ${palette.border}`,
-                    boxShadow: "none",
-                    backgroundColor: palette.surface,
+                    ...lightCardSx,
+                    gridColumn: featured ? { md: "span 2" } : "auto",
+                    gridRow: featured ? { md: "span 2" } : "auto",
+                    background: featured
+                      ? `linear-gradient(150deg, ${palette.accent}, #ff9d3f)`
+                      : palette.surface,
+                    color: featured ? "#fff" : palette.textPrimary,
+                    border: featured ? "none" : `1px solid ${palette.border}`,
+                    "&:hover": {
+                      transform: "translateY(-6px)",
+                      boxShadow: palette.shadowSoft,
+                      borderColor: featured
+                        ? "transparent"
+                        : "rgba(245, 124, 0, 0.4)",
+                    },
                   }}
-                  className="reveal"
                 >
-                  <CardContent>
-                    <Avatar
-                      sx={{ bgcolor: palette.accent, color: "white", mb: 2 }}
-                    >
-                      {feature.icon}
-                    </Avatar>
+                  <CardContent
+                    sx={{
+                      p: { xs: 3, md: featured ? 4 : 3 },
+                      height: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    {featured ? (
+                      <Box
+                        sx={{
+                          width: 58,
+                          height: 58,
+                          borderRadius: "16px",
+                          display: "grid",
+                          placeItems: "center",
+                          backgroundColor: "rgba(255,255,255,0.2)",
+                          color: "#fff",
+                          "& .MuiSvgIcon-root": { fontSize: "1.7rem" },
+                        }}
+                      >
+                        {feature.icon}
+                      </Box>
+                    ) : (
+                      <IconTile>{feature.icon}</IconTile>
+                    )}
                     <Typography
-                      variant="h6"
                       sx={{
                         font: "inherit",
                         fontWeight: 600,
+                        fontSize: featured
+                          ? { xs: "1.4rem", md: "1.7rem" }
+                          : "1.1rem",
+                        mt: featured ? 3 : 2,
                         mb: 1,
-                        color: palette.textPrimary,
+                        color: featured ? "#fff" : palette.textPrimary,
                       }}
                     >
                       {feature.title}
                     </Typography>
                     <Typography
-                      variant="body2"
-                      sx={{ font: "inherit", color: palette.textSecondary }}
+                      sx={{
+                        font: "inherit",
+                        color: featured
+                          ? "rgba(255,255,255,0.9)"
+                          : palette.textSecondary,
+                        fontSize: featured ? "1.02rem" : "0.92rem",
+                      }}
                     >
                       {feature.description}
                     </Typography>
+                    {featured && (
+                      <Box
+                        sx={{
+                          mt: "auto",
+                          pt: 3,
+                          display: "flex",
+                          flexWrap: "wrap",
+                          gap: 1,
+                        }}
+                      >
+                        {["PDF", "Word", "CSV", "JSON", "Markdown", "Code"].map(
+                          (t) => (
+                            <Chip
+                              key={t}
+                              label={t}
+                              size="small"
+                              sx={{
+                                font: "inherit",
+                                color: "#fff",
+                                backgroundColor: "rgba(255,255,255,0.18)",
+                                border: "1px solid rgba(255,255,255,0.25)",
+                              }}
+                            />
+                          ),
+                        )}
+                      </Box>
+                    )}
                   </CardContent>
                 </Card>
-              </Grid>
-            ))}
-          </Grid>
+              );
+            })}
+          </Box>
         </Box>
 
-        {/* Workflow */}
+        {/* Workflow — connected stepper */}
         <Box sx={{ mt: sectionSpacing }}>
-          <Grid container spacing={4} alignItems="center">
-            <Grid item xs={12} md={4}>
-              <Typography
-                variant="h4"
-                sx={{ ...sectionTitleSx, mb: 2 }}
-                className="reveal"
-              >
-                A workflow that mirrors the app
-              </Typography>
-              <Typography
-                variant="body1"
-                sx={sectionSubtitleSx}
-                className="reveal"
-              >
-                Upload, summarize, analyze, and refine in the same workspace.
-              </Typography>
-            </Grid>
-            <Grid item xs={12} md={8}>
-              <Grid container spacing={3}>
-                {workflow.map((step, index) => (
-                  <Grid item xs={12} sm={6} key={step.title}>
-                    <Card
+          <Eyebrow label="How it works" />
+          <Typography
+            sx={{ ...sectionTitleSx, textAlign: "center", mb: 2 }}
+            className="reveal"
+          >
+            A workflow that mirrors the app
+          </Typography>
+          <Typography
+            sx={{
+              ...sectionSubtitleSx,
+              textAlign: "center",
+              maxWidth: "680px",
+              mx: "auto",
+              mb: { xs: 5, md: 7 },
+            }}
+            className="reveal"
+          >
+            Upload, summarize, analyze, and refine — all in the same workspace.
+          </Typography>
+          <Box sx={{ position: "relative" }}>
+            {/* connecting line on desktop */}
+            <Box
+              sx={{
+                display: { xs: "none", md: "block" },
+                position: "absolute",
+                top: 33,
+                left: "12%",
+                right: "12%",
+                height: "2px",
+                background: `linear-gradient(90deg, transparent, ${palette.accentSoft}, ${palette.accentSoft}, transparent)`,
+                zIndex: 0,
+              }}
+            />
+            <Grid container spacing={{ xs: 3, md: 3 }}>
+              {workflow.map((step, index) => (
+                <Grid item xs={12} sm={6} md={3} key={step.title}>
+                  <Box
+                    className="reveal"
+                    sx={{ position: "relative", zIndex: 1, textAlign: "center" }}
+                  >
+                    <Box
                       sx={{
-                        height: "100%",
-                        borderRadius: 3,
-                        border: `1px solid ${palette.border}`,
-                        backgroundColor: palette.surfaceAlt,
-                        boxShadow: "none",
+                        width: 66,
+                        height: 66,
+                        mx: "auto",
+                        mb: 2.5,
+                        borderRadius: "20px",
+                        display: "grid",
+                        placeItems: "center",
+                        color: "#fff",
+                        background: `linear-gradient(135deg, ${palette.accent}, #ff9d3f)`,
+                        boxShadow: "0 12px 26px rgba(245,124,0,0.35)",
+                        position: "relative",
+                        "& .MuiSvgIcon-root": { fontSize: "1.7rem" },
                       }}
-                      className="reveal"
                     >
-                      <CardContent>
-                        <Stack
-                          direction="row"
-                          spacing={2}
-                          alignItems="center"
-                          sx={{ mb: 2 }}
-                        >
-                          <Avatar
-                            sx={{ bgcolor: palette.accent, color: "white" }}
-                          >
-                            {step.icon}
-                          </Avatar>
-                          <Typography
-                            variant="subtitle1"
-                            sx={{
-                              font: "inherit",
-                              fontWeight: 600,
-                              color: palette.textPrimary,
-                            }}
-                          >
-                            {index + 1}. {step.title}
-                          </Typography>
-                        </Stack>
-                        <Typography
-                          variant="body2"
-                          sx={{ font: "inherit", color: palette.textSecondary }}
-                        >
-                          {step.description}
-                        </Typography>
-                      </CardContent>
-                    </Card>
-                  </Grid>
-                ))}
-              </Grid>
+                      {step.icon}
+                      <Box
+                        sx={{
+                          position: "absolute",
+                          top: -8,
+                          right: -8,
+                          width: 26,
+                          height: 26,
+                          borderRadius: "50%",
+                          backgroundColor: palette.surface,
+                          border: `1px solid ${palette.border}`,
+                          color: palette.accent,
+                          fontSize: "0.8rem",
+                          fontWeight: 700,
+                          display: "grid",
+                          placeItems: "center",
+                        }}
+                      >
+                        {index + 1}
+                      </Box>
+                    </Box>
+                    <Typography
+                      sx={{
+                        font: "inherit",
+                        fontWeight: 600,
+                        fontSize: "1.15rem",
+                        mb: 1,
+                        color: palette.textPrimary,
+                      }}
+                    >
+                      {step.title}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        font: "inherit",
+                        color: palette.textSecondary,
+                        fontSize: "0.92rem",
+                        maxWidth: 260,
+                        mx: "auto",
+                      }}
+                    >
+                      {step.description}
+                    </Typography>
+                  </Box>
+                </Grid>
+              ))}
             </Grid>
-          </Grid>
+          </Box>
         </Box>
 
         {/* Outcomes */}
         <Box sx={{ mt: sectionSpacing }}>
+          <Eyebrow label="Outputs" />
           <Typography
-            variant="h4"
-            sx={{ ...sectionTitleSx, textAlign: "center", mb: 3 }}
+            sx={{ ...sectionTitleSx, textAlign: "center", mb: { xs: 5, md: 7 } }}
             className="reveal"
           >
-            Outputs available in the app
+            What you get back
           </Typography>
           <Grid container spacing={3}>
             {outcomes.map((item) => (
-              <Grid item xs={12} md={3} key={item.title}>
-                <Card
-                  sx={{
-                    height: "100%",
-                    borderRadius: 3,
-                    border: `1px solid ${palette.border}`,
-                    backgroundColor: palette.surface,
-                    boxShadow: "none",
-                  }}
-                  className="reveal"
-                >
-                  <CardContent>
-                    <Avatar
-                      sx={{ bgcolor: palette.accent, color: "white", mb: 2 }}
-                    >
-                      {item.icon}
-                    </Avatar>
+              <Grid item xs={12} sm={6} md={3} key={item.title}>
+                <Card sx={lightCardSx} className="reveal">
+                  <CardContent sx={{ p: { xs: 3, md: 3.5 } }}>
+                    <IconTile>{item.icon}</IconTile>
                     <Typography
-                      variant="subtitle1"
                       sx={{
                         font: "inherit",
                         fontWeight: 600,
+                        fontSize: "1.1rem",
+                        mt: 2,
                         mb: 1,
                         color: palette.textPrimary,
                       }}
@@ -1418,7 +1565,6 @@ const LandingPage = () => {
                       {item.title}
                     </Typography>
                     <Typography
-                      variant="body2"
                       sx={{ font: "inherit", color: palette.textSecondary }}
                     >
                       {item.description}
@@ -1432,12 +1578,12 @@ const LandingPage = () => {
 
         {/* Comparison */}
         <Box sx={{ mt: sectionSpacing }}>
+          <Eyebrow label="The difference" />
           <Typography
-            variant="h4"
-            sx={{ ...sectionTitleSx, textAlign: "center", mb: 3 }}
+            sx={{ ...sectionTitleSx, textAlign: "center", mb: { xs: 5, md: 7 } }}
             className="reveal"
           >
-            Manual vs DocuThinker workflow
+            Manual vs DocuThinker
           </Typography>
           <Grid container spacing={3}>
             {["Manual workflow", "DocuThinker workflow"].map((title, index) => (
@@ -1445,28 +1591,38 @@ const LandingPage = () => {
                 <Card
                   sx={{
                     height: "100%",
-                    borderRadius: 3,
-                    border: `1px solid ${palette.border}`,
-                    backgroundColor:
-                      index === 0 ? palette.surface : palette.accent,
+                    borderRadius: "22px",
+                    border:
+                      index === 0
+                        ? `1px solid ${palette.border}`
+                        : "none",
+                    background:
+                      index === 0
+                        ? palette.surface
+                        : `linear-gradient(150deg, ${palette.accent}, #ff9d3f)`,
                     color: index === 0 ? palette.textPrimary : "white",
-                    boxShadow: "none",
+                    boxShadow: index === 0 ? "none" : palette.shadowSoft,
+                    "&:hover": {
+                      transform: "translateY(-6px)",
+                      borderColor:
+                        index === 0 ? "rgba(245,124,0,0.4)" : "transparent",
+                    },
                   }}
                   className="reveal"
                 >
-                  <CardContent>
+                  <CardContent sx={{ p: { xs: 3, md: 4 } }}>
                     <Typography
-                      variant="h6"
                       sx={{
-                        font: "inherit",
-                        fontWeight: 700,
-                        mb: 2,
+                        fontFamily: displayFont,
+                        fontWeight: 600,
+                        fontSize: "1.5rem",
+                        mb: 2.5,
                         color: index === 0 ? palette.textPrimary : "white",
                       }}
                     >
                       {title}
                     </Typography>
-                    <Stack spacing={1.5}>
+                    <Stack spacing={1.75}>
                       {(index === 0
                         ? [
                             "Manual reading and highlighting",
@@ -1499,7 +1655,6 @@ const LandingPage = () => {
                             />
                           )}
                           <Typography
-                            variant="body2"
                             sx={{
                               font: "inherit",
                               color:
@@ -1518,92 +1673,116 @@ const LandingPage = () => {
           </Grid>
         </Box>
 
-        {/* Supported Inputs */}
+        {/* Supported inputs — marquee */}
         <Box sx={{ mt: sectionSpacing, textAlign: "center" }}>
+          <Eyebrow label="Supported inputs" />
           <Typography
-            variant="h4"
             sx={{ ...sectionTitleSx, mb: 2 }}
             className="reveal"
           >
-            Supported inputs
+            Bring almost anything
           </Typography>
           <Typography
-            variant="body1"
-            sx={{ ...sectionSubtitleSx, mb: 3, maxWidth: "720px", mx: "auto" }}
+            sx={{
+              ...sectionSubtitleSx,
+              mb: { xs: 4, md: 6 },
+              maxWidth: "680px",
+              mx: "auto",
+            }}
             className="reveal"
           >
-            Upload documents, structured data, text, logs, and code/config
-            files. Google Drive supports PDF, Word, JSON, and text-based files;
-            voice chat supports audio upload or recording.
+            Documents, structured data, text, logs, and code. Google Drive
+            supports PDF, Word, JSON, and text-based files; voice chat supports
+            audio upload or recording.
           </Typography>
           <Box
             sx={{
-              display: "flex",
-              flexWrap: "wrap",
-              justifyContent: "center",
-              gap: { xs: 1, sm: 1.5 },
-              rowGap: { xs: 1, sm: 1.5 },
+              position: "relative",
+              overflow: "hidden",
+              py: 1,
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                width: { xs: 40, md: 120 },
+                zIndex: 2,
+                pointerEvents: "none",
+              },
+              "&::before": {
+                left: 0,
+                background: `linear-gradient(to right, ${palette.background}, transparent)`,
+              },
+              "&::after": {
+                right: 0,
+                background: `linear-gradient(to left, ${palette.background}, transparent)`,
+              },
             }}
           >
-            {integrations.map((label) => (
-              <Chip
-                key={label}
-                label={label}
+            {[0, 1].map((row) => (
+              <Box
+                key={row}
                 sx={{
-                  font: "inherit",
-                  backgroundColor: palette.surface,
-                  border: `1px solid ${palette.border}`,
-                  color: palette.textSecondary,
-                  height: "auto",
-                  py: 0.5,
-                  px: 0.5,
-                  "& .MuiChip-label": {
-                    px: 1,
-                    py: 0.5,
-                    whiteSpace: "normal",
-                    textAlign: "center",
-                    fontSize: { xs: "0.85rem", sm: "0.95rem" },
-                  },
+                  display: "flex",
+                  width: "max-content",
+                  gap: 1.5,
+                  mb: row === 0 ? 1.5 : 0,
+                  animation: reduceMotion
+                    ? "none"
+                    : `${row === 0 ? marquee : marqueeReverse} ${
+                        row === 0 ? 38 : 46
+                      }s linear infinite`,
+                  flexWrap: reduceMotion ? "wrap" : "nowrap",
+                  justifyContent: reduceMotion ? "center" : "flex-start",
+                  "&:hover": { animationPlayState: "paused" },
                 }}
-                className="reveal"
-              />
+              >
+                {(reduceMotion
+                  ? integrations
+                  : [...integrations, ...integrations]
+                ).map((label, idx) => (
+                  <Chip
+                    key={`${row}-${label}-${idx}`}
+                    label={label}
+                    sx={{
+                      font: "inherit",
+                      fontSize: "0.95rem",
+                      py: 2.25,
+                      px: 0.5,
+                      borderRadius: "999px",
+                      backgroundColor: palette.surface,
+                      border: `1px solid ${palette.border}`,
+                      color: palette.textSecondary,
+                      "& .MuiChip-label": { px: 2 },
+                    }}
+                  />
+                ))}
+              </Box>
             ))}
           </Box>
         </Box>
 
         {/* Use cases */}
         <Box sx={{ mt: sectionSpacing }}>
+          <Eyebrow label="Use cases" />
           <Typography
-            variant="h4"
-            sx={{ ...sectionTitleSx, textAlign: "center", mb: 3 }}
+            sx={{ ...sectionTitleSx, textAlign: "center", mb: { xs: 5, md: 7 } }}
             className="reveal"
           >
             What you can do right now
           </Typography>
           <Grid container spacing={3}>
             {useCases.map((useCase) => (
-              <Grid item xs={12} md={3} key={useCase.title}>
-                <Card
-                  sx={{
-                    height: "100%",
-                    borderRadius: 3,
-                    border: `1px solid ${palette.border}`,
-                    backgroundColor: palette.surface,
-                    boxShadow: "none",
-                  }}
-                  className="reveal"
-                >
-                  <CardContent>
-                    <Avatar
-                      sx={{ bgcolor: palette.accent, color: "white", mb: 2 }}
-                    >
-                      {useCase.icon}
-                    </Avatar>
+              <Grid item xs={12} sm={6} md={3} key={useCase.title}>
+                <Card sx={lightCardSx} className="reveal">
+                  <CardContent sx={{ p: { xs: 3, md: 3.5 } }}>
+                    <IconTile>{useCase.icon}</IconTile>
                     <Typography
-                      variant="subtitle1"
                       sx={{
                         font: "inherit",
                         fontWeight: 600,
+                        fontSize: "1.1rem",
+                        mt: 2,
                         mb: 1,
                         color: palette.textPrimary,
                       }}
@@ -1611,7 +1790,6 @@ const LandingPage = () => {
                       {useCase.title}
                     </Typography>
                     <Typography
-                      variant="body2"
                       sx={{ font: "inherit", color: palette.textSecondary }}
                     >
                       {useCase.description}
@@ -1623,19 +1801,18 @@ const LandingPage = () => {
           </Grid>
         </Box>
 
-        {/* In-app workflows */}
+        {/* Inside the workspace + privacy */}
         <Box sx={{ mt: sectionSpacing }}>
-          <Grid container spacing={4} alignItems="center">
+          <Grid container spacing={{ xs: 4, md: 6 }} alignItems="center">
             <Grid item xs={12} md={6}>
+              <Eyebrow label="Inside the workspace" align="left" />
               <Typography
-                variant="h4"
                 sx={{ ...sectionTitleSx, mb: 2 }}
                 className="reveal"
               >
-                Inside the workspace
+                Made for real work
               </Typography>
               <Typography
-                variant="body1"
                 sx={{ ...sectionSubtitleSx, mb: 3 }}
                 className="reveal"
               >
@@ -1644,24 +1821,27 @@ const LandingPage = () => {
               <Box
                 key={testimonialIndex}
                 sx={{
+                  p: 3,
+                  borderRadius: "18px",
+                  backgroundColor: palette.surfaceAlt,
+                  border: `1px solid ${palette.border}`,
                   animation: reduceMotion
                     ? "none"
                     : `${fadeSwap} 0.6s ease-out`,
                 }}
               >
                 <Typography
-                  variant="h6"
                   sx={{
-                    font: "inherit",
+                    fontFamily: displayFont,
                     fontWeight: 600,
-                    mb: 2,
+                    fontSize: "1.3rem",
+                    mb: 1,
                     color: palette.textPrimary,
                   }}
                 >
                   {testimonials[testimonialIndex].title}
                 </Typography>
                 <Typography
-                  variant="body1"
                   sx={{ font: "inherit", color: palette.textSecondary }}
                 >
                   {testimonials[testimonialIndex].description}
@@ -1669,7 +1849,7 @@ const LandingPage = () => {
               </Box>
               <Stack direction="row" spacing={1} sx={{ mt: 3 }}>
                 <IconButton
-                  aria-label="Previous testimonial"
+                  aria-label="Previous"
                   onClick={() =>
                     setTestimonialIndex(
                       (prev) =>
@@ -1684,7 +1864,7 @@ const LandingPage = () => {
                   <ArrowBackIosNew fontSize="small" />
                 </IconButton>
                 <IconButton
-                  aria-label="Next testimonial"
+                  aria-label="Next"
                   onClick={() =>
                     setTestimonialIndex(
                       (prev) => (prev + 1) % testimonials.length,
@@ -1701,27 +1881,22 @@ const LandingPage = () => {
             </Grid>
             <Grid item xs={12} md={6}>
               <Card
-                sx={{
-                  borderRadius: 4,
-                  border: `1px solid ${palette.border}`,
-                  backgroundColor: palette.surface,
-                  boxShadow: "none",
-                }}
+                sx={{ ...lightCardSx, borderRadius: "22px" }}
                 className="reveal"
               >
-                <CardContent>
+                <CardContent sx={{ p: { xs: 3, md: 4 } }}>
                   <Typography
-                    variant="subtitle1"
                     sx={{
                       font: "inherit",
                       fontWeight: 600,
-                      mb: 2,
+                      fontSize: "1.15rem",
+                      mb: 2.5,
                       color: palette.textPrimary,
                     }}
                   >
                     Data handling (from Privacy Policy)
                   </Typography>
-                  <Stack spacing={2}>
+                  <Stack spacing={2.5}>
                     {[
                       "Signed-in documents may be stored for later access.",
                       "Guest uploads are processed but not stored.",
@@ -1733,18 +1908,10 @@ const LandingPage = () => {
                         spacing={2}
                         alignItems="center"
                       >
-                        <Avatar
-                          sx={{
-                            bgcolor: palette.accent,
-                            color: "white",
-                            width: 32,
-                            height: 32,
-                          }}
-                        >
+                        <IconTile>
                           <Security fontSize="small" />
-                        </Avatar>
+                        </IconTile>
                         <Typography
-                          variant="body2"
                           sx={{ font: "inherit", color: palette.textSecondary }}
                         >
                           {item}
@@ -1758,129 +1925,248 @@ const LandingPage = () => {
           </Grid>
         </Box>
 
-        {/* FAQ */}
+        {/* FAQ — accordion */}
         <Box sx={{ mt: sectionSpacing }}>
+          <Eyebrow label="FAQ" />
           <Typography
-            variant="h4"
-            sx={{ ...sectionTitleSx, textAlign: "center", mb: 4 }}
+            sx={{ ...sectionTitleSx, textAlign: "center", mb: { xs: 5, md: 7 } }}
             className="reveal"
           >
             Answers at a glance
           </Typography>
-          <Grid container spacing={3}>
-            {faqs.map((faq) => (
-              <Grid item xs={12} md={6} key={faq.title}>
-                <Card
+          <Box sx={{ maxWidth: 820, mx: "auto" }} className="reveal">
+            {faqs.map((faq, i) => (
+              <Accordion
+                key={faq.title}
+                defaultExpanded={i === 0}
+                disableGutters
+                elevation={0}
+                sx={{
+                  mb: 1.5,
+                  borderRadius: "16px !important",
+                  border: `1px solid ${palette.border}`,
+                  backgroundColor: palette.surface,
+                  "&:before": { display: "none" },
+                  overflow: "hidden",
+                }}
+              >
+                <AccordionSummary
+                  expandIcon={<ExpandMore sx={{ color: palette.accent }} />}
                   sx={{
-                    height: "100%",
-                    borderRadius: 3,
-                    border: `1px solid ${palette.border}`,
-                    backgroundColor: palette.surface,
-                    boxShadow: "none",
+                    px: { xs: 2.5, md: 3 },
+                    py: 1,
+                    backgroundColor: "transparent",
+                    transition: "background-color 0.25s ease",
+                    "& .MuiAccordionSummary-content": { my: 1.5 },
+                    // Tighten the header→body gap when expanded (MUI defaults the
+                    // expanded content margin to 20px). Collapsed stays at 1.5.
+                    "& .MuiAccordionSummary-content.Mui-expanded": {
+                      mt: 1.5,
+                      mb: 0.25,
+                    },
+                    // No hover effect — neutralize the app-wide `button:hover`
+                    // red by keeping the background unchanged on hover.
+                    "&:hover": { backgroundColor: "transparent" },
                   }}
-                  className="reveal"
                 >
-                  <CardContent>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        font: "inherit",
-                        fontWeight: 600,
-                        mb: 1,
-                        color: palette.textPrimary,
-                      }}
-                    >
-                      {faq.title}
-                    </Typography>
-                    <Typography
-                      variant="body2"
-                      sx={{ font: "inherit", color: palette.textSecondary }}
-                    >
-                      {faq.description}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </Grid>
+                  <Typography
+                    sx={{
+                      font: "inherit",
+                      fontWeight: 600,
+                      fontSize: "1.05rem",
+                      color: palette.textPrimary,
+                    }}
+                  >
+                    {faq.title}
+                  </Typography>
+                </AccordionSummary>
+                <AccordionDetails sx={{ px: { xs: 2.5, md: 3 }, pt: 0, pb: 2.5 }}>
+                  <Typography
+                    sx={{ font: "inherit", color: palette.textSecondary }}
+                  >
+                    {faq.description}
+                  </Typography>
+                </AccordionDetails>
+              </Accordion>
             ))}
-          </Grid>
+          </Box>
         </Box>
+      </Container>
 
-        {/* CTA */}
+      {/* ===================== Dark 3D CTA bookend (full-bleed) ===================== */}
+      <Box
+        ref={ctaRef}
+        component="section"
+        sx={{
+          mt: sectionSpacing,
+          position: "relative",
+          zIndex: 1,
+          width: "100%",
+          minHeight: { xs: 560, md: 620 },
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          backgroundColor: palette.heroBg,
+          isolation: "isolate",
+        }}
+      >
+        <Box
+          sx={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none" }}
+        >
+          <Suspense fallback={null}>
+            <HeroExperience
+              reduceMotion={reduceMotion}
+              variant="cta"
+              paused={!ctaInView}
+            />
+          </Suspense>
+        </Box>
         <Box
           sx={{
-            mt: sectionSpacing,
-            mb: { xs: 6, md: 10 },
-            p: { xs: 3, md: 5 },
-            borderRadius: 4,
-            background: `linear-gradient(135deg, ${palette.accent}, #ff9d3f)`,
-            color: "white",
-            textAlign: "center",
-            boxShadow: palette.shadow,
+            position: "absolute",
+            inset: 0,
+            zIndex: 1,
+            pointerEvents: "none",
+            background:
+              "radial-gradient(ellipse 120% 100% at 50% 50%, rgba(10,6,3,0.62) 0%, rgba(10,6,3,0.32) 45%, rgba(10,6,3,0.6) 100%)",
           }}
-          className="reveal"
+        />
+        {/* top fade from the cream sections above */}
+        <Box
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: { xs: 90, md: 130 },
+            zIndex: 1,
+            pointerEvents: "none",
+            background: `linear-gradient(to bottom, ${palette.background}, transparent)`,
+          }}
+        />
+        <Container
+          maxWidth="md"
+          sx={{ position: "relative", zIndex: 2, textAlign: "center", py: 8 }}
         >
-          <Typography
-            variant="h4"
-            sx={{
-              font: "inherit",
-              fontWeight: 700,
-              mb: 2,
-              color: "white",
-              fontSize: { xs: "1.75rem", sm: "2.05rem", md: "2.35rem" },
-            }}
-          >
-            Ready to make documents instantly useful?
-          </Typography>
-          <Typography
-            variant="body1"
-            sx={{ font: "inherit", mb: 3, color: "white" }}
-          >
-            Start now and experience how DocuThinker turns information into
-            action.
-          </Typography>
-          <Stack
-            direction={{ xs: "column", sm: "row" }}
-            spacing={2}
-            justifyContent="center"
+          <Box
+            className="reveal"
+            sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
           >
-            <Button
-              component={Link}
-              to="/home"
-              variant="contained"
-              size="large"
+            <Eyebrow label="Get started" light />
+            <Typography
               sx={{
-                backgroundColor: "white",
-                color: palette.accent,
-                font: "inherit",
-                fontWeight: 700,
-                "&:hover": {
-                  backgroundColor: "#fff3e0",
-                },
+                fontFamily: displayFont,
+                fontWeight: 600,
+                fontSize: { xs: "2.4rem", sm: "3.2rem", md: "4rem" },
+                lineHeight: 1.12,
+                letterSpacing: "-0.02em",
+                color: palette.heroText,
+                mb: 2.5,
+                px: { xs: 1, sm: 0 },
+                pb: "0.12em",
+                textShadow: "0 2px 30px rgba(0,0,0,0.5)",
               }}
             >
-              Get Started
-            </Button>
-            <Button
-              component={Link}
-              to="/register"
-              variant="outlined"
-              size="large"
+              Ready to make documents{" "}
+              <Box
+                component="span"
+                sx={{
+                  display: "inline-block",
+                  pr: "0.14em",
+                  fontStyle: "italic",
+                  background:
+                    "linear-gradient(90deg, #ff8a1e, #ffd27f, #ff6a00)",
+                  backgroundSize: "200% auto",
+                  WebkitBackgroundClip: "text",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                  color: "transparent",
+                  animation: reduceMotion
+                    ? "none"
+                    : `${textShimmer} 6s linear infinite`,
+                }}
+              >
+                instantly useful
+              </Box>
+              ?
+            </Typography>
+            <Typography
               sx={{
-                borderColor: "white",
-                color: "white",
                 font: "inherit",
-                fontWeight: 700,
-                "&:hover": {
-                  borderColor: "white",
-                  backgroundColor: "rgba(255,255,255,0.15)",
-                },
+                color: palette.heroMuted,
+                fontSize: { xs: "1.05rem", md: "1.2rem" },
+                maxWidth: 560,
+                mb: 4,
               }}
             >
-              Create Account
-            </Button>
-          </Stack>
-        </Box>
-      </Container>
+              Start now and see how DocuThinker turns information into action —
+              no setup, no friction.
+            </Typography>
+            <Stack
+              direction={{ xs: "column", sm: "row" }}
+              spacing={2}
+              sx={{
+                width: { xs: "100%", sm: "auto" },
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Button
+                component={Link}
+                to="/register"
+                variant="contained"
+                size="large"
+                endIcon={<ArrowForward />}
+                sx={{
+                  backgroundColor: palette.accent,
+                  font: "inherit",
+                  fontWeight: 600,
+                  textTransform: "none",
+                  fontSize: "1.05rem",
+                  px: 4,
+                  py: 1.3,
+                  borderRadius: "999px",
+                  boxShadow: "0 12px 34px rgba(245,124,0,0.45)",
+                  transition: "transform 0.25s ease, box-shadow 0.25s ease",
+                  "&:hover": {
+                    backgroundColor: palette.accentDark,
+                    transform: "translateY(-2px)",
+                    boxShadow: "0 18px 44px rgba(245,124,0,0.55)",
+                  },
+                }}
+              >
+                Get Started
+              </Button>
+              <Button
+                component={Link}
+                to="/register"
+                variant="outlined"
+                size="large"
+                sx={{
+                  borderColor: palette.heroGlassBorder,
+                  color: palette.heroText,
+                  font: "inherit",
+                  fontWeight: 600,
+                  textTransform: "none",
+                  fontSize: "1.05rem",
+                  px: 4,
+                  py: 1.3,
+                  borderRadius: "999px",
+                  backgroundColor: "rgba(255,255,255,0.03)",
+                  backdropFilter: "blur(6px)",
+                  "&:hover": {
+                    borderColor: "#ffb066",
+                    backgroundColor: "rgba(255,138,26,0.1)",
+                  },
+                }}
+              >
+                Create Account
+              </Button>
+            </Stack>
+          </Box>
+        </Container>
+      </Box>
     </Box>
   );
 };
diff --git a/images/landing.png b/images/landing.png
index a703d2a..2f4a646 100644
Binary files a/images/landing.png and b/images/landing.png differ