fix: replace missing hero image with an asset-free lattice

index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="/v1/policy/evaluate · /v1/verify · /v1/ledger — one substrate, hash-chained, deny by default."/>
   <meta property="og:title" content="a11oy — governance substrate · SZL Holdings"/>
   <meta property="og:description" content="/v1/policy/evaluate · /v1/verify · /v1/ledger — one substrate, hash-chained, deny by default."/>
-  <meta property="og:image" content="assets/hero_a11oy.png"/>
+  <meta name="theme-color" content="#080704"/>
   <meta property="og:type" content="website"/>
   <link rel="stylesheet" href="style.css"/>
   <link rel="stylesheet" href="brand-tokens.css"/>
@@ -68,8 +68,12 @@
         </a>
       </div>
 
-      <div class="hero-portrait">
-        <img src="assets/hero_a11oy.png" alt="a11oy painterly identity portrait" loading="eager"/>
+      <div class="hero-sigil" role="img" aria-label="A11oy governed lattice: a signed core inside two verification orbits">
+        <span class="sigil-core">A</span>
+        <span class="sigil-orbit sigil-orbit-one" aria-hidden="true"></span>
+        <span class="sigil-orbit sigil-orbit-two" aria-hidden="true"></span>
+        <span class="sigil-node sigil-node-one" aria-hidden="true"></span>
+        <span class="sigil-node sigil-node-two" aria-hidden="true"></span>
       </div>
     </div>
   </section>

landing/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="/v1/policy/evaluate · /v1/verify · /v1/ledger — one substrate, hash-chained, deny by default."/>
   <meta property="og:title" content="a11oy — governance substrate · SZL Holdings"/>
   <meta property="og:description" content="/v1/policy/evaluate · /v1/verify · /v1/ledger — one substrate, hash-chained, deny by default."/>
-  <meta property="og:image" content="assets/hero_a11oy.png"/>
+  <meta name="theme-color" content="#080704"/>
   <meta property="og:type" content="website"/>
   <link rel="stylesheet" href="style.css"/>
   <link rel="preconnect" href="https://fonts.googleapis.com"/>
@@ -63,8 +63,12 @@
         </a>
       </div>
 
-      <div class="hero-portrait">
-        <img src="assets/hero_a11oy.png" alt="a11oy painterly identity portrait" loading="eager"/>
+      <div class="hero-sigil" role="img" aria-label="A11oy governed lattice: a signed core inside two verification orbits">
+        <span class="sigil-core">A</span>
+        <span class="sigil-orbit sigil-orbit-one" aria-hidden="true"></span>
+        <span class="sigil-orbit sigil-orbit-two" aria-hidden="true"></span>
+        <span class="sigil-node sigil-node-one" aria-hidden="true"></span>
+        <span class="sigil-node sigil-node-two" aria-hidden="true"></span>
       </div>
     </div>
   </section>

landing/style.css

@@ -219,17 +219,59 @@ a { color: inherit; }
 }
 .btn-primary:hover { background: var(--gold-bright); }
 
-.hero-portrait {
+.hero-sigil {
+  position: relative;
+  width: min(220px, 60vw);
+  aspect-ratio: 1;
   margin: 3.5rem auto 0;
-  max-width: 220px;
-}
-.hero-portrait img {
-  width: 100%;
-  height: auto;
-  border-radius: 12px;
   border: 1px solid var(--gold-line);
-  display: block;
+  border-radius: 50%;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at center, rgba(215, 185, 107, 0.18), transparent 27%),
+    repeating-radial-gradient(circle at center, transparent 0 23px, rgba(215, 185, 107, 0.055) 24px 25px),
+    var(--ground);
+  box-shadow: inset 0 0 48px rgba(215, 185, 107, 0.08), 0 0 36px rgba(215, 185, 107, 0.07);
+}
+.sigil-core {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  z-index: 2;
+  display: grid;
+  width: 58px;
+  aspect-ratio: 1;
+  place-items: center;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--gold);
+  border-radius: 50%;
+  background: rgba(215, 185, 107, 0.08);
+  color: var(--gold-bright);
+  font: 500 24px/1 var(--mono);
+  box-shadow: 0 0 22px rgba(215, 185, 107, 0.25);
+}
+.sigil-orbit {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  border: 1px solid rgba(215, 185, 107, 0.32);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) rotate(-18deg);
+}
+.sigil-orbit-one { width: 126px; height: 76px; }
+.sigil-orbit-two { width: 78px; height: 154px; transform: translate(-50%, -50%) rotate(32deg); }
+.sigil-node {
+  position: absolute;
+  z-index: 3;
+  width: 7px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--gold-bright);
+  box-shadow: 0 0 9px var(--gold);
+  animation: sigilPulse 2.8s ease-in-out infinite;
 }
