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>

en/about-us/index.html

@@ -358,17 +358,31 @@
         <!-- FAQ Call to Action Section -->
         <!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
         <section class="appreciation-section">
-            <div class="page-header-section">
+            <div class="appr-intro">
                 <h2>Our members & friends</h2>
                 <p class="appr-lead">MSOS is its people. With gratitude to everyone who has been part of our story — and everyone still writing it with us.</p>
             </div>
-            <div class="about-hero appreciation-hero" aria-label="MSOS members and friends">
-                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
-                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
-                <div class="about-hero-overlay"></div>
+            <!-- Scrolling photo carousel (Apple-style focal zoom) -->
+            <div class="appr-marquee" aria-label="MSOS members and friends">
+                <div class="appr-track">
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Macedonian Student Night in Ljubljana"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="MSOS members at an event"></div>
+                    <div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="MSOS members at an event"></div>
+                    <!-- duplicate set for a seamless infinite loop (aria-hidden) -->
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
+                    <div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
+                </div>
             </div>
             <div class="appreciation-names">
                 <span class="appr-name">Kristijan P.</span>
@@ -379,19 +393,6 @@
             </div>
             <p class="appreciation-note">Placeholder — the full list of members and friends is being compiled.</p>
         </section>
-
-        <section class="faq-cta-section">
-             <div class="faq-cta-container">
-                <div class="avatar-group">
-                     <img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar of Marija" class="avatar">
-                     <img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar of Kristijan" class="avatar large">
-                     <img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar of Lea" class="avatar">
-                </div>
-                <h3>Have any questions?</h3>
-                <p class="page-description" style="margin: 0;">Can't find the answer you're looking for? Please chat to our friendly team.</p>
-                <a href="#" class="btn btn-primary-orange">See all FAQs</a>
-             </div>
-        </section>
     </main>
 
     <!-- START_FOOTER -->

en/blog/index.html

@@ -436,6 +436,7 @@
     <script src="../../blog-filter.js"></script>
 
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>

en/news/index.html

@@ -489,6 +489,7 @@
 <!-- END_FOOTER -->
     <script src="../../main.js"></script>
     <script src="../../news-filter.js"></script>
+    <script src="../../filter-search.js"></script>
 
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>

en/projects/index.html

@@ -433,6 +433,7 @@
 <!-- END_FOOTER -->
 
     <script src="../../main.js"></script>
+    <script src="../../filter-search.js"></script>
 <link rel="stylesheet" href="/assistant.css">
 <script src="/assistant.js" defer></script>
 </body>