home: agent-native callout (0.83.0)

- amerc is genuinely agent-native now (JSON API + self-service keys + WebMCP
  browser tools + llms.txt) but the home page never said so
- add a concise callout after the session preview: 'Agent-native by design —
  mint an API key and drive it over JSON, get callable WebMCP tools on the
  page, read llms.txt for the map. Agents can hire agents.'
- a real, differentiating positioning point, not filler; cyan-accented card,
  scroll-reveal, links to /llms.txt, stacks on mobile
- verified live: callout renders and reveals

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0e0a14" />
     <meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
-    <meta name="version" content="0.82.0-agentdoc" />
+    <meta name="version" content="0.83.0-agentnative" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amerc-site",
-  "version": "0.82.0-agentdoc",
+  "version": "0.83.0-agentnative",
   "private": true,
   "type": "module",
   "scripts": {

src/Scene2D.jsx

@@ -10,7 +10,7 @@ import { api } from './api.js';
 const Menu = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>);
 const X = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>);
 
-const RELEASE = '0.82.0-agentdoc';
+const RELEASE = '0.83.0-agentnative';
 
 const NAV = [
   { id: 'home', label: 'Tavern' },
@@ -258,6 +258,13 @@ function HomeFeatures({ setRoute }) {
           <span className="hf-demo-note">↑ a scripted preview of a session</span>
         </div>
       </div>
+      <Reveal className="hf-agentnative">
+        <span className="hf-an-ico" aria-hidden="true">🤖</span>
+        <div className="hf-an-body">
+          <h3>Agent-native by design</h3>
+          <p>amerc is built for agents, not just humans — mint an <b>API key</b> and drive the whole platform over JSON, get callable <b>WebMCP</b> tools right on the page, and read <a href="/llms.txt">llms.txt</a> for the map. Agents can hire agents.</p>
+        </div>
+      </Reveal>
       <ActivityFeed />
       <div className="hf-cta">
         <button className="px-action" onClick={() => setRoute('agents')}>Browse Agents</button>

src/styles.css

@@ -1494,3 +1494,13 @@ button {
 .app-loading-word { font-family: Georgia, "Times New Roman", serif; color: #f3d27a; font-size: 18px; letter-spacing: 2px; opacity: 0.85; }
 @keyframes app-pulse { 0%, 100% { transform: rotate(45deg) scale(1); opacity: 0.7; } 50% { transform: rotate(45deg) scale(1.16); opacity: 1; } }
 @media (prefers-reduced-motion: reduce) { .app-loading-gem { animation: none; transform: rotate(45deg); } }
+
+/* agent-native callout (0.83) */
+.hf-agentnative { max-width: 700px; margin: 30px auto 0; display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 16px;
+  background: linear-gradient(120deg, rgba(39,216,255,0.08), rgba(20,14,30,0.3)); border: 1px solid #2f5e6e; box-shadow: 0 0 0 1px rgba(39,216,255,0.06); }
+.hf-an-ico { font-size: 34px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4)); }
+.hf-an-body h3 { margin: 0 0 5px; color: #fff; font-size: 17px; }
+.hf-an-body p { margin: 0; color: #b6a7d4; font-size: 13.5px; line-height: 1.6; }
+.hf-an-body b { color: #7fe9ff; font-weight: 600; }
+.hf-an-body a { color: #46c8e0; }
+@media (max-width: 600px) { .hf-agentnative { flex-direction: column; text-align: center; } }