File size: 24,480 Bytes
ab1b5f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Governance Trust Deeds β SnapKitty Resonance</title>
<meta name="description" content="Cryptographic proof that your AI behaved correctly. APL reduction across 6 geometric primitives. Ed25519 signed. WORM sealed. Sovereign." />
<meta property="og:title" content="AI Governance Trust Deeds β SnapKitty" />
<meta property="og:description" content="Proof your AI behaved. Mathematically. APL reduction. WORM sealed. Ed25519 signed." />
<meta property="og:type" content="website" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@700;800;900&display=swap" rel="stylesheet" />
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#020205;--panel:#08080f;--border:#16161f;
--gold:#C9A84C;--gold2:#FFD700;--dim:#7f6a31;
--white:#e2e8f0;--muted:#3f3f5c;
--green:#34D399;--red:#f43f5e;--purple:#a78bfa;--cyan:#22d3ee;
--mono:'Space Mono','Courier New',monospace;
--syne:'Syne',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:var(--mono);min-height:100vh}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--mono)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
/* NAV */
nav{border-bottom:1px solid var(--border);padding:14px 32px;display:flex;align-items:center;gap:24;position:sticky;top:0;z-index:100;background:var(--bg)cc;backdrop-filter:blur(8px)}
nav .logo{color:var(--gold);font-size:11px;letter-spacing:.2em}
nav .dot{color:var(--muted);font-size:9px}
nav .page-title{color:var(--white);font-size:10px;letter-spacing:.15em}
nav .nav-links{margin-left:auto;display:flex;gap:16px}
nav .nav-links a{color:var(--muted);font-size:9px;letter-spacing:.15em;transition:color .2s}
nav .nav-links a:hover{color:var(--gold)}
nav .nav-links a.cta{color:var(--gold)}
/* HERO */
.hero{padding:80px 32px 60px;text-align:center;max-width:900px;margin:0 auto}
.hero .eyebrow{font-size:11px;color:var(--gold);letter-spacing:.35em;margin-bottom:24px}
.formula{font-family:var(--mono);font-size:clamp(32px,6vw,72px);color:var(--gold);letter-spacing:.1em;line-height:1.1;text-shadow:0 0 40px #C9A84C66,0 0 80px #C9A84C33;margin-bottom:16px}
.formula-sub{font-size:11px;color:var(--dim);letter-spacing:.2em;margin-bottom:40px}
.hero h1{font-family:var(--syne);font-size:clamp(28px,4vw,52px);font-weight:900;color:var(--white);line-height:1.15;margin-bottom:20px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{font-size:13px;color:var(--muted);line-height:1.8;max-width:620px;margin:0 auto 48px}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-primary{padding:14px 32px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.2em;font-family:var(--mono);transition:opacity .2s}
.btn-primary:hover{opacity:.85}
.btn-outline{padding:14px 32px;border:1px solid #C9A84C44;color:var(--gold);font-size:11px;letter-spacing:.2em;transition:border-color .2s}
.btn-outline:hover{border-color:var(--gold)}
/* SECTIONS */
section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:60px 32px}
section+section{border-top:none}
.section-inner{max-width:1100px;margin:0 auto}
.section-inner.narrow{max-width:900px}
.section-eyebrow{font-size:9px;color:var(--gold);letter-spacing:.35em;margin-bottom:12px;text-align:center}
.section-title{font-family:var(--syne);font-weight:800;color:var(--white);text-align:center}
/* PRIMITIVES GRID */
.primitives-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:48px}
.primitive{padding:28px 24px;background:var(--panel);border:1px solid var(--border);transition:all .4s ease}
.primitive.active{background:#C9A84C08;border-color:#C9A84C44}
.prim-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.prim-glyph{font-size:32px;color:var(--dim);transition:all .4s ease;width:40px}
.primitive.active .prim-glyph{color:var(--gold);text-shadow:0 0 20px #C9A84C88}
.prim-name{font-size:11px;color:var(--muted);letter-spacing:.2em;transition:color .4s}
.primitive.active .prim-name{color:var(--gold)}
.prim-index{font-size:9px;color:var(--muted);margin-top:2px}
.prim-status{margin-left:auto;font-size:10px;color:var(--muted);letter-spacing:.1em;transition:color .4s}
.primitive.active .prim-status{color:var(--green)}
.prim-desc{font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:12px}
.prim-gate{font-size:9px;color:var(--dim);letter-spacing:.1em}
.reduction-bar{margin-top:24px;padding:20px 24px;background:#34D39908;border:1px solid #34D39933;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.reduction-omega{font-family:var(--mono);font-size:20px;color:var(--green);letter-spacing:.1em}
.reduction-desc{font-size:10px;color:var(--muted)}
.reduction-tag{margin-left:auto;font-size:9px;color:var(--green);letter-spacing:.2em}
/* DEED CARD */
.deed-card{background:var(--panel);border:1px solid var(--border);padding:24px}
.deed-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:14px}
.deed-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.deed-status{font-size:9px;color:var(--green);letter-spacing:.2em}
.copy-btn{margin-left:auto;padding:4px 12px;font-size:9px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:var(--mono);letter-spacing:.1em;transition:color .2s}
.copy-btn:hover,.copy-btn.copied{color:var(--green)}
.deed-body{font-size:11px;line-height:2}
.deed-row{display:flex;gap:16px}
.deed-key{color:var(--dim);min-width:80px}
.deed-val{color:var(--white)}
.deed-val.valid{color:var(--green)}
.deed-val.seal{color:var(--gold)}
.deed-val.reduction{color:var(--purple)}
.deed-metrics{margin-top:16px;display:flex;gap:24px;font-size:10px;color:var(--muted);flex-wrap:wrap}
.deed-metrics span em{color:var(--green);font-style:normal}
/* WHO NEEDS */
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:32px}
.who-card{padding:20px;background:var(--panel);border:1px solid var(--border)}
.who-icon{font-size:20px;margin-bottom:8px}
.who-title{font-size:11px;color:var(--white);letter-spacing:.1em;margin-bottom:8px}
.who-why{font-size:10px;color:var(--muted);line-height:1.7}
/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;margin-top:48px}
.price-card{padding:32px 24px;background:var(--panel);display:flex;flex-direction:column}
.price-name{font-size:9px;letter-spacing:.25em;margin-bottom:16px}
.price-amount{font-family:var(--syne);font-size:40px;font-weight:900;color:var(--white);line-height:1}
.price-unit{font-size:9px;color:var(--muted);margin:4px 0 28px;letter-spacing:.1em}
.price-features{flex:1}
.price-feature{display:flex;gap:10px;margin-bottom:10px;font-size:10px}
.price-feature .bullet{flex-shrink:0}
.price-feature .feat-text{color:var(--muted)}
.price-cta{display:block;margin-top:28px;padding:12px 0;text-align:center;font-size:10px;letter-spacing:.2em;font-weight:700;transition:opacity .2s}
.price-cta:hover{opacity:.85}
/* MATH */
.math-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
@media(max-width:600px){.math-grid{grid-template-columns:1fr}}
.math-label{font-size:9px;color:var(--dim);letter-spacing:.2em;margin-bottom:16px}
.code-block{background:var(--panel);border:1px solid var(--border);padding:20px;font-size:13px;line-height:2.2}
.code-comment{font-size:10px;color:var(--muted)}
.code-error{font-size:10px;color:var(--red)}
.code-muted{font-size:10px;color:var(--muted);margin-top:8px}
.prolog-block{grid-column:1/-1}
/* STACK */
.stack-table{background:var(--panel);border:1px solid var(--border);padding:28px;font-size:11px;line-height:2.5;font-family:var(--mono)}
.stack-row{display:flex;gap:24px;border-bottom:1px solid var(--border);padding-bottom:4px;flex-wrap:wrap}
.stack-name{min-width:320px}
.stack-desc{font-size:10px;color:var(--muted)}
/* CTA */
.final-cta{padding:80px 32px;text-align:center}
.final-cta h2{font-family:var(--syne);font-size:36px;font-weight:900;color:var(--white);margin-bottom:16px}
.final-cta p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:40px}
.final-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.omega-seal{font-size:18px;color:var(--gold);letter-spacing:.15em;text-shadow:0 0 20px #C9A84C66}
.seal-sub{font-size:9px;color:var(--muted);margin-top:8px;letter-spacing:.2em}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a href="https://collectivekitty.com" class="logo">β SNAPKITTY</a>
<span class="dot">Β·</span>
<span class="page-title">AI GOVERNANCE TRUST DEEDS</span>
<div class="nav-links">
<a href="https://snapkittywest.github.io/sovereign-vm/" >VM</a>
<a href="https://collectivekitty.com/constellation">CONSTELLATION</a>
<a href="https://collectivekitty.com/contact" class="cta">CONTACT</a>
</div>
</nav>
<!-- HERO -->
<div class="hero">
<div class="eyebrow">RESONANCE ISA Β· APL GEOMETRY Β· WORM CHAIN</div>
<div class="formula">Ξ©ββΉβ§ββ§ββ§β³β§β¬‘</div>
<div class="formula-sub">AND-FOLD ACROSS SIX GEOMETRIC PRIMITIVES β ONE BIT β VALID OR NOT VALID</div>
<h1>Proof your AI behaved.<br><em>Mathematically.</em></h1>
<p>Every AI execution produces a cryptographic trust deed. Six geometric primitives. APL reduction to a single bit. Ed25519 signed. WORM sealed. No one can forge it. No one can delete it.</p>
<div class="hero-btns">
<a href="https://snapkittywest.github.io/sovereign-vm/" class="btn-primary">GENERATE A DEED β</a>
<a href="#how-it-works" class="btn-outline">HOW IT WORKS</a>
</div>
</div>
<!-- THE SIX PRIMITIVES -->
<section id="how-it-works">
<div class="section-inner">
<div class="section-eyebrow">THE SIX PRIMITIVES</div>
<div class="section-title" style="font-size:28px">Every deed must pass all six. No exceptions.</div>
<div class="primitives-grid" id="primitives-grid">
<!-- injected by JS -->
</div>
<div class="reduction-bar">
<div class="reduction-omega">Ξ© = 1</div>
<div class="reduction-desc">All six primitives passed. AND-fold resolves to 1. Trust deed issued. Seal appended to WORM chain.</div>
<div class="reduction-tag">meta_block(valid)</div>
</div>
</div>
</section>
<!-- EXAMPLE DEED -->
<section>
<div class="section-inner narrow">
<div class="section-eyebrow" style="text-align:left;margin-bottom:8px">EXAMPLE TRUST DEED</div>
<div class="section-title" style="text-align:left;font-size:24px;margin-bottom:32px">This is what you get. Immutable. Signed. Sealed.</div>
<div class="deed-card">
<div class="deed-header">
<div class="deed-dot"></div>
<span class="deed-status">VALID DEED Β· WORM SEALED</span>
<button class="copy-btn" id="copy-btn">COPY JSON</button>
</div>
<div class="deed-body" id="deed-body">
<!-- injected by JS -->
</div>
</div>
<div class="deed-metrics">
<span>Ο trust score: <em>0.9821</em></span>
<span>Ξ΅ entropy: <em>0.0412</em> (gate: < 0.21)</span>
<span>Ο resonance: <em>0.8834</em></span>
</div>
</div>
</section>
<!-- WHO NEEDS THIS -->
<section>
<div class="section-inner narrow">
<div class="section-eyebrow">WHO NEEDS AI GOVERNANCE TRUST DEEDS</div>
<div class="who-grid">
<div class="who-card"><div class="who-icon">π¦</div><div class="who-title">Banks & Fintech</div><div class="who-why">Your AI made a credit decision. Regulator wants proof it wasn't discriminatory. The deed is the proof.</div></div>
<div class="who-card"><div class="who-icon">βοΈ</div><div class="who-title">Enterprise AI Deployments</div><div class="who-why">Your AI took an action in production. You need an immutable record of what it was authorized to do and what it actually did.</div></div>
<div class="who-card"><div class="who-icon">π¬</div><div class="who-title">AI Researchers</div><div class="who-why">You're publishing results. Trust deeds make your evaluation methodology auditable, not just your outputs.</div></div>
<div class="who-card"><div class="who-icon">βοΈ</div><div class="who-title">Legal & Compliance</div><div class="who-why">EU AI Act. SEC AI guidance. CFPB. Every regulator is moving toward mandatory AI audit trails. Get ahead of it.</div></div>
<div class="who-card"><div class="who-icon">β</div><div class="who-title">Sovereign Founders</div><div class="who-why">You're building without big tech. You need proof your stack is trustworthy without depending on anyone else's certification.</div></div>
<div class="who-card"><div class="who-icon">π‘οΈ</div><div class="who-title">Government & Defense</div><div class="who-why">AI that touches public decisions needs an immutable chain of custody. Mathematical proof, not policy promise.</div></div>
</div>
</div>
</section>
<!-- PRICING -->
<section>
<div class="section-inner">
<div class="section-eyebrow">PRICING</div>
<div class="section-title" style="font-size:28px">Start with one deed. Scale to sovereign.</div>
<div class="pricing-grid" id="pricing-grid">
<!-- injected by JS -->
</div>
</div>
</section>
<!-- THE MATH -->
<section>
<div class="section-inner narrow">
<div class="section-eyebrow">THE MATH BEHIND THE DEED</div>
<div class="math-grid">
<div>
<div class="math-label">APL REDUCTION</div>
<div class="code-block" style="color:var(--gold)">
<div>Ξ©ββΉβ§ββ§ββ§β³β§β¬‘</div>
<div class="code-comment">-- AND-fold six primitives</div>
<div class="code-comment">-- 1 = all pass β deed issued</div>
<div class="code-error">-- 0 = any fail β execution halted</div>
</div>
</div>
<div>
<div class="math-label">RESONANCE OSCILLATOR</div>
<div class="code-block" style="color:var(--purple)">
<div>Ξ¦(t) = sin(ΟΒ·t) Γ cos(ΟΒ·t) Γ (1βΞ΅)</div>
<div class="code-muted">Ο = trust score [0, 1]</div>
<div class="code-muted">Ξ΅ = entropy [0, 1] β must be < 0.21</div>
<div class="code-muted">Ο = resonance [0, 1]</div>
</div>
</div>
<div class="prolog-block">
<div class="math-label">PROLOG GOVERNANCE KERNEL</div>
<div class="code-block" style="color:var(--gold)">
<div>meta_block(valid) :-</div>
<div style="padding-left:24px">source(coherent),</div>
<div style="padding-left:24px">truth(verified),</div>
<div style="padding-left:24px">resonance(above_threshold),</div>
<div style="padding-left:24px">knowledge(computable),</div>
<div style="padding-left:24px">creation(authorized),</div>
<div style="padding-left:24px">impact(sealed).</div>
<div class="code-muted" style="margin-top:12px">No component advances unless every previous component remains coherent.</div>
</div>
</div>
</div>
</div>
</section>
<!-- THE SOVEREIGN STACK -->
<section>
<div class="section-inner narrow">
<div class="section-eyebrow">THE SOVEREIGN STACK</div>
<div class="section-title" style="font-size:24px;margin-bottom:40px">Trust deeds are the output. Here is everything beneath them.</div>
<div class="stack-table">
<div class="stack-row"><span class="stack-name" style="color:var(--gold)">BEL ESPRIT D'ACCORD TRUST HOLDINGS</span><span class="stack-desc">The legal vessel Β· IP vault Β· enterprise roof</span></div>
<div class="stack-row"><span class="stack-name" style="color:var(--white)">SNAPKITTY OS</span><span class="stack-desc">11 sovereign agents Β· NATS substrate Β· WORM ledger</span></div>
<div class="stack-row"><span class="stack-name" style="color:var(--purple)">RESONANCE ISA</span><span class="stack-desc">Rust VM Β· WASM Β· APL reduction Β· Prolog kernel</span></div>
<div class="stack-row"><span class="stack-name" style="color:var(--cyan)">NATS JETSTREAM</span><span class="stack-desc">Event backbone Β· every deed flows through it</span></div>
<div class="stack-row"><span class="stack-name" style="color:var(--green)">SEIT</span><span class="stack-desc">The NGO spine Β· civic mission Β· education layer</span></div>
<div class="stack-row" style="border-bottom:none"><span class="stack-name" style="color:var(--gold2)">TRUST DEED</span><span class="stack-desc">β YOU ARE HERE Β· the proof layer Β· the product</span></div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<div class="final-cta">
<div style="max-width:600px;margin:0 auto">
<h2>Generate your first deed.</h2>
<p>Write Resonance Assembly. Run it through the VM. Get a cryptographic proof your AI behaved correctly. It takes 30 seconds.</p>
<div class="final-btns">
<a href="https://snapkittywest.github.io/sovereign-vm/" class="btn-primary">OPEN THE VM β</a>
<a href="https://collectivekitty.com/contact" class="btn-outline">ENTERPRISE PRICING</a>
</div>
<div class="omega-seal">ββΉβββ³β¬‘ Ξ©</div>
<div class="seal-sub">WORM SEALED Β· SOVEREIGN Β· IMMUTABLE Β· AHMAD ALI PARR</div>
</div>
</div>
<script>
const PRIMITIVES = [
{ glyph:'β', name:'SOURCE', apl:'S', desc:'Where the AI program begins. The origin of intent. Every deed traces back to a declared source.', question:'Is the origin coherent?' },
{ glyph:'βΉ', name:'TRUTH', apl:'T', desc:'What the program must verify against. Ground truth. No execution without a declared truth target.', question:'Is truth verified?' },
{ glyph:'β', name:'RESONANCE', apl:'R', desc:'Signal coherence measure. Ξ¦(t) = sin(ΟΒ·t) Γ cos(ΟΒ·t) Γ (1βΞ΅). Must stay above threshold.', question:'Is resonance above threshold?' },
{ glyph:'β', name:'KNOWLEDGE', apl:'K', desc:'Computed state. What the system actually learned and stored. Verifiable. Computable. Auditable.', question:'Is knowledge computable?' },
{ glyph:'β³', name:'CREATION', apl:'C', desc:'The authorized action. What the AI was permitted to do. Scope. Boundary. Mandate.', question:'Is the action authorized?' },
{ glyph:'⬑', name:'IMPACT', apl:'I', desc:'The sealed consequence. What happened as a result. The immutable output. The thing you cannot undo.', question:'Is the impact sealed?' },
]
const DEED = {
program: 'trust_vector.rasm',
version: 'resonance-isa-v1',
Ο: '0.9821',
Ξ΅: '0.0412',
Ο: '0.8834',
reduction: 'Ξ©ββΉβ§ββ§ββ§β³β§β¬‘ β 1',
valid: true,
seal: '7dd507ea3f4c9b2a1e8d0f6b5c3a2e9d4b7f1c8a6e3d0f9b2c5a8e1d4f7b0c3',
issued: '2026-06-22T00:00:00.000Z',
issuer: 'SnapKitty Resonance ISA v1 Β· Ahmad Ali Parr',
}
const TIERS = [
{
name:'SINGLE DEED', price:'$49', unit:'per execution', color:'#C9A84C',
features:['One AI governance trust deed','APL 6-primitive reduction','Ed25519 signed','WORM sealed (SHA-256)','JSON + PDF export','Verify at /verify'],
cta:'GET A DEED', href:'https://snapkittywest.github.io/sovereign-vm/',
primary: true,
},
{
name:'ENTERPRISE', price:'$2,400', unit:'per month', color:'#a78bfa',
features:['Unlimited AI governance deeds','NATS JetStream audit trail','Custom program namespace','API access β POST to /api/vm/execute','Webhook on every deed','Quarterly compliance export','Direct line to Ahmad'],
cta:'CONTACT US', href:'https://collectivekitty.com/contact',
primary: false,
},
{
name:'SOVEREIGN LICENSE', price:'$24,000', unit:'one time', color:'#34D399',
features:['Full Resonance ISA source (Rust)','Deploy in your air-gapped infrastructure','Custom trust geometry configuration','WORM chain you own and control','Training on your corpus','Prolog constraint kernel customization','12 months Ahmad-level support'],
cta:"LET'S TALK", href:'https://collectivekitty.com/contact',
primary: false,
},
]
// ββ Render primitives ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
let tick = 0
function renderPrimitives() {
const grid = document.getElementById('primitives-grid')
grid.innerHTML = PRIMITIVES.map((p, i) => `
<div class="primitive${i === tick ? ' active' : ''}" id="prim-${i}">
<div class="prim-header">
<div class="prim-glyph">${p.glyph}</div>
<div>
<div class="prim-name">${p.name}</div>
<div class="prim-index">APL: ${p.apl} Β· primitive ${i+1} of 6</div>
</div>
<div class="prim-status">${i === tick ? 'β PASS' : 'β'}</div>
</div>
<div class="prim-desc">${p.desc}</div>
<div class="prim-gate">GATE: ${p.question}</div>
</div>
`).join('')
}
renderPrimitives()
setInterval(() => {
tick = (tick + 1) % 6
// Update efficiently without full re-render
document.querySelectorAll('.primitive').forEach((el, i) => {
el.classList.toggle('active', i === tick)
el.querySelector('.prim-glyph').style.cssText = i === tick ? 'color:var(--gold);text-shadow:0 0 20px #C9A84C88' : 'color:var(--dim)'
el.querySelector('.prim-name').style.color = i === tick ? 'var(--gold)' : 'var(--muted)'
el.querySelector('.prim-status').style.color = i === tick ? 'var(--green)' : 'var(--muted)'
el.querySelector('.prim-status').textContent = i === tick ? 'β PASS' : 'β'
})
}, 1200)
// ββ Render deed ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
document.getElementById('deed-body').innerHTML = Object.entries(DEED).map(([k, v]) => {
let cls = 'deed-val'
if (k === 'valid') cls += ' valid'
else if (k === 'seal') cls += ' seal'
else if (k === 'reduction') cls += ' reduction'
const display = k === 'valid' ? 'β true' : String(v)
return `<div class="deed-row"><span class="deed-key">${k}</span><span class="${cls}">${display}</span></div>`
}).join('')
// ββ Copy deed ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
document.getElementById('copy-btn').addEventListener('click', () => {
navigator.clipboard.writeText(JSON.stringify(DEED, null, 2)).catch(() => {})
const btn = document.getElementById('copy-btn')
btn.textContent = 'COPIED β'
btn.classList.add('copied')
setTimeout(() => { btn.textContent = 'COPY JSON'; btn.classList.remove('copied') }, 2000)
})
// ββ Render pricing βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
document.getElementById('pricing-grid').innerHTML = TIERS.map(t => `
<div class="price-card" style="border:1px solid ${t.color}33">
<div class="price-name" style="color:${t.color}">${t.name}</div>
<div class="price-amount">${t.price}</div>
<div class="price-unit">${t.unit}</div>
<div class="price-features">
${t.features.map(f => `<div class="price-feature"><span class="bullet" style="color:${t.color}">β¦</span><span class="feat-text">${f}</span></div>`).join('')}
</div>
<a href="${t.href}" class="price-cta" style="${t.primary ? `background:${t.color};color:var(--bg)` : `border:1px solid ${t.color};color:${t.color}`}">${t.cta} β</a>
</div>
`).join('')
</script>
</body>
</html>
|