diff --git a/home.css b/home.css
index 86e2d57..df36d2d 100644
--- a/home.css
+++ b/home.css
@@ -455,18 +455,32 @@
   71% { transform: translate(-13%, -5%); }
   85% { transform: translate(5%, 9%); }
 }
-.principles__mark { position: relative; justify-self: center; width: 9rem; margin: var(--space-xl) 0 var(--space-lg); }
-.principles__mark picture { position: relative; z-index: 1; display: block; animation: mark-float 7s var(--ease-in-out) infinite alternate; }
-.principles__orbits { position: absolute; z-index: 0; left: 50%; top: 50%; width: 175%; height: auto; aspect-ratio: 1; translate: -50% -50%; overflow: visible; }
-.principles__orbits * { fill: none; stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
-.principles__orbits .orb__node { fill: var(--color-ink-2); stroke: none; }
-.principles__orbits .orb__node--lit { fill: var(--color-accent); }
-.pm__outer, .pm__ring { transform-box: view-box; transform-origin: 50% 50%; }
-.pm__outer { animation: orbit-turn 90s linear infinite; }
-.pm__ring { transform: rotate(var(--spin)); }
+.principles__mark { position: relative; justify-self: center; width: min(14rem, 62vw); margin: var(--space-lg) 0; }
+/* the mark, redrawn as a vector: crisp at any size, parts move on their own */
+.m4 { display: block; width: 100%; height: auto; overflow: visible; animation: mark-float 7s var(--ease-in-out) infinite alternate; }
+.m4 * { vector-effect: non-scaling-stroke; }
+.m4__dots { fill: none; stroke: var(--color-muted); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
+.m4__speck { fill: var(--color-ink); }
+.m4__speck--ember { fill: var(--color-accent); }
+.m4__rings circle { fill: none; stroke: var(--color-ink-2); stroke-width: 1.4; }
+.m4__rings circle:first-child { stroke-width: 1.8; }
+.m4__arc { fill: none; stroke: var(--color-ink); stroke-width: 3.2; stroke-linecap: round; }
+.m4__tick { stroke: var(--color-ink); stroke-width: 1.4; }
+.m4__axis { fill: none; stroke: var(--color-ink-2); stroke-width: 1.8; }
+.m4__cap circle { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.8; }
+.m4__cap .m4__cap-dot { fill: var(--color-ink); stroke: none; }
+.m4__ember { fill: var(--color-accent); filter: url(#m4-glow); }
+.m4__halo { fill: none; stroke: var(--color-ink); stroke-width: 1.6; }
+.m4__core { fill: var(--color-ink); filter: url(#m4-glow); }
+.m4__outer, .m4__spin { transform-box: view-box; transform-origin: 50% 50%; }
+.m4__outer { animation: orbit-turn 90s linear infinite; }
+.m4__spin { transform: rotate(var(--spin)); }
+.m4__ember { animation: ember-pulse 3.6s var(--ease-in-out) infinite alternate; }
+.m4__ember--axis { animation-delay: -1.8s; }
+@keyframes ember-pulse { from { opacity: 0.7; } to { opacity: 1; } }
 /* the mark acquires its signal: noisy and blurred, then sharp */
-.js .principles:not(.is-revealed) .principles__mark img { opacity: 0.25; filter: blur(8px) contrast(1.6); }
-.principles.is-revealed .principles__mark img { animation: acquire 1500ms var(--ease-out) both; }
+.js .principles:not(.is-revealed) .principles__mark .m4 { opacity: 0.25; filter: blur(8px) contrast(1.6);  animation: unveil 0s 8s forwards; }
+.principles.is-revealed .principles__mark .m4 { animation: acquire 1500ms var(--ease-out) both, mark-float 7s var(--ease-in-out) 1500ms infinite alternate; }
 @keyframes acquire {
   0% { opacity: 0.25; filter: blur(8px) contrast(1.6); transform: translateX(-7px); }
   8% { transform: translateX(6px); }
@@ -475,6 +489,7 @@
   30% { transform: none; }
   100% { opacity: 1; filter: none; transform: none; }
 }
+@keyframes unveil { to { opacity: 1; filter: none; } } /* safety net: never stay blurred */
 @keyframes mark-float { from { transform: translateY(4px); } to { transform: translateY(-8px); } }
 @keyframes orbit-turn { to { transform: rotate(360deg); } }
 @keyframes principles-spin { from { --spin: -60deg; } to { --spin: 60deg; } }
@@ -486,8 +501,8 @@
 .principles strong { font-weight: 500; font-size: var(--text-md); }
 .principles li p { color: var(--color-ink-2); }
 @media (min-width: 62rem) {
-  .principles { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; column-gap: var(--space-2xl); }
-  .principles__mark { justify-self: start; width: 100%; max-width: 13rem; margin: var(--space-xl) 0 0 var(--space-xl); }
+  .principles { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; column-gap: var(--space-2xl); }
+  .principles__mark { justify-self: center; width: 100%; max-width: 20rem; margin: var(--space-xl) 0 0 var(--space-xl); }
   .principles ol { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr); column-gap: var(--space-xl); }
 }
 
@@ -521,7 +536,7 @@
     .hero__moves-inner { animation: drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 90%; }
     .hero-grid::before { animation: floor linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
     .map { animation-play-state: running; }
-    .principles__orbits { animation: principles-spin linear both; animation-timeline: --principles; }
+    .principles__mark { animation: principles-spin linear both; animation-timeline: --principles; }
   }
 }
 @keyframes hero-spin { to { --spin: 140deg; } }
@@ -529,8 +544,8 @@
 @keyframes floor { to { transform: rotateX(72deg) translateY(128px); } }
 
 @media (prefers-reduced-motion: reduce) {
-  .principles__static::before, .principles__mark picture, .pm__outer, .principles.is-revealed .principles__mark img { animation: none !important; }
-  .js .principles .principles__mark img { opacity: 1 !important; filter: none !important; }
+  .principles__static::before, .m4, .m4__outer, .m4__ember, .principles.is-revealed .principles__mark .m4 { animation: none !important; }
+  .js .principles .principles__mark .m4 { opacity: 1 !important; filter: none !important; }
   .mz__highway.is-revealed { animation: none !important; }
   [data-reveal] .enc__corner { transform: none !important; }
 }
diff --git a/index.html b/index.html
index 256c3b2..fb0041e 100644
--- a/index.html
+++ b/index.html
@@ -146,13 +146,18 @@ <h2 id="programs-title">Supported by</h2>
 <section class="principles" aria-labelledby="principles-title" data-reveal data-principles>
   <div class="principles__static" aria-hidden="true"></div>
   <figure class="principles__mark">
-    <svg class="principles__orbits" viewBox="0 0 400 400" aria-hidden="true" focusable="false">
-      <g class="pm__outer"><circle cx="200" cy="200" r="194" stroke-dasharray="2 7"/><circle class="orb__node" cx="200" cy="6" r="3"/></g>
-      <g class="pm__ring"><circle cx="200" cy="200" r="150"/><circle class="orb__node orb__node--lit" cx="350" cy="200" r="5"/><circle class="orb__node" cx="94" cy="306" r="3.5"/></g>
-      <circle cx="200" cy="200" r="104" stroke-dasharray="1 5"/>
+    <svg class="m4" viewBox="80 80 640 640" aria-hidden="true" focusable="false">
+      <defs><filter id="m4-glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
+      <g class="m4__outer"><circle class="m4__dots" cx="400" cy="400" r="205"/><circle class="m4__speck" cx="502.5" cy="222.5" r="4.5"/><circle class="m4__speck m4__speck--ember" cx="598.0" cy="453.1" r="5"/><circle class="m4__speck" cx="222.5" cy="502.5" r="4"/></g>
+      <g class="m4__rings"><circle cx="400" cy="400" r="160"/><circle cx="400" cy="400" r="108"/><circle cx="400" cy="400" r="92"/></g>
+      <g class="m4__spin"><path class="m4__arc" d="M339.9 287.0A128 128 0 0 1 460.1 287.0 M460.1 513.0A128 128 0 0 1 339.9 513.0 M520.3 356.2A128 128 0 0 1 525.2 426.6 M274.8 426.6A128 128 0 0 1 279.7 356.2 M279.7 356.2A128 128 0 0 1 291.4 332.2 M513.0 460.1A128 128 0 0 1 498.1 482.3"/><path class="m4__tick" d="M470.7 470.7L482.0 482.0"/><path class="m4__tick" d="M329.3 470.7L318.0 482.0"/><path class="m4__tick" d="M329.3 329.3L318.0 318.0"/><path class="m4__tick" d="M470.7 329.3L482.0 318.0"/><circle class="m4__ember" cx="488.4" cy="488.4" r="8"/><circle class="m4__ember" cx="311.6" cy="488.4" r="8"/><circle class="m4__ember" cx="311.6" cy="311.6" r="8"/><circle class="m4__ember" cx="488.4" cy="311.6" r="8"/></g>
+      <path class="m4__axis" d="M400 119V366M400 434V681M179 400H366M434 400H621"/>
+      <path class="m4__arc m4__arc--cap" d="M360.5 214.2A190 190 0 0 1 439.5 214.2 M439.5 585.8A190 190 0 0 1 360.5 585.8"/>
+      <circle class="m4__ember m4__ember--axis" cx="400" cy="210" r="10"/><circle class="m4__ember m4__ember--axis" cx="400" cy="590" r="10"/>
+      <g class="m4__cap"><circle cx="400" cy="108" r="11"/><circle class="m4__cap-dot" cx="400" cy="108" r="5"/></g><g class="m4__cap"><circle cx="400" cy="692" r="11"/><circle class="m4__cap-dot" cx="400" cy="692" r="5"/></g><g class="m4__cap"><circle cx="168" cy="400" r="11"/><circle class="m4__cap-dot" cx="168" cy="400" r="5"/></g><g class="m4__cap"><circle cx="632" cy="400" r="11"/><circle class="m4__cap-dot" cx="632" cy="400" r="5"/></g>
+      <circle class="m4__halo" cx="400" cy="400" r="33"/><circle class="m4__core" cx="400" cy="400" r="25"/>
     </svg>
-    <picture><source srcset="assets/brand/zero_state_mark_4_640.webp" type="image/webp">
-    <img src="assets/danny-email-bundle/retina/zero_state_mark_4_retina.png" alt="" width="459" height="640" loading="lazy" decoding="async"></picture></figure>
+  </figure>
   <div class="principles__copy">
     <h2 id="principles-title">See clearly.<span>Build deliberately.</span></h2>
     <ol role="list"><li><strong>Creativity</strong><p>Perceives possibility and gives it form.</p></li><li><strong>Curiosity</strong><p>Finds what inherited assumptions cannot explain.</p></li><li><strong>Authenticity</strong><p>Keeps perception, judgment, expression, and action coherent.</p></li></ol>
diff --git a/sitemap.xml b/sitemap.xml
index c2c8696..622c35d 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,7 +2,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://zer0state.com/</loc>
-    <lastmod>2026-10-05</lastmod>
+    <lastmod>2026-10-06</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>