feat: add privacy & security trust badges to /hire page

- 4 trust badges: E2E encryption, SOL escrow, stake slashing, on-chain proof
- Tracking events now show encryption/security steps
- Mobile responsive grid

Author: jimmdd

client/src/Hire.css

@@ -411,10 +411,53 @@
   text-align: center;
 }
 
+/* ── Trust & Security Section ────────── */
+.hire-trust {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+  max-width: 640px;
+  margin: 2.5rem auto 0;
+}
+.hire-trust-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.7rem;
+  padding: 0.9rem 1rem;
+  background: rgba(30, 41, 59, 0.35);
+  border: 1px solid rgba(52, 211, 153, 0.08);
+  border-radius: 12px;
+  transition: border-color 0.3s;
+}
+.hire-trust-item:hover {
+  border-color: rgba(52, 211, 153, 0.2);
+}
+.hire-trust-icon {
+  font-size: 1.3rem;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+}
+.hire-trust-item div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+.hire-trust-item strong {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #e2e8f0;
+}
+.hire-trust-item span {
+  font-size: 0.68rem;
+  color: #64748b;
+  line-height: 1.35;
+}
+
 /* ── Responsive ──────────────────────── */
 @media (max-width: 640px) {
   .hire-hero h1 { font-size: 1.8rem; }
   .hire-agent-card { grid-template-columns: 1fr; gap: 0.8rem; }
   .hire-agent-cta { flex-direction: row; align-items: center; }
   .hire-status-label { font-size: 0.55rem; }
+  .hire-trust { grid-template-columns: 1fr; }
 }

client/src/Hire.tsx

@@ -216,13 +216,14 @@ export default function Hire() {
     const addEv = (text: string) => setTrackEvents(prev => [...prev, { time: now(), text }])
 
     // Simulate lifecycle
-    setTimeout(() => { setTrackingStatus(1); addEv(`Job created — ${agent.price} SOL escrowed`) }, 600)
+    setTimeout(() => { setTrackingStatus(1); addEv(`Job created — ${agent.price} SOL escrowed in PDA`) }, 600)
+    setTimeout(() => { addEv('🔐 Task data encrypted (NaCl box) — stored in credential vault') }, 1300)
     setTimeout(() => { setTrackingStatus(2); addEv(`${agent.name} matched & accepted`) }, 2000)
-    setTimeout(() => { setTrackingStatus(3); addEv(`${agent.name} staked 0.05 SOL — working...`) }, 3500)
-    setTimeout(() => { addEv('Processing input data...') }, 5000)
+    setTimeout(() => { setTrackingStatus(3); addEv(`${agent.name} staked 0.05 SOL as collateral — working...`) }, 3500)
+    setTimeout(() => { addEv('🔒 Processing encrypted input data...') }, 5000)
     setTimeout(() => { addEv('Generating output...') }, 7000)
-    setTimeout(() => { setTrackingStatus(4); addEv('Proof submitted on-chain') }, 9000)
-    setTimeout(() => { setShowApprove(true); addEv('Ready for review — approve to release payment') }, 10000)
+    setTimeout(() => { setTrackingStatus(4); addEv('🛡️ Proof hash submitted on-chain — verifiable on Solscan') }, 9000)
+    setTimeout(() => { setShowApprove(true); addEv('Ready for review — approve to release escrowed SOL') }, 10000)
   }
 
   function handleApprove() {
@@ -300,6 +301,38 @@ export default function Hire() {
             >
               Find Agents →
             </button>
+
+            {/* Trust & Security Badges */}
+            <div className="hire-trust">
+              <div className="hire-trust-item">
+                <span className="hire-trust-icon">🔐</span>
+                <div>
+                  <strong>End-to-End Encrypted</strong>
+                  <span>Task data encrypted with NaCl box — only you and the agent can read it</span>
+                </div>
+              </div>
+              <div className="hire-trust-item">
+                <span className="hire-trust-icon">🏦</span>
+                <div>
+                  <strong>SOL Escrow Protection</strong>
+                  <span>Funds locked in on-chain PDA — released only after verified completion</span>
+                </div>
+              </div>
+              <div className="hire-trust-item">
+                <span className="hire-trust-icon">⚔️</span>
+                <div>
+                  <strong>Stake Slashing</strong>
+                  <span>Agents stake SOL as collateral — slashed if work is rejected</span>
+                </div>
+              </div>
+              <div className="hire-trust-item">
+                <span className="hire-trust-icon">🛡️</span>
+                <div>
+                  <strong>On-Chain Proof</strong>
+                  <span>Every result is hashed and verified on Solana — no trust required</span>
+                </div>
+              </div>
+            </div>
           </section>
         </>
       )}