Add Artimic to the footer

Artimic is a separate product, not part of this repository, so it does not
belong in the "Project" column next to the source link. Gives it its own
"More from RealBrain" group alongside realbrain.cc, with a one-line
descriptor since the name alone does not say what it is.

Footer goes to four columns at 900px and two at 560px so the extra group
does not crowd the others.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018pRSdR57Ze9M2meDfYZgYE

src/lib/Footer.svelte

@@ -41,11 +41,6 @@
               Source on GitHub
             </a>
           </li>
-          <li>
-            <a href="https://realbrain.cc/" target="_blank" rel="noopener noreferrer">
-              RealBrain
-            </a>
-          </li>
           <li>
             <a
               href="https://www.buymeacoffee.com/developersharif"
@@ -57,6 +52,23 @@
           </li>
         </ul>
       </nav>
+
+      <nav aria-label="More from RealBrain">
+        <h2>More from RealBrain</h2>
+        <ul>
+          <li>
+            <a href="https://artimic.com/" target="_blank" rel="noopener noreferrer">
+              Artimic
+            </a>
+            <span class="note">AI design editor</span>
+          </li>
+          <li>
+            <a href="https://realbrain.cc/" target="_blank" rel="noopener noreferrer">
+              RealBrain
+            </a>
+          </li>
+        </ul>
+      </nav>
     </div>
 
     <hr class="divider" />
@@ -79,10 +91,16 @@
     margin-bottom: var(--space-6);
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 560px) {
     .cols {
-      grid-template-columns: 2fr 1fr 1fr;
+      grid-template-columns: repeat(2, 1fr);
-      gap: var(--space-7);
+    }
+  }
+
+  @media (min-width: 900px) {
+    .cols {
+      grid-template-columns: 2fr 1fr 1fr 1fr;
+      gap: var(--space-6);
     }
   }
 
@@ -120,6 +138,15 @@
     text-decoration: none;
   }
 
+  /* Sits under a product link that needs a word of context. */
+  .note {
+    display: block;
+    margin-top: var(--space-1);
+    color: var(--text-3);
+    font-size: var(--fs-1);
+    line-height: var(--lh-1);
+  }
+
   .base {
     display: grid;
     gap: var(--space-3);