feat: replace custom SVG underline with rough-notation for hand-drawn effect

- Add rough-notation library from CDN for authentic hand-drawn annotations
- Use RoughNotation.annotate() to create sketchy underline on hero text
- Remove inline SVG underline, keep clean strong tag with id
- Configured with brand color, 2.5px stroke, 2 iterations for natural look

Author: ddrayko

site/index.html

@@ -281,7 +281,7 @@ <h1 class="hero-title">
       </h1>
 
       <p class="hero-subtitle">
-        ZeroHost provides powerful <strong>free cloud hosting</strong> based on Hydrodactyl.
+        ZeroHost provides powerful <strong id="hero-highlight">free cloud hosting</strong> based on Hydrodactyl.
         Deploy Discord bots, APIs, Minecraft Vanilla servers, and apps — all for <strong>$0</strong>, no credit card required.
       </p>
 
@@ -768,6 +768,7 @@ <h5 class="footer-col-title">Legal</h5>
     </div>
   </div>
 
+  <script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
   <script src="script.js"></script>
 </body>
 </html>

site/script.js

@@ -351,4 +351,20 @@ document.querySelectorAll('a[href^="#"]').forEach(a => {
   });
 })();
 
+/* ---------- ROUGH NOTATION UNDERLINE ---------- */
+(function () {
+  const heroHighlight = document.getElementById('hero-highlight');
+  if (!heroHighlight || typeof RoughNotation === 'undefined') return;
+
+  const annotation = RoughNotation.annotate(heroHighlight, {
+    type: 'underline',
+    color: '#ee8132',
+    strokeWidth: 2.5,
+    padding: 4,
+    iterations: 2,
+    animationDuration: 800
+  });
+  annotation.show();
+})();
+