Hero: show real app screenshot inside the phone frame

Replace the CSS-drawn wallet UI in the hero phone mockup with the
actual app screenshot (assets/screenshot.png), clipped to the screen
radius inside the bezel. Removes the now-dead inner-phone CSS.

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

index.html

@@ -72,42 +72,7 @@
 
       <div class="phone-wrap" aria-hidden="true">
         <div class="phone">
-          <div class="notch"></div>
-          <div class="p-head">
-            <span class="w">Goblin</span>
-            <span class="av"></span>
-          </div>
-          <div class="balance">
-            <div class="eyebrow">Balance</div>
-            <div class="amt">4.2069<span class="tsu">ツ</span></div>
-            <div class="fiat">≈ $0.11 · 1ツ = $0.026</div>
-          </div>
-          <div class="pr-row">
-            <div class="pr pay">Pay</div>
-            <div class="pr req">Request</div>
-          </div>
-          <div class="act">
-            <div class="row">
-              <span class="dot" style="background:linear-gradient(135deg,#5BB0D9,#3D7FA6)"></span>
-              <span class="who"><b>mira</b><i>arrived sealed · just now</i></span>
-              <span class="val in">+0.5ツ</span>
-            </div>
-            <div class="row">
-              <span class="dot" style="background:linear-gradient(135deg,#9D8BE8,#6C58C4)"></span>
-              <span class="who"><b>kit</b><i>delivered over Nym · 2h</i></span>
-              <span class="val">−1.2ツ</span>
-            </div>
-            <div class="row">
-              <span class="dot" style="background:linear-gradient(135deg,#E8854B,#C25A2E)"></span>
-              <span class="who"><b>npub1g0b…l1n</b><i>finalized · yesterday</i></span>
-              <span class="val in">+2.0ツ</span>
-            </div>
-          </div>
-          <div class="tabbar">
-            <span class="t"><svg viewBox="0 0 24 24"><path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1v-9.5z"/></svg></span>
-            <span class="puck">ツ</span>
-            <span class="t"><svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/></svg></span>
-          </div>
+          <img class="screen" src="assets/screenshot.png" alt="" loading="lazy" decoding="async">
         </div>
       </div>
     </section>

styles.css

@@ -257,59 +257,19 @@ nav.site svg { width: 17px; height: 17px; fill: currentColor; }
   box-shadow:
     0 40px 80px -30px var(--shadow),
     inset 0 0 0 7px var(--bg);
-  padding: 20px 17px;
-  display: flex; flex-direction: column;
+  padding: 7px;
+  overflow: hidden;
   transform: rotate(2.4deg);
 }
 
-.phone .notch {
-  width: 96px; height: 22px; border-radius: 99px;
-  background: var(--bg); margin: 2px auto 18px; flex: none;
+.phone .screen {
+  display: block;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  object-position: top center;
+  border-radius: 40px;
 }
 
-.phone .p-head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
-.phone .p-head .w { font-family: var(--serif); letter-spacing: 0.3em; font-size: 13px; text-transform: uppercase; }
-.phone .p-head .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #E8854B, #C25A2E); }
-
-.phone .balance { text-align: center; margin: 44px 0 6px; }
-.phone .balance .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--mute); text-transform: uppercase; }
-.phone .balance .amt { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
-.phone .balance .amt .tsu { color: var(--accent-deep); font-weight: 400; }
-@media (prefers-color-scheme: dark) { .phone .balance .amt .tsu { color: var(--accent); } }
-.phone .balance .fiat { font-family: var(--mono); font-size: 12px; color: var(--mute); margin-top: 4px; }
-
-.phone .pr-row { display: flex; gap: 10px; margin: 26px 8px 30px; }
-.phone .pr-row .pr {
-  flex: 1; text-align: center; padding: 13px 0; border-radius: 13px;
-  font-weight: 600; font-size: 15px;
-}
-.phone .pr-row .pay { background: var(--accent); color: var(--ink); }
-.phone .pr-row .req { background: var(--surface-2); }
-
-.phone .act { padding: 0 8px; display: flex; flex-direction: column; gap: 16px; }
-.phone .act .row { display: flex; align-items: center; gap: 12px; }
-.phone .act .dot { width: 34px; height: 34px; border-radius: 50%; flex: none; }
-.phone .act .who { flex: 1; min-width: 0; }
-.phone .act .who b { display: block; font-size: 14px; font-weight: 600; }
-.phone .act .who i { display: block; font-style: normal; font-size: 11.5px; color: var(--mute); }
-.phone .act .val { font-family: var(--mono); font-size: 13px; }
-.phone .act .val.in { color: #58B368; }
-
-.phone .tabbar {
-  margin-top: auto;
-  display: flex; align-items: center; justify-content: space-around;
-  background: var(--surface-2); border-radius: 99px; padding: 9px 12px;
-}
-.phone .tabbar .t { width: 20px; height: 20px; opacity: 0.45; }
-.phone .tabbar .puck {
-  width: 44px; height: 44px; border-radius: 50%;
-  background: var(--accent); color: var(--ink);
-  display: flex; align-items: center; justify-content: center;
-  font-weight: 700; font-size: 19px;
-  box-shadow: 0 8px 18px -6px var(--accent-deep);
-}
-.phone .tabbar svg { width: 100%; height: 100%; fill: var(--text); }
-
 /* ---------- ciphertext rail ---------- */
 
 .rail-sec { padding: 30px 0 10px; }