Elevate public site UX: premium hero, motion, scrollspy, shared footer

Redesign-preserve pass on the light editorial theme (dials 7/5/3):

- Hero: live availability status, accent value-prop, role line, social row,
  staggered entrance
- Motion (all motivated, reduced-motion safe): CSS scroll-driven reading
  progress bar, scrollspy nav with animated underline, CTA/blog arrow nudges,
  service hover accent rule, portfolio cover scale, card lift
- Shared multi-column footer across home + blog (brand, nav, contact, social)
- Fix anchor scroll offset under the fixed navbar (scroll-margin-top)
- Wire real social: LinkedIn, Instagram, email (code.soroush@gmail.com)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

wwwroot/js/app.js

@@ -15,6 +15,30 @@
   io.observe(sentinel);
 })();
 
+/* ─── Scrollspy: highlight the nav link for the section in view ───────── */
+(function () {
+  const links = Array.from(document.querySelectorAll('#navbar a[href*="#"]'));
+  if (!links.length || !('IntersectionObserver' in window)) return;
+  const map = {};
+  links.forEach((a) => {
+    const id = (a.getAttribute('href') || '').split('#')[1];
+    if (id) (map[id] = map[id] || []).push(a);
+  });
+  const sections = Object.keys(map)
+    .map((id) => document.getElementById(id))
+    .filter(Boolean);
+  if (!sections.length) return;
+
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((e) => {
+      if (!e.isIntersecting) return;
+      links.forEach((a) => a.classList.remove('active'));
+      (map[e.target.id] || []).forEach((a) => a.classList.add('active'));
+    });
+  }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 });
+  sections.forEach((s) => io.observe(s));
+})();
+
 /* ─── Mobile menu toggle ─────────────────────────────────────────────── */
 (function () {
   const btn  = document.getElementById('menu-btn');