<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<!-- @template name="Kiduna Deck" description="16:9 presentation with title, statement, section, diagram, data, team, and closing layouts in the Kiduna celestial-enamel brand." -->
<helmet>
  <script src="./ds-base.js"></script>
  <style>
    html, body { margin: 0; padding: 0; height: 100%; background: #120C07; }
    a { color: #03CCD9; text-decoration: none; }
    a:hover { color: #2FE0EA; }
  </style>
</helmet>
<x-import component-from-global-scope="deck-stage" from="./deck-stage.js" width="1920" height="1080" hint-size="100%,100%">

  <!-- 01 · TITLE -->
  <section data-label="Title" data-speaker-notes="Title layout: three enamel stars lead one big Goudy headline with a single upright gold phrase; presenter line below, linear logo anchored bottom-left." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 120px 140px 100px;">
    <div style="display: flex; gap: 22px; margin-bottom: 56px;">
      <div style="width: 16px; height: 16px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.7), 0 0 12px rgba(193,154,107,0.35);"></div>
      <div style="width: 16px; height: 16px; border-radius: 9999px; background: var(--kid-sun-gold); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.7), 0 0 12px rgba(234,170,0,0.35);"></div>
      <div style="width: 16px; height: 16px; border-radius: 9999px; background: var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.7), 0 0 12px rgba(3,204,217,0.35);"></div>
    </div>
    <h1 style="font-family: var(--font-display); font-weight: 400; font-size: 112px; line-height: 1.05; color: var(--fg); margin: 0; max-width: 1480px;"><span>Where people and their allies organize</span> <em style="font-style: normal; color: var(--kid-sun-gold);">what comes next</em></h1>
    <div style="display: flex; align-items: baseline; gap: 28px; margin-top: 72px;">
      <span style="font-family: var(--font-sans); font-weight: 700; font-size: 30px; color: var(--fg-muted);">Presenter Name</span>
      <span style="font-family: var(--font-sans); font-weight: 400; font-size: 26px; letter-spacing: 0.16em; color: var(--kin-camel);">name@kiduna.club</span>
    </div>
    <div style="position: absolute; left: 140px; bottom: 90px; display: flex;">
      <img src="assets/kiduna-logo-linear-skyblue.svg" alt="Kiduna" style="height: 56px;">
    </div>
  </section>

  <!-- 02 · STATEMENT -->
  <section data-label="Statement" data-speaker-notes="Statement layout: one thought, nothing else, with a single gold enamel star beneath. Use between chapters or to land the thesis." style="background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 72px;">
    <h2 style="font-family: var(--font-display); font-weight: 400; font-size: 150px; line-height: 1.08; color: var(--fg); margin: 0; text-align: center; max-width: 1500px;"><span>The agentic internet</span> <em style="font-style: normal; color: var(--kid-sun-gold);">starts here</em></h2>
    <div style="width: 18px; height: 18px; border-radius: 9999px; background: var(--kid-sun-gold); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.7), 0 0 16px rgba(234,170,0,0.4);"></div>
  </section>

  <!-- 03 · SECTION MARKER -->
  <section data-label="Section" data-speaker-notes="Section marker: aubergine ground, the Kiduna mark set in a gold-rimmed enamel medallion, one small letterspaced line. Keep every section marker identical." style="background: var(--kin-aubergine); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px;">
    <div style="width: 240px; height: 240px; border-radius: 9999px; display: grid; place-items: center; background: color-mix(in srgb, var(--kin-camel) 16%, #1B1209); border: 2px solid rgba(193,154,107,0.55); box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.6), 0 0 36px rgba(193,154,107,0.25);">
      <img src="assets/kiduna-mark.svg" alt="" style="height: 120px;">
    </div>
    <div style="font-family: var(--font-sans); font-weight: 400; font-size: 44px; letter-spacing: 0.34em; text-transform: lowercase; color: var(--kid-moon-cream);">january 2026</div>
  </section>

  <!-- 04 · BIG NUMBER -->
  <section data-label="Big number" data-speaker-notes="Big-number layout: one Goudy figure in sun gold with a quiet halo, one camel caption. Numbers always display in Goudy." style="background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;">
    <div style="font-family: var(--font-display); font-size: 320px; line-height: 1; color: var(--kid-sun-gold); text-shadow: 0 0 80px rgba(234,170,0,0.28);">1st</div>
    <div style="font-family: var(--font-sans); font-weight: 400; font-size: 36px; letter-spacing: 0.24em; color: var(--kin-camel);">DUNA registered in West Virginia</div>
  </section>

  <!-- 05 · TRIAD DIAGRAM -->
  <section data-label="Triad" data-speaker-notes="Triad diagram: three enamel node pills, gold-rimmed, joined by camel wire. Swap the labels; keep the geometry. Center node is the subject." style="background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 140px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 70px;">The lethal trifecta</div>
    <div style="position: relative; width: 1080px; height: 620px;">
      <svg viewBox="0 0 1080 620" style="position: absolute; inset: 0; width: 100%; height: 100%;" aria-hidden="true">
        <line x1="540" y1="90" x2="190" y2="520" stroke="rgba(193,154,107,0.35)" stroke-width="2"></line>
        <line x1="540" y1="90" x2="890" y2="520" stroke="rgba(193,154,107,0.35)" stroke-width="2"></line>
        <line x1="190" y1="520" x2="890" y2="520" stroke="rgba(193,154,107,0.35)" stroke-width="2"></line>
      </svg>
      <div style="position: absolute; left: 540px; top: 90px; transform: translate(-50%,-50%); padding: 26px 56px; border-radius: 9999px; background: color-mix(in srgb, var(--kin-skyblue) 18%, #1B1209); border: 2px solid var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3.5px rgba(234,170,0,0.55), 0 0 18px rgba(3,204,217,0.2); font-family: var(--font-sans); font-weight: 400; font-size: 32px; letter-spacing: 0.22em; color: var(--kin-skyblue); white-space: nowrap;">private data</div>
      <div style="position: absolute; left: 190px; top: 520px; transform: translate(-50%,-50%); padding: 26px 56px; border-radius: 9999px; background: color-mix(in srgb, var(--kin-skyblue) 18%, #1B1209); border: 2px solid var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3.5px rgba(234,170,0,0.55), 0 0 18px rgba(3,204,217,0.2); font-family: var(--font-sans); font-weight: 400; font-size: 32px; letter-spacing: 0.22em; color: var(--kin-skyblue); white-space: nowrap;">untrusted content</div>
      <div style="position: absolute; left: 890px; top: 520px; transform: translate(-50%,-50%); padding: 26px 56px; border-radius: 9999px; background: color-mix(in srgb, var(--kin-skyblue) 18%, #1B1209); border: 2px solid var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3.5px rgba(234,170,0,0.55), 0 0 18px rgba(3,204,217,0.2); font-family: var(--font-sans); font-weight: 400; font-size: 32px; letter-spacing: 0.22em; color: var(--kin-skyblue); white-space: nowrap;">external actions</div>
      <div style="position: absolute; left: 540px; top: 400px; transform: translate(-50%,-50%); text-align: center;">
        <div style="font-family: var(--font-display); font-size: 60px; color: var(--fg); text-shadow: 0 0 48px rgba(234,170,0,0.25);">the agent</div>
      </div>
    </div>
    <div style="font-family: var(--font-sans); font-size: 26px; color: var(--fg-soft); margin-top: 40px;">coined by Simon Willison</div>
  </section>

  <!-- 06 · STACK DIAGRAM -->
  <section data-label="Stack" data-speaker-notes="Stack diagram: enamel layers inherit upward. Base layer is quiet umber, top layer gets the sky enamel and the gold rim. One-line takeaway underneath." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 140px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 64px;">Composability</div>
    <div style="display: flex; flex-direction: column; gap: 20px; align-self: center; width: 1180px;">
      <div style="display: flex; align-items: center; justify-content: space-between; padding: 40px 56px; border-radius: 16px; background: color-mix(in srgb, var(--kin-skyblue) 14%, #1B1209); border: 2px solid var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3.5px rgba(234,170,0,0.5), 0 0 24px rgba(3,204,217,0.15);">
        <span style="font-family: var(--font-display); font-size: 44px; color: var(--fg);">your layer</span>
        <span style="font-family: var(--font-sans); font-size: 30px; letter-spacing: 0.2em; color: var(--kin-skyblue);">+ whatever you write next</span>
      </div>
      <div style="align-self: center; font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.24em; color: var(--kid-sun-gold);">inherits &uarr;</div>
      <div style="display: flex; align-items: center; justify-content: space-between; padding: 40px 56px; border-radius: 16px; background: #1E150C; border: 1px solid rgba(193,154,107,0.35); box-shadow: 0 0 0 1.5px #120C07, 0 0 0 2.5px rgba(234,170,0,0.3);">
        <span style="font-family: var(--font-display); font-size: 44px; color: var(--fg);">the popular one</span>
        <span style="font-family: var(--font-sans); font-size: 30px; letter-spacing: 0.2em; color: var(--fg-muted);">morph &middot; gender &middot; @desc</span>
      </div>
      <div style="align-self: center; font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.24em; color: var(--kid-sun-gold);">inherits &uarr;</div>
      <div style="display: flex; align-items: center; justify-content: space-between; padding: 40px 56px; border-radius: 16px; background: #1B1209; border: 1px dashed rgba(193,154,107,0.35); box-shadow: 0 0 0 2px #120C07;">
        <span style="font-family: var(--font-display); font-size: 44px; color: var(--fg-muted);">a generic object</span>
        <span style="font-family: var(--font-sans); font-size: 30px; letter-spacing: 0.2em; color: var(--fg-soft);">look &middot; say &middot; take &middot; drop</span>
      </div>
    </div>
    <div style="align-self: center; margin-top: 56px; font-family: var(--font-display); font-style: italic; font-size: 40px; color: var(--kin-camel);">Inherit the verb. Add your own.</div>
  </section>

  <!-- 07 · SPLIT -->
  <section data-label="Split" data-speaker-notes="Split layout: two short columns, camel hairline between, small enamel dots as bullets. Keep items to two or three words; never more than six rows." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 160px 80px;">
    <h2 style="font-family: var(--font-display); font-weight: 400; font-size: 84px; line-height: 1.05; color: var(--fg); margin: 0 0 80px;"><span>A</span> <em style="font-style: normal; color: var(--kid-sun-gold);">DUNA</em> <span>is&hellip;</span></h2>
    <div style="display: grid; grid-template-columns: 1fr 1fr; column-gap: 0;">
      <div style="display: flex; flex-direction: column; gap: 36px; padding-right: 100px; border-right: 1px solid var(--hairline);">
        <div style="font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel);">it can</div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg);">own assets</span></div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg);">hire and fire</span></div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg);">earn profits</span></div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg);">raise capital</span></div>
      </div>
      <div style="display: flex; flex-direction: column; gap: 36px; padding-left: 100px;">
        <div style="font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-soft);">it has</div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; border: 1.5px dashed rgba(193,154,107,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg-muted);">no board</span></div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; border: 1.5px dashed rgba(193,154,107,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg-muted);">no executives</span></div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; border: 1.5px dashed rgba(193,154,107,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg-muted);">no corporate shell</span></div>
        <div style="display: flex; align-items: center; gap: 26px;"><div style="width: 12px; height: 12px; border-radius: 9999px; border: 1.5px dashed rgba(193,154,107,0.6); flex: none;"></div><span style="font-family: var(--font-sans); font-size: 40px; letter-spacing: 0.14em; color: var(--fg-muted);">member governance</span></div>
      </div>
    </div>
  </section>

  <!-- 08 · FLOW -->
  <section data-label="Flow" data-speaker-notes="Flow layout: three steps, gold arrows between. Verbs only. Highlight the last step with sky enamel." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 140px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 110px;">Your agentic organization</div>
    <div style="display: flex; align-items: center; justify-content: center; gap: 56px;">
      <div style="display: flex; flex-direction: column; gap: 20px; width: 420px;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg);">Build</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.4; color: var(--fg-muted);">your company as software</div>
      </div>
      <div style="font-family: var(--font-display); font-size: 64px; color: var(--kid-sun-gold);">&rarr;</div>
      <div style="display: flex; flex-direction: column; gap: 20px; width: 420px;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg);">Discover</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.4; color: var(--fg-muted);">new customers</div>
      </div>
      <div style="font-family: var(--font-display); font-size: 64px; color: var(--kid-sun-gold);">&rarr;</div>
      <div style="display: flex; flex-direction: column; gap: 20px; width: 420px;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--kin-skyblue);">Share</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.4; color: var(--fg-muted);">value with members</div>
      </div>
    </div>
  </section>

  <!-- 09 · CALLOUT -->
  <section data-label="Callout" data-speaker-notes="Callout layout: one pull-quote on a gold-rimmed enamel panel. Attribution below, small." style="background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 120px 200px;">
    <div style="display: flex; flex-direction: column; gap: 44px; max-width: 1300px;">
      <div style="font-family: var(--font-callout); font-weight: 500; font-size: 64px; line-height: 1.3; color: var(--fg); padding: 72px 88px; background: #1E150C; border: 1px solid rgba(193,154,107,0.30); border-radius: 18px; box-shadow: 0 0 0 1.5px #120C07, 0 0 0 2.5px rgba(234,170,0,0.35), 0 18px 48px rgba(0,0,0,0.55);">&ldquo;Organizations here are not assembled. They emerge through participation.&rdquo;</div>
      <div style="font-family: var(--font-sans); font-size: 28px; letter-spacing: 0.24em; color: var(--kin-camel); padding-left: 88px;">kiduna &middot; 2026</div>
    </div>
  </section>

  <!-- 11 · TIMELINE -->
  <section data-label="Timeline" data-speaker-notes="Timeline layout: one camel hairline, gold-rimmed enamel dots for moments, Goudy years. Highlight the current moment in sky. Four or five moments max." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 160px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 140px;">The road here</div>
    <div style="position: relative; height: 2px; background: rgba(193,154,107,0.35); margin: 0 40px;">
      <div style="position: absolute; left: 0%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 0;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg); position: absolute; bottom: 36px; white-space: nowrap;">1993</div>
        <div style="width: 20px; height: 20px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.65);"></div>
        <div style="font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-soft); position: absolute; top: 40px; white-space: nowrap;">the MOO</div>
      </div>
      <div style="position: absolute; left: 33%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg); position: absolute; bottom: 36px; white-space: nowrap;">1994</div>
        <div style="width: 20px; height: 20px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.65);"></div>
        <div style="font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-soft); position: absolute; top: 40px; white-space: nowrap;">the web</div>
      </div>
      <div style="position: absolute; left: 66%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg); position: absolute; bottom: 36px; white-space: nowrap;">2025</div>
        <div style="width: 20px; height: 20px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.65);"></div>
        <div style="font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-soft); position: absolute; top: 40px; white-space: nowrap;">personal agents</div>
      </div>
      <div style="position: absolute; left: 100%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--kin-skyblue); position: absolute; bottom: 36px; white-space: nowrap;">2026</div>
        <div style="width: 28px; height: 28px; border-radius: 9999px; background: var(--kin-skyblue); box-shadow: 0 0 0 3px #120C07, 0 0 0 4.5px rgba(234,170,0,0.75), 0 0 24px rgba(3,204,217,0.35);"></div>
        <div style="font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--kin-skyblue); position: absolute; top: 40px; white-space: nowrap;">legal standing</div>
      </div>
    </div>
    <div style="height: 120px;"></div>
  </section>

  <!-- 12 · FULL-BLEED IMAGE -->
  <section data-label="Full-bleed image" data-speaker-notes="Full-bleed image layout: drop a photo onto the slot; one line of Goudy sits on a bottom protection gradient. Keep the bottom-left clear for photo credit." style="background: var(--bg-deep);">
    <div style="position: absolute; inset: 0;">
      <x-import component-from-global-scope="image-slot" from="./image-slot.js" id="tpl-fullbleed" shape="rect" placeholder="Drop a full-bleed image" hint-size="100%,100%"></x-import>
    </div>
    <div style="position: absolute; left: 0; right: 0; bottom: 0; height: 380px; background: linear-gradient(to top, rgba(18,12,7,0.9), rgba(18,12,7,0)); pointer-events: none;"></div>
    <div style="position: absolute; left: 140px; right: 140px; bottom: 150px; pointer-events: none;">
      <h2 style="font-family: var(--font-display); font-weight: 400; font-size: 96px; line-height: 1.05; color: var(--fg); margin: 0;"><span>Organizations,</span> <em style="font-style: normal; color: var(--kid-sun-gold);">born on the internet</em></h2>
    </div>
  </section>

  <!-- 13 · TABLE -->
  <section data-label="Table" data-speaker-notes="Table layout: camel hairlines only, no fills; a gold hairline under the header. Numbers in Goudy. Four rows max; round to three significant figures." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 200px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 72px;">Engagement tiers</div>
    <div style="display: grid; grid-template-columns: 1.4fr 1fr 1fr; row-gap: 0;">
      <div style="font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kin-camel); padding: 28px 0; border-bottom: 1px solid rgba(234,170,0,0.4);">tier</div>
      <div style="font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kin-camel); padding: 28px 0; border-bottom: 1px solid rgba(234,170,0,0.4); text-align: right;">members</div>
      <div style="font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kin-camel); padding: 28px 0; border-bottom: 1px solid rgba(234,170,0,0.4); text-align: right;">agents</div>
      <div style="font-family: var(--font-sans); font-size: 38px; color: var(--fg); padding: 34px 0; border-bottom: 1px solid var(--border);">Observer</div>
      <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg); padding: 34px 0; border-bottom: 1px solid var(--border); text-align: right;">3,400</div>
      <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg); padding: 34px 0; border-bottom: 1px solid var(--border); text-align: right;">0</div>
      <div style="font-family: var(--font-sans); font-size: 38px; color: var(--fg); padding: 34px 0; border-bottom: 1px solid var(--border);">Member</div>
      <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg); padding: 34px 0; border-bottom: 1px solid var(--border); text-align: right;">240</div>
      <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg); padding: 34px 0; border-bottom: 1px solid var(--border); text-align: right;">240</div>
      <div style="font-family: var(--font-sans); font-size: 38px; color: var(--kin-skyblue); padding: 34px 0;">Builder</div>
      <div style="font-family: var(--font-display); font-size: 44px; color: var(--kin-skyblue); padding: 34px 0; text-align: right;">36</div>
      <div style="font-family: var(--font-display); font-size: 44px; color: var(--kin-skyblue); padding: 34px 0; text-align: right;">108</div>
    </div>
  </section>

  <!-- 14 · GRAPH -->
  <section data-label="Graph" data-speaker-notes="Graph layout: enamel bars on a camel baseline, Goudy values on top, the story bar in sky with the gold rim. One takeaway line under the eyebrow, nothing else." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 200px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 24px;">Agents at work</div>
    <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg); margin-bottom: 90px;"><span>Delivery is</span> <em style="font-style: normal; color: var(--kid-sun-gold);">compounding</em></div>
    <div style="display: flex; align-items: flex-end; gap: 72px; height: 440px; border-bottom: 1px solid rgba(193,154,107,0.30); padding: 0 40px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 20px; width: 220px;">
        <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg-muted);">12</div>
        <div style="width: 100%; height: 60px; background: color-mix(in srgb, var(--kin-camel) 22%, #1B1209); border: 1px solid rgba(193,154,107,0.4); border-bottom: none; border-radius: 6px 6px 0 0;"></div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 20px; width: 220px;">
        <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg-muted);">47</div>
        <div style="width: 100%; height: 140px; background: color-mix(in srgb, var(--kin-camel) 22%, #1B1209); border: 1px solid rgba(193,154,107,0.4); border-bottom: none; border-radius: 6px 6px 0 0;"></div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 20px; width: 220px;">
        <div style="font-family: var(--font-display); font-size: 44px; color: var(--fg-muted);">160</div>
        <div style="width: 100%; height: 240px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.4); border-radius: 6px 6px 0 0;"></div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 20px; width: 220px;">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--kin-skyblue);">520</div>
        <div style="width: 100%; height: 360px; background: var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3.5px rgba(234,170,0,0.65), 0 0 32px rgba(3,204,217,0.25); border-radius: 6px 6px 0 0;"></div>
      </div>
    </div>
    <div style="display: flex; gap: 72px; padding: 24px 40px 0;">
      <div style="width: 220px; text-align: center; font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-soft);">Q3</div>
      <div style="width: 220px; text-align: center; font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-soft);">Q4</div>
      <div style="width: 220px; text-align: center; font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--fg-soft);">Q1</div>
      <div style="width: 220px; text-align: center; font-family: var(--font-sans); font-size: 26px; letter-spacing: 0.2em; color: var(--kin-skyblue);">Q2</div>
    </div>
  </section>

  <!-- 15 · TEAM -->
  <section data-label="Team" data-speaker-notes="Team layout: circular photo slots set in gold-rimmed enamel medallions, name in Goudy, role letterspaced. Drop real photos onto the circles. Four across max." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 140px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 100px;">The members</div>
    <div style="display: flex; justify-content: center; gap: 110px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 32px;">
        <div style="width: 260px; height: 260px; border-radius: 9999px; box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.6), 0 0 28px rgba(193,154,107,0.2);">
          <x-import component-from-global-scope="image-slot" from="./image-slot.js" id="tpl-team-1" shape="circle" placeholder="Photo" style="width: 260px; height: 260px;" hint-size="260px,260px"></x-import>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
          <div style="font-family: var(--font-display); font-size: 40px; color: var(--fg);">Full Name</div>
          <div style="font-family: var(--font-sans); font-size: 24px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--kin-camel);">founder</div>
        </div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 32px;">
        <div style="width: 260px; height: 260px; border-radius: 9999px; box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.6), 0 0 28px rgba(193,154,107,0.2);">
          <x-import component-from-global-scope="image-slot" from="./image-slot.js" id="tpl-team-2" shape="circle" placeholder="Photo" style="width: 260px; height: 260px;" hint-size="260px,260px"></x-import>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
          <div style="font-family: var(--font-display); font-size: 40px; color: var(--fg);">Full Name</div>
          <div style="font-family: var(--font-sans); font-size: 24px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--kin-camel);">member</div>
        </div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 32px;">
        <div style="width: 260px; height: 260px; border-radius: 9999px; box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.6), 0 0 28px rgba(193,154,107,0.2);">
          <x-import component-from-global-scope="image-slot" from="./image-slot.js" id="tpl-team-3" shape="circle" placeholder="Photo" style="width: 260px; height: 260px;" hint-size="260px,260px"></x-import>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
          <div style="font-family: var(--font-display); font-size: 40px; color: var(--fg);">Full Name</div>
          <div style="font-family: var(--font-sans); font-size: 24px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--kin-camel);">member</div>
        </div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 32px;">
        <div style="width: 260px; height: 260px; border-radius: 9999px; background: color-mix(in srgb, var(--kid-violet-bright) 18%, #1B1209); border: 2px solid var(--kid-violet-bright); box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.6), 0 0 28px rgba(157,123,232,0.28); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 90px; color: var(--kid-violet-bright);">&#8599;</div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
          <div style="font-family: var(--font-display); font-size: 40px; color: var(--kid-violet-bright);">Your ally</div>
          <div style="font-family: var(--font-sans); font-size: 24px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--kin-camel);">intelligent agent</div>
        </div>
      </div>
    </div>
  </section>

  <!-- 16 · BOXES -->
  <section data-label="Boxes" data-speaker-notes="Boxes layout: a grid of gold-rimmed enamel cards, Goudy word + one Avenir line each. Four boxes; one may carry the mint spark." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 160px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 64px;">All composed</div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px;">
      <div style="display: flex; flex-direction: column; gap: 18px; padding: 56px 60px; background: #1E150C; border: 1px solid rgba(193,154,107,0.30); border-radius: 18px; box-shadow: 0 0 0 1.5px #120C07, 0 0 0 2.5px rgba(234,170,0,0.3);">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg);">governance</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.45; color: var(--fg-muted);">decisions the whole organization can trust</div>
      </div>
      <div style="display: flex; flex-direction: column; gap: 18px; padding: 56px 60px; background: #1E150C; border: 1px solid rgba(193,154,107,0.30); border-radius: 18px; box-shadow: 0 0 0 1.5px #120C07, 0 0 0 2.5px rgba(234,170,0,0.3);">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg);">technology</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.45; color: var(--fg-muted);">the company itself, written as software</div>
      </div>
      <div style="display: flex; flex-direction: column; gap: 18px; padding: 56px 60px; background: #1E150C; border: 1px solid rgba(193,154,107,0.30); border-radius: 18px; box-shadow: 0 0 0 1.5px #120C07, 0 0 0 2.5px rgba(234,170,0,0.3);">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--fg);">economics</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.45; color: var(--fg-muted);">value earned and shared by members</div>
      </div>
      <div style="display: flex; flex-direction: column; gap: 18px; padding: 56px 60px; background: color-mix(in srgb, var(--kin-mint) 10%, #1B1209); border: 1px solid rgba(143,230,198,0.45); border-radius: 18px; box-shadow: 0 0 0 1.5px #120C07, 0 0 0 2.5px rgba(234,170,0,0.35), 0 0 24px rgba(143,230,198,0.12);">
        <div style="font-family: var(--font-display); font-size: 54px; color: var(--kin-mint);">culture</div>
        <div style="font-family: var(--font-sans); font-size: 30px; line-height: 1.45; color: var(--fg-muted);">the magic that holds it together</div>
      </div>
    </div>
  </section>

  <!-- 17 · ICONS -->
  <section data-label="Icons" data-speaker-notes="Icons layout: Lucide glyphs set in gold-rimmed enamel medallions, stroke 1.75, currentColor, never filled. One word per glyph; sky marks the active one." style="background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 100px 140px 80px;">
    <div style="font-family: var(--font-sans); font-weight: 700; font-size: 28px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kin-camel); margin-bottom: 110px;">Your agentic ally</div>
    <div style="display: flex; justify-content: center; gap: 130px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 40px;">
        <div style="width: 180px; height: 180px; border-radius: 9999px; display: grid; place-items: center; color: var(--kin-camel); background: color-mix(in srgb, var(--kin-camel) 18%, #1B1209); border: 2px solid rgba(193,154,107,0.6); box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.55), 0 0 24px rgba(193,154,107,0.2);">
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>
        </div>
        <div style="font-family: var(--font-sans); font-size: 32px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--fg);">inform</div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 40px;">
        <div style="width: 180px; height: 180px; border-radius: 9999px; display: grid; place-items: center; color: var(--kin-camel); background: color-mix(in srgb, var(--kin-camel) 18%, #1B1209); border: 2px solid rgba(193,154,107,0.6); box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.55), 0 0 24px rgba(193,154,107,0.2);">
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
        </div>
        <div style="font-family: var(--font-sans); font-size: 32px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--fg);">align</div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 40px;">
        <div style="width: 180px; height: 180px; border-radius: 9999px; display: grid; place-items: center; color: var(--kin-camel); background: color-mix(in srgb, var(--kin-camel) 18%, #1B1209); border: 2px solid rgba(193,154,107,0.6); box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.55), 0 0 24px rgba(193,154,107,0.2);">
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
        </div>
        <div style="font-family: var(--font-sans); font-size: 32px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--fg);">empower</div>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 40px;">
        <div style="width: 180px; height: 180px; border-radius: 9999px; display: grid; place-items: center; color: var(--kin-skyblue); background: color-mix(in srgb, var(--kin-skyblue) 18%, #1B1209); border: 2px solid var(--kin-skyblue); box-shadow: 0 0 0 3px #120C07, 0 0 0 5px rgba(234,170,0,0.7), 0 0 28px rgba(3,204,217,0.3);">
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
        </div>
        <div style="font-family: var(--font-sans); font-size: 32px; letter-spacing: 0.24em; text-transform: lowercase; color: var(--kin-skyblue);">enact</div>
      </div>
    </div>
  </section>

  <!-- 10 · CLOSE -->
  <section data-label="Close" data-speaker-notes="Closing layout: gold stacked logo, one contact line, one letterspaced link, three enamel stars beneath. Nothing else." style="background: var(--kin-aubergine); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 72px;">
    <img src="assets/kiduna-logo-stacked-gold.svg" alt="Kiduna" style="height: 300px;">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 24px;">
      <div style="font-family: var(--font-sans); font-weight: 700; font-size: 34px; color: var(--fg);">name@kiduna.club</div>
      <div style="font-family: var(--font-sans); font-size: 28px; letter-spacing: 0.3em; color: var(--kid-moon-cream);">early access &middot; kiduna.club</div>
    </div>
    <div style="display: flex; gap: 22px;">
      <div style="width: 14px; height: 14px; border-radius: 9999px; background: var(--kin-camel); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.65);"></div>
      <div style="width: 14px; height: 14px; border-radius: 9999px; background: var(--kid-sun-gold); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.65);"></div>
      <div style="width: 14px; height: 14px; border-radius: 9999px; background: var(--kin-skyblue); box-shadow: 0 0 0 2px #120C07, 0 0 0 3px rgba(234,170,0,0.65);"></div>
    </div>
  </section>

</x-import>

</x-dc>
</body>
</html>
