diff --git a/.env b/.env
index 04cb207..7a5a858 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
-DOMAIN=hoodquidity.154.83.149.72.nip.io
+DOMAIN=hoodquidity.com
DEPLOY=static
BUILD_DIR=apps/web/dist
WWW=false
diff --git a/apps/web/src/components/backdrop/DepthCanyon.tsx b/apps/web/src/components/backdrop/DepthCanyon.tsx
new file mode 100644
index 0000000..ecb6eec
--- /dev/null
+++ b/apps/web/src/components/backdrop/DepthCanyon.tsx
@@ -0,0 +1,143 @@
+/**
+ * DepthCanyon — a 2D isometric voxel crater. A blocky terrain of dark cubes
+ * carved by a glowing acid pit: market depth as a literal luminous hole in the
+ * ground. Deterministic heightmap, painter-ordered cubes, palette-only colors
+ * (dark faces from the neutral ramp, acid overlays for the emissive throat).
+ * One breathing core glow; everything else is static SVG.
+ */
+const VW = 1000;
+const VH = 780;
+const OX = 500;
+const OY = 224;
+const HW = 20; // iso tile half width
+const HH = 10; // iso tile half height (2:1)
+const CUBE_V = 14; // screen px per height unit
+const SK = 66; // uniform block skirt → voxel bodies, no pillars
+const R = 13; // grid radius in cells
+const PIT_R = 7; // pit radius in cells
+
+const DARK_TOP = "#2a2a2a";
+const DARK_L = "#080808";
+const DARK_R = "#161616";
+
+function hash(a: number, b: number) {
+ const x = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;
+ return x - Math.floor(x);
+}
+
+interface Cell {
+ z: number; // painter depth
+ x: number;
+ y: number;
+ glow: number; // 0 dark .. 1 molten
+}
+
+function build(): Cell[] {
+ const cells: Cell[] = [];
+ for (let gx = -R; gx <= R; gx++) {
+ for (let gy = -R; gy <= R; gy++) {
+ const d = Math.hypot(gx, gy);
+ if (d > R + 0.5) continue;
+
+ let h: number;
+ let glow = 0;
+ if (d < PIT_R) {
+ const ring = PIT_R - d;
+ h = -ring * 1.3; // funnel steps down, steeper
+ glow = Math.pow(Math.min(ring / PIT_R, 1), 0.7);
+ } else {
+ const rd = d - PIT_R;
+ const rim = Math.max(0, 1 - rd / 2);
+ // asymmetric crater: back rim tall, front lip low and open
+ const backness = Math.min(Math.max((-(gx + gy) / R) * 0.5 + 0.5, 0), 1);
+ const ridge = rim * 2.4 * (0.3 + 0.8 * backness);
+ const fall = Math.min(Math.max(1 - rd / 8, 0), 1);
+ const noise = Math.round((hash(gx, gy) + hash(gy, gx)) * 1.1) * fall;
+ h = ridge + noise;
+ }
+
+ const x = OX + (gx - gy) * HW;
+ const y = OY + (gx + gy) * HH - h * CUBE_V;
+ cells.push({ z: (gx + gy) * 1000 + gx, x, y, glow });
+ }
+ }
+ cells.sort((a, b) => a.z - b.z);
+ return cells;
+}
+
+const CELLS = build();
+const CORE_X = OX;
+const CORE_Y = OY + PIT_R * CUBE_V + 34;
+
+function Cube({ x, y, glow }: Cell) {
+ const top = `${x},${y - HH} ${x + HW},${y} ${x},${y + HH} ${x - HW},${y}`;
+ const left = `${x - HW},${y} ${x},${y + HH} ${x},${y + HH + SK} ${x - HW},${y + SK}`;
+ const right = `${x},${y + HH} ${x + HW},${y} ${x + HW},${y + SK} ${x},${y + HH + SK}`;
+ const hot = glow > 0.75;
+ return (
+ <>
+