Add member benefits cards (private chat + governance)

index.html

@@ -152,6 +152,68 @@
     line-height: 1.5;
   }
 
+  .benefits {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 48px 0 8px;
+    max-width: 720px;
+  }
+
+  .benefit-card {
+    flex: 1 1 280px;
+    max-width: 340px;
+    background: var(--white);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 28px 24px;
+    text-align: left;
+  }
+
+  .benefit-card .icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 16px;
+  }
+
+  .benefit-card h2 {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 8px;
+  }
+
+  .benefit-card p {
+    font-size: 14px;
+    color: var(--muted);
+    line-height: 1.5;
+    margin-bottom: 14px;
+  }
+
+  .benefit-card ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .benefit-card li {
+    font-size: 14px;
+    color: var(--ink);
+    padding-left: 20px;
+    position: relative;
+    margin-bottom: 6px;
+  }
+
+  .benefit-card li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 6px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--green-mid);
+  }
+
   .footer {
     margin-top: 64px;
     font-size: 13px;
@@ -213,6 +275,40 @@
 
   <p class="how-it-works">How it works: join on Open Collective, then connect your account to get access to chat, API, and member governance.</p>
 
+  <div class="benefits">
+    <div class="benefit-card">
+      <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 3v-3H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" stroke="#5b8c5a" stroke-width="1.6" stroke-linejoin="round"/>
+        <circle cx="8.5" cy="10.5" r="0.9" fill="#6ba86b"/>
+        <circle cx="12" cy="10.5" r="0.9" fill="#6ba86b"/>
+        <circle cx="15.5" cy="10.5" r="0.9" fill="#6ba86b"/>
+      </svg>
+      <h2>Private AI chat</h2>
+      <p>Talk to leading open models through a chat interface that protects your data.</p>
+      <ul>
+        <li>TEE-protected inference</li>
+        <li>Web search built in</li>
+        <li>File uploads &amp; documents</li>
+      </ul>
+    </div>
+
+    <div class="benefit-card">
+      <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <circle cx="9" cy="8" r="3" stroke="#5b8c5a" stroke-width="1.6"/>
+        <circle cx="16.5" cy="9.5" r="2.2" stroke="#6ba86b" stroke-width="1.6"/>
+        <path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" stroke="#5b8c5a" stroke-width="1.6" stroke-linecap="round"/>
+        <path d="M14.5 14.5c2.6-.3 4.5 1.4 4.5 4" stroke="#6ba86b" stroke-width="1.6" stroke-linecap="round"/>
+      </svg>
+      <h2>A seat at the table</h2>
+      <p>Members decide the future of the cooperative, not just consume it.</p>
+      <ul>
+        <li>Vote on models &amp; priorities</li>
+        <li>Shape pricing &amp; policy</li>
+        <li>Own the roadmap</li>
+      </ul>
+    </div>
+  </div>
+
   <div class="footer">
     <a href="mailto:info@inference.coop">info@inference.coop</a>
     &nbsp;·&nbsp;