refactor: home page CTA as proper button with confirmation state

src/pages/index.astro

@@ -138,17 +138,22 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
     <section class="join-section" id="join-section">
       {alreadyJoined ? (
         <div class="join-confirmed">
-          <h2 class="join-confirmed-title">Welcome to Project Bifrost.</h2>
+          <h2 class="join-confirmed-title">
+            Welcome to <em>Project Bifrost.</em>
+          </h2>
           <p class="body-lg join-confirmed-body">
             We will be in touch shortly to arrange the next step.
           </p>
         </div>
       ) : (
-        <div class="join-cta" id="join-cta">
+        <div id="join-cta">
-          <button class="join-btn" id="join-btn" type="button">
+          <h2 class="cta-headline">
-            I want to join Project Bifrost.
+            Ready to help <em>build this?</em>
+          </h2>
+          <button class="cta-btn" id="join-btn" type="button">
+            I want to join Project Bifrost
           </button>
-          <p class="join-hint body-sm">
+          <p class="cta-hint body-sm">
             We will follow up personally to discuss the right level of involvement for your organisation.
           </p>
         </div>
@@ -167,12 +172,14 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
       try {
         const res = await fetch('/api/join', { method: 'POST' });
         if (res.ok) {
-          const section = document.getElementById('join-cta');
+          const cta = document.getElementById('join-cta');
-          if (section) {
+          if (cta) {
-            section.innerHTML = `
+            cta.innerHTML = `
               <div class="join-confirmed">
-                <h2 class="join-confirmed-title">Welcome to Project Bifrost.</h2>
+                <h2 class="join-confirmed-title">
-                <p class="join-confirmed-body body-lg">
+                  Welcome to <em>Project Bifrost.</em>
+                </h2>
+                <p class="body-lg join-confirmed-body">
                   We will be in touch shortly to arrange the next step.
                 </p>
               </div>
@@ -180,11 +187,11 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
           }
         } else {
           btn.removeAttribute('disabled');
-          btn.textContent = 'I want to join Project Bifrost.';
+          btn.textContent = 'I want to join Project Bifrost';
         }
       } catch {
         btn.removeAttribute('disabled');
-        btn.textContent = 'I want to join Project Bifrost.';
+        btn.textContent = 'I want to join Project Bifrost';
       }
     });
   }
@@ -470,57 +477,80 @@ const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder
   .join-section {
     margin-top: var(--space-24);
     padding-bottom: var(--space-16);
+  }
+
+  /* CTA pre-click state */
+  #join-cta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
     max-width: 44rem;
   }
 
-  .join-cta {
+  .cta-headline {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-  }
-
-  .join-btn {
-    display: inline-block;
-    background: none;
-    border: none;
-    cursor: pointer;
     font-family: var(--font-serif);
-    font-size: var(--text-headline-lg);
+    font-size: var(--text-display-md);
-    font-weight: 700;
+    font-weight: 400;
-    font-style: italic;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-snug);
-    color: var(--secondary);
+    color: var(--on-surface);
-    padding: 0;
+    margin: 0;
-    text-align: left;
-    transition: color var(--duration-fast) var(--ease-standard);
   }
-  .join-btn:hover { color: var(--secondary-dim); }
-  .join-btn:disabled { opacity: 0.6; cursor: default; }
 
-  .join-hint {
+  .cta-headline em {
+    font-weight: 700;
+    font-style: italic;
+  }
+
+  .cta-btn {
+    display: inline-block;
+    align-self: flex-start;
+    background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
+    color: var(--on-secondary);
+    border: none;
+    border-radius: var(--radius-md);
+    padding: var(--space-4) var(--space-8);
+    font-family: var(--font-sans);
+    font-size: var(--text-body-lg);
+    font-weight: 600;
+    letter-spacing: var(--tracking-snug);
+    cursor: pointer;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+  .cta-btn:hover   { opacity: 0.92; }
+  .cta-btn:active  { opacity: 0.82; }
+  .cta-btn:disabled { opacity: 0.55; cursor: default; }
+
+  .cta-hint {
     color: var(--on-surface-muted);
     margin: 0;
     max-width: 36rem;
     line-height: var(--leading-relaxed);
   }
 
+  /* Confirmed state — server-rendered or injected by JS */
   .join-confirmed {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--space-5);
+    max-width: 44rem;
   }
 
   .join-confirmed-title {
     font-family: var(--font-serif);
-    font-size: var(--text-headline-lg);
+    font-size: var(--text-display-md);
-    font-weight: 700;
+    font-weight: 400;
-    font-style: italic;
     letter-spacing: var(--tracking-tight);
+    line-height: var(--leading-snug);
     color: var(--on-surface);
     margin: 0;
   }
 
+  .join-confirmed-title em {
+    font-weight: 700;
+    font-style: italic;
+  }
+
   .join-confirmed-body {
     color: var(--on-surface-variant);
     margin: 0;