diff --git a/backgrounds/background.svg b/backgrounds/background.svg
new file mode 100644
index 0000000..1f6d0ad
--- /dev/null
+++ b/backgrounds/background.svg
@@ -0,0 +1,99 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="3840"
+  height="2160"
+  viewBox="0 0 3840 2160">
+
+  <!-- Catppuccin Macchiato palette -->
+  <!-- base:  #24273a, mantle: #1e2030, crust: #181926 -->
+  <!-- accents: lavender #b7bdf8, mauve #c6a0f6, teal #8bd5ca -->
+
+  <defs>
+    <!-- Background gradient -->
+    <linearGradient id="bg-grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%"  stop-color="#181926"/>
+      <stop offset="40%" stop-color="#1e2030"/>
+      <stop offset="100%" stop-color="#24273a"/>
+    </linearGradient>
+
+    <!-- Soft vignette -->
+    <radialGradient id="vignette" cx="50%" cy="50%" r="70%">
+      <stop offset="0%" stop-color="rgba(0,0,0,0)"/>
+      <stop offset="100%" stop-color="rgba(0,0,0,0.35)"/>
+    </radialGradient>
+
+    <!-- Subtle grid pattern -->
+    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+      <path d="M80 0 H0 V80" fill="none" stroke="#1f2234" stroke-width="1"/>
+    </pattern>
+
+    <!-- Card gradient for logo area -->
+    <linearGradient id="card-grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%"  stop-color="#1f2234"/>
+      <stop offset="100%" stop-color="#181926"/>
+    </linearGradient>
+
+    <!-- Soft shadow -->
+    <filter id="card-shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="24" stdDeviation="40" flood-color="#000000" flood-opacity="0.55"/>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="3840" height="2160" fill="url(#bg-grad)"/>
+  <rect width="3840" height="2160" fill="url(#grid)" opacity="0.12"/>
+  <rect width="3840" height="2160" fill="url(#vignette)"/>
+
+  <!-- Central “card” for main logo -->
+  <g filter="url(#card-shadow)">
+    <rect
+      x="1040"
+      y="480"
+      width="1760"
+      height="1200"
+      rx="72"
+      fill="url(#card-grad)"
+      stroke="#363a4f"
+      stroke-width="2"/>
+  </g>
+
+  <!-- Accent bars behind card (subtle “stack” reference) -->
+  <g opacity="0.35">
+    <rect x="960"  y="520" width="1760" height="40"  rx="20" fill="#b7bdf8"/>
+    <rect x="960"  y="600" width="1760" height="40"  rx="20" fill="#c6a0f6"/>
+    <rect x="960"  y="680" width="1760" height="40"  rx="20" fill="#8bd5ca"/>
+  </g>
+
+  <!-- MAIN LOGO SLOT -->
+  <!-- Replace this group with your fz-stack SVG, or paste it inside -->
+  <g id="logo-main" transform="translate(1920 1080)">
+    <!-- Example placeholder circle -->
+    <circle r="260" fill="#24273a" stroke="#363a4f" stroke-width="4"/>
+    <text
+      x="0"
+      y="24"
+      text-anchor="middle"
+      font-family="Inter, system-ui, sans-serif"
+      font-size="120"
+      fill="#b7bdf8">
+      fz-stack
+    </text>
+  </g>
+
+  <!-- OPTIONAL SECONDARY LOGO SLOT (bottom-right) -->
+  <!-- Replace with your company logo or remove if not needed -->
+  <g id="logo-secondary" transform="translate(3200 1840)" opacity="0.75">
+    <rect x="-260" y="-120" width="520" height="240" rx="40"
+          fill="#181926" stroke="#363a4f" stroke-width="2"/>
+    <text
+      x="0"
+      y="20"
+      text-anchor="middle"
+      font-family="Inter, system-ui, sans-serif"
+      font-size="72"
+      fill="#8bd5ca">
+      Company Logo
+    </text>
+  </g>
+
+</svg>