From 6d9619d976270316c9ef80705bdf34518f2849e2 Mon Sep 17 00:00:00 2001
From: inference-bot <bot@inference.coop>
Date: Tue, 29 Sep 2026 23:27:18 -0600
Subject: [PATCH] Dots v2: lighter palette, bigger soft dots, parallax drift on
 scroll; restore section shading alternation

---
 index.html | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 7321e28..2e77340 100644
--- a/index.html
+++ b/index.html
@@ -323,10 +323,98 @@
     h2 { font-size: 27px; }
     .hero h1 { font-size: 36px; }
   }
+
+/* Decorative dots: light green + bronze, varied sizes, scattered across the
+   page background. Implemented as a fixed full-viewport SVG layer behind
+   content (pointer-events: none, very low contrast so text stays readable).
+   Echoes the logo's pine-silhouette dot motif. */
+.bg-dots {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+.bg-dots circle {
+  opacity: 0.28;
+}
+.bg-dots .big { opacity: 0.22; }
+/* Parallax: dots scroll at a fraction of page speed (JS below) */
+.bg-dots {
+  will-change: transform;
+}
+.wrap, header.site-header, section, footer {
+  position: relative;
+  z-index: 1;
+}
+
 </style>
 </head>
 <body>
 
+<!-- Decorative background dots (logo motif echo) -->
+<svg class="bg-dots" aria-hidden="true">
+  <!-- scattered greens: light + a few big soft ones -->
+  <circle cx="4%"  cy="12%" r="5"  fill="#a8cdb4"/>
+  <circle cx="12%" cy="34%" r="4"  fill="#b5d4c0"/>
+  <circle cx="7%"  cy="58%" r="16" class="big" fill="#b7d8c2"/>
+  <circle cx="16%" cy="78%" r="5"  fill="#a8cdb4"/>
+  <circle cx="24%" cy="6%"  r="9"  fill="#b7d8c2"/>
+  <circle cx="31%" cy="22%" r="4"  fill="#b5d4c0"/>
+  <circle cx="28%" cy="52%" r="20" class="big" fill="#bfdccd"/>
+  <circle cx="38%" cy="70%" r="5"  fill="#a8cdb4"/>
+  <circle cx="47%" cy="10%" r="6"  fill="#b7d8c2"/>
+  <circle cx="55%" cy="30%" r="24" class="big" fill="#bfdccd"/>
+  <circle cx="52%" cy="55%" r="4"  fill="#a8cdb4"/>
+  <circle cx="63%" cy="14%" r="5"  fill="#b5d4c0"/>
+  <circle cx="68%" cy="42%" r="18" class="big" fill="#b7d8c2"/>
+  <circle cx="61%" cy="66%" r="6"  fill="#bfdccd"/>
+  <circle cx="72%" cy="58%" r="4"  fill="#b5d4c0"/>
+  <circle cx="78%" cy="8%"  r="8"  fill="#a8cdb4"/>
+  <circle cx="83%" cy="26%" r="4"  fill="#b5d4c0"/>
+  <circle cx="76%" cy="48%" r="6"  fill="#bfdccd"/>
+  <circle cx="86%" cy="38%" r="22" class="big" fill="#b7d8c2"/>
+  <circle cx="93%" cy="16%" r="5"  fill="#a8cdb4"/>
+  <circle cx="90%" cy="60%" r="4"  fill="#b5d4c0"/>
+  <circle cx="81%" cy="72%" r="17" class="big" fill="#bfdccd"/>
+  <circle cx="95%" cy="46%" r="4"  fill="#b5d4c0"/>
+  <circle cx="89%" cy="86%" r="5"  fill="#a8cdb4"/>
+  <circle cx="9%"  cy="88%" r="16" class="big" fill="#b7d8c2"/>
+  <circle cx="40%" cy="88%" r="4"  fill="#b5d4c0"/>
+  <circle cx="57%" cy="84%" r="5"  fill="#a8cdb4"/>
+  <circle cx="70%" cy="80%" r="18" class="big" fill="#bfdccd"/>
+  <!-- bronze accents, sparser -->
+  <circle cx="20%" cy="44%" r="5"  fill="#d9c3a8"/>
+  <circle cx="44%" cy="38%" r="4"  fill="#e0cbb2"/>
+  <circle cx="66%" cy="30%" r="18" class="big" fill="#d9c3a8"/>
+  <circle cx="87%" cy="70%" r="5"  fill="#e0cbb2"/>
+  <circle cx="33%" cy="76%" r="4"  fill="#d9c3a8"/>
+  <circle cx="58%" cy="72%" r="5"  fill="#e0cbb2"/>
+  <circle cx="97%" cy="78%" r="6"  fill="#d9c3a8"/>
+  <circle cx="3%"  cy="72%" r="4"  fill="#e0cbb2"/>
+</svg>
+
+<script>
+// Gentle parallax: the dot layer scrolls at ~12% of page speed and drifts
+// slightly sideways, so the background feels alive without distracting.
+(function () {
+  var el = document.querySelector('.bg-dots');
+  if (!el) return;
+  var ticking = false;
+  window.addEventListener('scroll', function () {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(function () {
+      var y = window.scrollY || 0;
+      el.style.transform = 'translateY(' + (y * -0.12) + 'px)';
+      ticking = false;
+    });
+  }, { passive: true });
+})();
+</script>
+
+
   <!-- Hero -->
   <section class="hero">
     <div class="wrap">
@@ -383,7 +471,7 @@
   </section>
 
   <!-- Membership -->
-  <section class="alt">
+  <section>
     <div class="wrap">
       <h2>One membership. A fair price, a full seat.</h2>
       <p class="lede">Everyone joins the same way, and everyone gets the same things — the difference is what you can afford to give, not what you get back.</p>
@@ -414,7 +502,7 @@
   </section>
 
   <!-- Values / usage -->
-  <section>
+  <section class="alt">
     <div class="wrap">
       <h2>Choose by what you value.</h2>
       <p class="lede">Different members care about different things. So we let you choose your AI by the values that matter to you — not lock you to a single provider.</p>