feat(ux): replace generic hover hints with specific interaction tips per section

Author: alexandre-mrt

docs/index.html

@@ -68,7 +68,7 @@ <h2 class="section-title">The Building Blocks</h2>
         </div>
       </div>
     </div>
-    <p class="hover-hint">Hover to explore</p>
+    <p class="hover-hint">Hover any bubble to see how many perfumes use that note</p>
   </section>
 
   <!-- Section 2: His and Hers -->
@@ -97,7 +97,7 @@ <h2 class="section-title">His &amp; Hers</h2>
         </div>
       </div>
     </div>
-    <p class="hover-hint">Hover to explore</p>
+    <p class="hover-hint">Hover an axis to compare exact counts across genders &middot; Toggle unisex with the button</p>
   </section>
 
   <!-- Section 3: The Ratings Game -->
@@ -126,7 +126,7 @@ <h2 class="section-title">The Ratings Game</h2>
         </div>
       </div>
     </div>
-    <p class="hover-hint">Hover to explore</p>
+    <p class="hover-hint">Hover a dot to find out which note hides behind its rating</p>
   </section>
 
   <!-- Section 4: Fifty Years of Fragrance -->
@@ -155,6 +155,7 @@ <h2 class="section-title">Fifty Years of Fragrance</h2>
         </div>
       </div>
     </div>
+    <p class="hover-hint">Hover the chart to see how each note family rose or fell decade by decade</p>
   </section>
 
   <!-- Section 5: The Price of Scent -->
@@ -183,6 +184,7 @@ <h2 class="section-title">The Price of Scent</h2>
         </div>
       </div>
     </div>
+    <p class="hover-hint">Hover any dot to see brand, price, and fragrance type</p>
   </section>
 
   <!-- Sidebar Visualizations -->
@@ -200,13 +202,13 @@ <h2 class="section-title">Deep Dive</h2>
         <h3>Note Connections</h3>
         <p class="card-description">Which notes tend to appear together? This chord diagram reveals the hidden relationships.</p>
         <div class="viz-container" id="viz-chord"></div>
-        <p class="hover-hint">Hover to explore</p>
+        <p class="hover-hint">Hover a note to reveal its strongest pairings</p>
       </div>
       <div class="deep-dive-card">
         <h3>The Flow of Fragrance</h3>
         <p class="card-description">How do notes flow from the first impression (top) through the heart (middle) to the lasting base?</p>
         <div class="viz-container" id="viz-sankey"></div>
-        <p class="hover-hint">Hover to explore</p>
+        <p class="hover-hint">Hover a note to trace its journey through the three layers</p>
       </div>
     </div>
   </section>
@@ -241,7 +243,7 @@ <h2 class="section-title">The Geography of Scent</h2>
         </div>
       </div>
     </div>
-    <p class="hover-hint">Hover to explore</p>
+    <p class="hover-hint">Click a region card below to compare how each part of the world builds fragrance</p>
   </section>
 
   <!-- Section 8: The Full Picture -->
@@ -255,7 +257,7 @@ <h2 class="section-title">The Full Picture</h2>
       </p>
     </div>
     <div class="viz-container viz-full-width" id="viz-heatmap"></div>
-    <p class="hover-hint">Hover to explore</p>
+    <p class="hover-hint">Click any accord to discover which scent families pair best together</p>
   </section>
 
   <!-- Footer -->