From f9d331d2c36aee4d22caa81d307d5e17ce8c1f60 Mon Sep 17 00:00:00 2001
From: butler <butler@pka.world>
Date: Wed, 17 Jun 2026 01:45:23 -0400
Subject: [PATCH] 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 | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/styles.css b/styles.css
index f459e52..555b11a 100644
--- a/styles.css
+++ b/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 ---------- */