Landing/About/guide polish + Proxify-style category filter bar

About Us:
- Replace the appreciation photo with an Apple-style scrolling marquee that
  focal-zooms the centred photo (main.js + _about.css); heading now sits above
  the carousel; remove the "Have any questions?" FAQ CTA (EN/MK/SI).

Landing hero:
- Turn the flat blue overlay into a Proxify-style radial vignette (light centre
  over the CTA, dark edges) and raise the "Become a member" button.

Filter bar (Events & Projects / Blog / News, EN/MK/SI):
- Add a shared Proxify-style rounded pill bar with a trailing search icon that
  swaps to a search field and opens a results dropdown (thumbnail + category +
  title). New css/pages/_filterbar.css + filter-search.js, layered on top of the
  existing filter/pagination JS. Blog category icons preserved.
- Balance the News filter bar spacing between the header and the cards.

Student Welcome Guide:
- Widen the intro paragraphs, constrain the full-bleed disclaimer to a normal
  centred width, and add space before the route configurator.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

main.js

@@ -1120,6 +1120,44 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    /**
+     * ===================================================================
+     * APPRECIATION MARQUEE (Apple-style focal zoom)
+     * The strip auto-scrolls via CSS; here we scale + brighten each card
+     * by its distance from the horizontal centre, so whichever photo is
+     * in the middle grows and lightens, then shrinks as it moves on.
+     * ===================================================================
+     */
+    function setupApprMarquee() {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+        const marquee = document.querySelector('.appr-marquee');
+        if (!marquee) return;
+        const cards = marquee.querySelectorAll('.appr-card');
+        if (!cards.length) return;
+
+        // scale: 1.0 at centre -> MIN_SCALE at the edges; brightness likewise
+        const MIN_SCALE = 0.72;
+        const MIN_BRIGHT = 0.5;
+
+        function frame() {
+            const vpCenter = window.innerWidth / 2;
+            for (let n = 0; n < cards.length; n++) {
+                const r = cards[n].getBoundingClientRect();
+                const cardCenter = r.left + r.width / 2;
+                // 0 at centre, ~1 near the edges of the viewport
+                let d = Math.abs(cardCenter - vpCenter) / vpCenter;
+                if (d > 1) d = 1;
+                const e = d * d; // ease so only the very centre is full size
+                const scale = 1 - (1 - MIN_SCALE) * e;
+                const bright = 1 - (1 - MIN_BRIGHT) * e;
+                cards[n].style.transform = 'scale(' + scale.toFixed(3) + ')';
+                cards[n].style.filter = 'brightness(' + bright.toFixed(3) + ')';
+            }
+            rafId = requestAnimationFrame(frame);
+        }
+        let rafId = requestAnimationFrame(frame);
+    }
+
     /**
      * ===================================================================
      * 8. ZAGON FUNKCIJ PO NALOŽITVI STRANI
@@ -1131,6 +1169,7 @@ document.addEventListener('DOMContentLoaded', function() {
     setupNewsletter();
     setupHubCarousel();
     setupAboutHero();
+    setupApprMarquee();
     setupLightbox();
 
 });