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>

css/pages/_about.css

@@ -509,20 +509,51 @@
 /* ==========================================================================
    Appreciation to members & friends (photo carousel + names)
    ========================================================================== */
-.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; }
-.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; }
-.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; }
-.appr-lead { font-size: 18px; line-height: 28px; color: #667085; max-width: 720px; margin: 0 auto; }
-/* Contained variant of the crossfade hero (overrides the full-bleed .about-hero) */
-.appreciation-hero {
-    position: relative; left: auto; transform: none;
-    width: 100%; max-width: 1000px; margin: 0 auto 34px;
-    height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden;
+.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; overflow: hidden; }
+.appreciation-section h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 700; letter-spacing: -0.02em; color: #101828; margin: 0 0 16px; }
+.appr-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #667085; max-width: 760px; margin: 0 auto; }
+
+/* Apple-style scrolling photo marquee */
+.appr-marquee {
+    position: relative; left: 50%; transform: translateX(-50%);
+    width: 100vw; overflow: hidden;
+    /* extra vertical room so the enlarged focal card is not clipped */
+    margin-bottom: 48px; padding: 40px 0;
+    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
+            mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
 }
+.appr-track {
+    display: flex; align-items: center; width: max-content;
+    animation: appr-scroll 70s linear infinite;
+}
+.appr-marquee:hover .appr-track { animation-play-state: paused; }
+.appr-card {
+    flex: 0 0 auto; margin-right: 24px;
+    width: clamp(240px, 27vw, 380px);
+    height: clamp(170px, 19vw, 270px);
+    border-radius: 20px; overflow: hidden; background: #EAF1F4;
+    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
+    /* base state before JS focal-scaling kicks in */
+    transform: scale(0.82); transform-origin: center center;
+    will-change: transform, filter;
+    filter: brightness(0.62);
+}
+.appr-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
+@keyframes appr-scroll {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-50%); }
+}
+.appr-intro { margin-bottom: 40px; }
+
 .appreciation-names {
     display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
     max-width: 900px; margin: 0 auto;
 }
+@media (prefers-reduced-motion: reduce) {
+    .appr-track { animation: none; }
+    /* no movement => show all cards evenly, no focal zoom/dim */
+    .appr-card { transform: scale(0.92); filter: none; }
+}
 .appr-name {
     display: inline-block; padding: 8px 16px; border-radius: 999px;
     background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72;