<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900" role="img" aria-label="MoAB Books illustration">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#0b0b0f"/>
      <stop offset="1" stop-color="#12121a"/>
    </linearGradient>
    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#6f4cff" stop-opacity="0.9"/>
      <stop offset="1" stop-color="#c7a24a" stop-opacity="0.9"/>
    </linearGradient>
    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="18" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
    </filter>
  </defs>

  <rect width="1200" height="900" fill="url(#bg)"/>

  <!-- Accent bar -->
  <rect x="120" y="140" width="960" height="10" rx="5" fill="url(#accent)" opacity="0.9"/>

  <!-- Book stack -->
  <g filter="url(#softShadow)" opacity="0.98">
    <rect x="230" y="260" width="740" height="120" rx="18" fill="#161623" stroke="rgba(255,255,255,0.14)"/>
    <rect x="260" y="410" width="680" height="120" rx="18" fill="#14141f" stroke="rgba(255,255,255,0.14)"/>
    <rect x="300" y="560" width="600" height="120" rx="18" fill="#12121a" stroke="rgba(255,255,255,0.14)"/>
  </g>

  <!-- Spines -->
  <g opacity="0.95">
    <rect x="230" y="260" width="34" height="120" fill="url(#accent)"/>
    <rect x="260" y="410" width="34" height="120" fill="url(#accent)"/>
    <rect x="300" y="560" width="34" height="120" fill="url(#accent)"/>
  </g>

  <!-- Title text -->
  <g font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial" fill="#f2f2f6" text-anchor="middle">
    <text x="600" y="205" font-size="34" font-weight="700" letter-spacing="0.4">MoAB Books + Codex Systems</text>
    <text x="600" y="240" font-size="18" opacity="0.85">Publishing artifacts • structured entries • repeatable pipelines</text>
  </g>

  <!-- Labels on books -->
  <g font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial" fill="#f2f2f6" opacity="0.92">
    <text x="600" y="335" font-size="22" font-weight="700" text-anchor="middle">Volume I</text>
    <text x="600" y="485" font-size="22" font-weight="700" text-anchor="middle">Volume II</text>
    <text x="600" y="635" font-size="22" font-weight="700" text-anchor="middle">Volume III</text>
  </g>

  <!-- Corner mark -->
  <circle cx="1030" cy="780" r="56" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.14)"/>
  <path d="M1010 780h40" stroke="url(#accent)" stroke-width="8" stroke-linecap="round"/>
  <path d="M1030 760v40" stroke="url(#accent)" stroke-width="8" stroke-linecap="round"/>
</svg>