+.sigil-node-one { left: 22%; top: 35%; }
+.sigil-node-two { right: 20%; bottom: 30%; animation-delay: -1.4s; }
+@keyframes sigilPulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
+@media (prefers-reduced-motion: reduce) { .sigil-node, .live-dot, .eyebrow-dot { animation: none; } }
 
 /* ===== FOOTER ===== */
 .site-footer {

style.css

@@ -219,17 +219,59 @@ a { color: inherit; }
 }
 .btn-primary:hover { background: var(--gold-bright); }
 
-.hero-portrait {
+.hero-sigil {
+  position: relative;
+  width: min(220px, 60vw);
+  aspect-ratio: 1;
   margin: 3.5rem auto 0;
-  max-width: 220px;
-}
-.hero-portrait img {
-  width: 100%;
-  height: auto;
-  border-radius: 12px;
   border: 1px solid var(--gold-line);
-  display: block;
+  border-radius: 50%;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at center, rgba(215, 185, 107, 0.18), transparent 27%),
+    repeating-radial-gradient(circle at center, transparent 0 23px, rgba(215, 185, 107, 0.055) 24px 25px),
+    var(--ground);
+  box-shadow: inset 0 0 48px rgba(215, 185, 107, 0.08), 0 0 36px rgba(215, 185, 107, 0.07);
+}
+.sigil-core {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  z-index: 2;
+  display: grid;
+  width: 58px;
+  aspect-ratio: 1;
+  place-items: center;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--gold);
+  border-radius: 50%;
+  background: rgba(215, 185, 107, 0.08);
+  color: var(--gold-bright);
+  font: 500 24px/1 var(--mono);
+  box-shadow: 0 0 22px rgba(215, 185, 107, 0.25);
+}
+.sigil-orbit {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  border: 1px solid rgba(215, 185, 107, 0.32);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) rotate(-18deg);
+}
+.sigil-orbit-one { width: 126px; height: 76px; }
+.sigil-orbit-two { width: 78px; height: 154px; transform: translate(-50%, -50%) rotate(32deg); }
+.sigil-node {
+  position: absolute;
+  z-index: 3;
+  width: 7px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--gold-bright);
+  box-shadow: 0 0 9px var(--gold);
+  animation: sigilPulse 2.8s ease-in-out infinite;
 }
+.sigil-node-one { left: 22%; top: 35%; }
+.sigil-node-two { right: 20%; bottom: 30%; animation-delay: -1.4s; }
+@keyframes sigilPulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
+@media (prefers-reduced-motion: reduce) { .sigil-node, .live-dot, .eyebrow-dot { animation: none; } }
 
 /* ===== FOOTER ===== */
 .site-footer {

tests/test_landing_asset_contract.py

@@ -0,0 +1,26 @@
+from pathlib import Path
+import unittest
+
+
+ROOT = Path(__file__).resolve().parents[1]
+
+
+class LandingAssetContractTests(unittest.TestCase):
+    def test_both_landing_surfaces_are_asset_independent(self):
+        for relative in ("index.html", "landing/index.html"):
+            html = (ROOT / relative).read_text(encoding="utf-8")
+            with self.subTest(relative=relative):
+                self.assertNotIn("assets/hero_a11oy.png", html)
+                self.assertIn('class="hero-sigil"', html)
+                self.assertIn('role="img"', html)
+
+    def test_landing_styles_remain_in_sync(self):
+        root_css = (ROOT / "style.css").read_text(encoding="utf-8")
+        landing_css = (ROOT / "landing/style.css").read_text(encoding="utf-8")
+
+        self.assertEqual(root_css, landing_css)
+        self.assertIn("prefers-reduced-motion", root_css)
+
+
+if __name__ == "__main__":
+    unittest.main()