Hero phone: black chassis + rounded screen, full screenshot (no crop)

Size the screen to the screenshot's 1080:2424 ratio so the whole frame
shows uncropped, and wrap it in a brushed-black phone body with a rim
highlight so it reads as a real embedded device.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

styles.css

@@ -250,24 +250,28 @@ nav.site svg { width: 17px; height: 17px; fill: currentColor; }
 
 .phone {
   position: relative;
-  width: 318px; height: 642px;
-  border-radius: 46px;
-  background: var(--surface);
-  border: 1px solid var(--line);
+  width: 312px;
+  border-radius: 52px;
+  /* brushed-black chassis with a top rim highlight */
+  background: linear-gradient(155deg, #202024, #050506 58%);
+  padding: 13px;
   box-shadow:
-    0 40px 80px -30px var(--shadow),
-    inset 0 0 0 7px var(--bg);
-  padding: 7px;
-  overflow: hidden;
+    0 46px 92px -34px var(--shadow),
+    0 8px 20px -10px rgba(0, 0, 0, 0.55),
+    inset 0 0 0 1.5px rgba(255, 255, 255, 0.07),
+    inset 0 2px 3px rgba(255, 255, 255, 0.12),
+    inset 0 -3px 5px rgba(0, 0, 0, 0.6);
   transform: rotate(2.4deg);
 }
 
+/* screen sized to the screenshot's 1080:2424 ratio so the whole frame
+   fits with no crop, clipped to the inner radius inside the bezel */
 .phone .screen {
   display: block;
-  width: 100%; height: 100%;
+  width: 286px; height: 642px;
   object-fit: cover;
-  object-position: top center;
   border-radius: 40px;
+  background: #000;
 }
 
 /* ---------- ciphertext rail ---------- */