Become a Member: bento benefits, merged/redesigned join form, floating CTA, fixes

Why become a member
- Rebuild the benefits grid as a 3x3 bento: 7 icon cards + 2 real event photos
  (with captions), fixes the orphan card, adds hover motion. Swap the blank
  fa-house-heart (Pro) for fa-house-user (Free) on "Feel at home".

Join form
- Merge the duplicate "There is a place for you here" section into the form's
  path step (student / supporter cards now carry the descriptions); drop the
  separate section. New heading "There is a place for you here"; centred layout.
- Redesign the choice cards: colour-coded (student orange / supporter teal)
  icon circles, descriptions, hover lift + "Choose this" reveal.
- Fix the stray "Support MSOS" submit button showing on the path step.

Conversion + polish
- Floating "Become a member" CTA that appears after the hero and hides near the
  form/final CTA, so the ask stays reachable without scrolling to the bottom.
- More space between section titles and their cards (numbers, reals, tests,
  showcase, benefits).
- Testimonials: Elena -> Katerina (Koper); un-swap Ana (Maribor) and Marko
  (Ljubljana); remove the "sample quotes" placeholder note.

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

en/become-a-member/index.html

@@ -158,6 +158,7 @@
 <!-- END_HEADER -->
 
     <main class="member-page">
+        <a class="mm-sticky-cta" href="#join-form" hidden><i class="fas fa-user-plus" aria-hidden="true"></i> Become a member</a>
         <section class="mm-hero">
             <div class="mm-hero-text">
                 <span class="mm-eyebrow">Become a member</span>
@@ -174,6 +175,10 @@
         <section class="mm-section">
             <h2 class="mm-h2">Why become a member?</h2>
             <div class="mm-benefits">
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/event4-image2.webp" alt="Macedonian students gathered together in Ljubljana" loading="lazy">
+                    <figcaption>Real events, real friendships</figcaption>
+                </figure>
                 <article class="mm-benefit">
                     <div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
                     <h3>Find your people</h3><p>Meet Macedonian students across Slovenia and build friendships outside the classroom.</p>
@@ -199,9 +204,13 @@
                     <h3>Grow your network</h3><p>Meet students, alumni, professionals, institutions and partners.</p>
                 </article>
                 <article class="mm-benefit">
-                    <div class="mm-benefit-ico"><i class="fas fa-house-heart" aria-hidden="true"></i></div>
+                    <div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
                     <h3>Feel at home away from home</h3><p>Belong to a community where you never have to explain where you come from.</p>
                 </article>
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/msnl-3.webp" alt="Students writing their names in Cyrillic at Macedonian Student Night" loading="lazy">
+                    <figcaption>A piece of home in Slovenia</figcaption>
+                </figure>
             </div>
         </section>
 
@@ -274,18 +283,17 @@
             <div class="mm-tests">
                 <figure class="mm-test">
                     <blockquote>I joined because I wanted to meet people. I stayed because MSOS became part of my life in Slovenia.</blockquote>
-                    <figcaption><strong>Ana</strong><span>Student, Ljubljana</span></figcaption>
+                    <figcaption><strong>Ana</strong><span>Student, Maribor</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>When I moved to Slovenia, I did not know where to begin. Through MSOS I found support, friends and opportunities.</blockquote>
-                    <figcaption><strong>Marko</strong><span>Student, Maribor</span></figcaption>
+                    <figcaption><strong>Marko</strong><span>Student, Ljubljana</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>Being part of the team taught me more than any classroom. I organised events, met partners and grew a lot.</blockquote>
-                    <figcaption><strong>Elena</strong><span>Volunteer, Koper</span></figcaption>
+                    <figcaption><strong>Katerina</strong><span>Volunteer, Koper</span></figcaption>
                 </figure>
             </div>
-            <p class="mm-note mm-note--center">Sample quotes to replace with real testimonials.</p>
         </section>
 
         <section class="mm-section" id="showcase">
@@ -319,30 +327,32 @@
             <div class="mm-center"><a class="btn btn-secondary" href="../news/">See all events and projects</a></div>
         </section>
 
-        <section class="mm-section">
-            <h2 class="mm-h2">There is a place for you here</h2>
-            <div class="mm-who">
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>For students</h3><p>Current students, future students, bachelor and master students, in every Slovenian study city.</p><a class="mm-who-link" href="#join-form">I am a student <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>For supporters</h3><p>You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.</p><a class="mm-who-link" href="#join-form">I want to support MSOS <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-            </div>
-        </section>
-
         <section class="ms-section" id="join-form">
             <div class="ms-head">
-                <span class="ms-eyebrow">Membership form</span>
-                <h2>Join in a couple of minutes</h2>
-                <p>A few friendly questions. You do not need to decide now how active you want to be.</p>
+                <span class="ms-eyebrow">Join us</span>
+                <h2>There is a place for you here</h2>
+                <p>Choose how you would like to join. It takes a couple of minutes, and you can decide later how active you want to be.</p>
             </div>
             <form class="ms-form" novalidate>
                 <div class="ms-hp" aria-hidden="true"><label>Do not fill this in<input type="text" name="company" tabindex="-1" autocomplete="off"></label></div>
                 <div class="ms-progress" data-step="Step" data-of="of" hidden><div class="ms-progress-track"><div class="ms-progress-bar"></div></div><span class="ms-progress-text"></span></div>
                 <div class="ms-alert" hidden data-required-msg="Please fill in the required fields." data-cooldown-msg="It looks like you have just sent a request. Please give us a moment before sending another.">Please fill in the required fields.</div>
 
-                <div class="ms-step" data-step="path" data-flow="both">
-                    <h3>How would you like to connect with MSOS?</h3>
+                <div class="ms-step ms-step--path" data-step="path" data-flow="both">
+                    <h3 class="ms-path-prompt">Which one sounds like you?</h3>
                     <div class="ms-paths">
-                        <button type="button" class="ms-path" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>I am a student</strong></button>
-                        <button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>I want to support MSOS</strong></button>
+                        <button type="button" class="ms-path ms-path--student" data-path="student">
+                            <span class="ms-path-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
+                            <strong>I am a student</strong>
+                            <span class="ms-path-desc">Current students, future students, bachelor and master students, in every Slovenian study city.</span>
+                            <span class="ms-path-go">Choose this <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
+                        <button type="button" class="ms-path ms-path--supporter" data-path="supporter">
+                            <span class="ms-path-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></span>
+                            <strong>I want to support MSOS</strong>
+                            <span class="ms-path-desc">You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.</span>
+                            <span class="ms-path-go">Choose this <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
                     </div>
                 </div>