<style>
  :root {
    /* Brand palette */
    --sssa-purple: #5B2C6F;
    --sssa-green:  #2ECC71;
    --sssa-charcoal: #222831;
    --sssa-gray: #F5F7FA;
    --sssa-white: #FFFFFF;
  }.sssa-footer {
  background: #111723;      /* dark charcoal */
  color: #cfd6df;
  padding: 30px 20px;
  text-align: center;
}

.sssa-footer a {
  color: #2ECC71;           /* green links */
  text-decoration: none;
  margin: 0 8px;
  font-weight: 500;
}

.sssa-footer a:hover {
  color: #5B2C6F;           /* purple hover */
}


  /* Base typography and spacing */
  body, .sssa-wrap { font-family: Inter, sans-serif; margin:0; padding:0; }
  .sssa-wrap { max-width:1100px; margin:auto; padding:0 20px; }
  h1, h2, h3 { font-family:Poppins, sans-serif; margin-top:0; }
  h1 { font-size:2.5rem; margin-bottom:10px; color:var(--sssa-white); }
  h2 { font-size:1.75rem; margin-bottom:12px; color:var(--sssa-charcoal); }
  h3 { font-size:1.4rem; margin-bottom:8px; color:var(--sssa-charcoal); }
  p { margin-bottom:12px; color:#30343a; line-height:1.6; }

  /* Buttons */
<!-- CTA BUTTONS SECTION -->
<div class="cta-buttons">
  <a href="about.html" 
     class="sssa-btn sssa-btn--primary" 
     title="Learn more about Safe Space Support Africa">Read More</a>

  <a href="mailto:info@safespacesupportafrica.org?subject=I%20want%20to%20get%20involved%20with%20SSSA&body=Hi%20Safe%20Space%20Support%20Africa%20Team,%0A%0AI%20am%20interested%20in%20getting%20involved%20in%20your%20programs.%20Please%20find%20my%20details%20below:%0A%0AFull%20Name:%0ALocation:%0AEmail%20or%20WhatsApp:%0AInterest%20Area%20(Volunteer,%20Partner,%20Donate):%0A%0AThank%20you!%0A" 
     class="sssa-btn sssa-btn--ghost" 
     title="Click to email Safe Space Support Africa directly.">Get Involved</a>

  <a href="https://wa.me/+265995789771?text=Hi%20Safe%20Space%20Support%20Africa!%20I%20want%20to%20learn%20more%20about%20your%20work." 
     class="sssa-btn sssa-btn--primary" 
     title="Message us directly on WhatsApp.">Message on WhatsApp</a>
</div>

<style>
  /* CTA Container Layout */
  .cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
  }

  /* Base Button Style */
  .sssa-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease-in-out;
  }

  /* Primary Button */
  .sssa-btn--primary {
    background: var(--sssa-purple);
    color: var(--sssa-white);
    box-shadow: 0 3px 8px rgba(106, 27, 154, 0.25);
  }

  /* Ghost Button */
  .sssa-btn--ghost {
    background: transparent;
    color: var(--sssa-purple);
    border: 2px solid var(--sssa-purple);
  }

  /* Hover Effects */
  .sssa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(106, 27, 154, 0.35);
    filter: brightness(1.05);
  }

  /* Responsive Behavior */
  @media (max-width: 768px) {
    .cta-buttons a {
      width: 100%;
      text-align: center;
    }
  }
</style>
  /* Card & grid */
  .sssa-grid { display:grid; gap:20px; }
  .sssa-card { background:var(--sssa-white); border-radius:14px; padding:20px; box-shadow:0 6px 20px rgba(0,0,0,.06); }
  @media (min-width:760px) { .sssa-grid { grid-template-columns:repeat(3,1fr); } }

  /* Hero background */
  .sssa-hero { background:linear-gradient(180deg, var(--sssa-purple) 0%, var(--sssa-purple) 65%, var(--sssa-green) 65%, var(--sssa-green) 70%, var(--sssa-gray) 70%); padding:60px 0; }

  /* Footer */
  .sssa-footer { background:#111723; color:#cfd6df; padding:20px 0; font-size:0.875rem; }
  .sssa-footer a { color:#d9ffea; text-decoration:underline; }
</style>

<!-- HERO -->
<section class="sssa-hero">
  <div class="sssa-wrap">
    <h1>Talk. Heal. Grow.</h1>
    <p>Safe Space Support Africa creates peer-led safe spaces for women, youth, and caregivers in Malawi to heal, learn, and thrive together.</p>
    <a class="sssa-btn sssa-btn--primary" href="https://wa.me/265995789771" target="_blank">Join Our WhatsApp Community</a>
    <a class="sssa-btn sssa-btn--ghost" href="mailto:info@safespacesupportafrica.org">Partner With Us</a>
  </div>
</section>

<!-- PROGRAMS SNAPSHOT -->
<section>
<!-- SSSA: Our Activities -->
<section id="activities" style="padding:42px 0;background:#f8fafc;">
  <div style="max-width:1120px;margin:0 auto;padding:0 22px;">
    <h2 style="margin:0 0 8px;font-size:30px;color:#1e3a8a;">Our Activities</h2>
    <p style="margin:0 0 18px;color:#475569;">Live programmes running under Safe Space Support Africa.</p>

    <!-- At a Glance -->
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;">
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;">
        <h3 style="margin:0 0 6px;font-size:18px;">Peer-Support Mentor Training</h3>
        <p style="margin:0 0 8px;color:#475569;">Training cohorts launched. Mentors are being equipped to run safe, structured circles.</p>
        <ul style="margin:0;padding-left:18px;color:#334155;">
          <li>Curriculum: trauma-informed, safeguarding, referral basics</li>
          <li>Status: <strong>In progress</strong> (new cohorts forming)</li>
        </ul>
      </div>

      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;">
        <h3 style="margin:0 0 6px;font-size:18px;">Mothers’ Club</h3>
        <p style="margin:0 0 8px;color:#475569;">Peer circles for single mothers focused on support, problem-solving, and resilience.</p>
        <ul style="margin:0;padding-left:18px;color:#334155;">
          <li>Cadence: <strong>Twice a month</strong></li>
          <li>Format: in-person + WhatsApp follow-ups</li>
        </ul>
      </div>

      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;">
        <h3 style="margin:0 0 6px;font-size:18px;">Community Forum</h3>
        <p style="margin:0 0 8px;color:#475569;">Whole-community platform bringing together women, teachers, and youth.</p>
        <ul style="margin:0;padding-left:18px;color:#334155;">
          <li>Participants: women; primary & secondary teachers; youth forum</li>
          <li>Goal: surface issues early; align school & home support</li>
        </ul>
      </div>
    </div>
    <!-- Upcoming Schedule -->
    <div style="margin-top:24px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;">
      <h3 style="margin:0 0 8px;font-size:18px;">Upcoming (Next 4 Weeks)</h3>
      <ul style="margin:0;padding-left:18px;color:#334155;line-height:1.5;">
        <li><strong>Mothers’ Club</strong> — Meeting #1 (Bi-monthly) • <em>Date TBC</em></li>
        <li><strong>Mothers’ Club</strong> — Meeting #2 (Bi-monthly) • <em>Date TBC</em></li>
        <li><strong>Mentor Training</strong> — Cohort Session • <em>Date TBC</em></li>
        <li><strong>Community Forum</strong> — Teachers + Youth roundtable • <em>Date TBC</em></li>
      </ul>
      <p style="margin:10px 0 0;color:#64748b;font-size:14px;">Want to join or refer someone? Email: <a info@safespacesupportafrica.org  or WhatsApp: <a href="tel:+265995789771">+265 995 789 771</a>.</p>
    </div>

    <!-- Impact Snapshot -->
    <div style="margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;">
      <div style="background:#ecfccb;border:1px solid #a3e635;border-radius:16px;padding:16px;">
        <div style="font-size:28px;font-weight:800;">28</div>
        <div style="color:#365314;">Women registered</div>
      </div>
      <div style="background:#dbeafe;border:1px solid #93c5fd;border-radius:16px;padding:16px;">
        <div style="font-size:28px;font-weight:800;">11</div>
        <div style="color:#1e3a8a;">Active on WhatsApp</div>
      </div>
      <div style="background:#fee2e2;border:1px solid #fecaca;border-radius:16px;padding:16px;">
        <div style="font-size:28px;font-weight:800;">20</div>
        <div style="color:#991b1b;">Volunteers ready for training</div>
      </div>
    </div>
  </div>
</section>
  <div class="sssa-wrap">
    <h2>Our Programs</h2>
    <div class="sssa-grid">
      <div class="sssa-card">
        <h3>Safe Space Youth</h3>
        <p>Peer clubs, mentorship and life-skills workshops in schools and communities.</p>
        <a class="sssa-btn sssa-btn--primary" href="mailto:info@safespacesupportafrica.org">Partner a School</a>
      </div>
      <div class="sssa-card">
        <h3>Safe Space Mothers</h3>
        <p>Peer groups and WhatsApp circles for mothers to build resilience and parenting support.</p>
        <a class="sssa-btn sssa-btn--primary" href="https://wa.me/265995789771" target="_blank">Join a Mothers' Circle</a>
      </div>
      <div class="sssa-card">
        <h3>Safe Space Fathers</h3>
        <p>Circles for men to talk stress, marriage, fatherhood and positive masculinity.</p>
        <a class="sssa-btn sssa-btn--primary" href="mailto:info@safespacesupportafrica.org">Start a Fathers' Circle</a>
      </div>
    </div>
  </div>
</section>

<!-- GET INVOLVED STRIP -->
<section style="background:var(--sssa-gray); padding:40px 0; text-align:center;">
  <div class="sssa-wrap">
    <h2>Get Involved</h2>
          <a href="mailto:info@safespacesupportafrica.org?subject=I%20want%20to%20get%20involved%20with%20Safe%20Space%20Support%20Africa&body=Hi%20Safe%20Space%20Support%20Africa%20Team,%0A%0AI%20am%20interested%20in%20getting%20involved%20in%20your%20programs.%20Please%20find%20my%20details%20below:%0A%0AFull%20Name:%0ALocation:%0AEmail%20or%20WhatsApp:%0AInterest%20Area%20(Volunteer,%20Partner,%20Donate):%0A%0AHow%20I%20heard%20about%20SSSA:%0A%0AThank%20you!%0A"
title="Click to email Safe Space Support Africa directly to join, volunteer, or contribute.">
Get Involved
</a>

    <p>Train as a peer-support listener, co-design with us, or refer someone who needs support.</p>
   
title="Click to email Safe Space Support Africa directly to join, volunteer, or contribute.">
Get Involved
</a>
    <a class="sssa-btn sssa-btn--primary" href="https://wa.me/265995789771" target="_blank">Volunteer via WhatsApp</a>
    <a class="sssa-btn sssa-btn--ghost" href="mailto:info@safespacesupportafrica.org">Partner With Us</a>
    <a class="sssa-btn sssa-btn--ghost" href="mailto:info@safespacesupportafrica.org">Refer Someone</a>
  </div>
</section>

<!-- YOUTH -->
<section id="youth" style="padding:50px 0;">
  <div class="sssa-wrap">
    <h2>Safe Space Youth</h2>
    <p>Peer clubs, mentorship, and life-skills workshops to end child marriage and abuse.</p>
    <a class="sssa-btn sssa-btn--primary" href="mailto:info@safespacesupportafrica.org">Partner a School</a>
  </div>
</section>

<!-- MOTHERS -->
<section id="mothers" style="background:var(--sssa-gray); padding:50px 0;">
  <div class="sssa-wrap">
    <h2>Safe Space Mothers</h2>
    <p>Peer groups, WhatsApp circles and resilience meet-ups for mothers across Africa.</p>
    <a class="sssa-btn sssa-btn--primary" href="https://wa.me/265995789771" target="_blank">Join a Mothers' Circle</a>
  </div>
</section>

<!-- FATHERS -->
<section id="fathers" style="padding:50px 0;">
  <div class="sssa-wrap">
    <h2>Safe Space Fathers</h2>
    <p>Circles to discuss stress, fatherhood, and positive masculinity; partnerships with workplaces and churches.</p>
    <a class="sssa-btn sssa-btn--primary" href="mailto:info@safespacesupportafrica.org">Start a Fathers' Circle</a>
  </div>
</section>
html { scroll-behavior: smooth; }
section { scroll-margin-top: 80px; }

.sssa-header { position: sticky; top:0; z-index:9999; background:#5B2C6F; padding:12px 0; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.nav-bar { display:flex; justify-content:space-between; align-items:center; }
.logo a { color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem; }
.nav-links a { color:#fff; text-decoration:none; margin-left:18px; font-weight:500; padding:6px 0; border-bottom:2px solid transparent; transition:.2s; }
.nav-links a:hover { border-bottom-color:#2ECC71; }

@media (max-width:768px){
  .nav-bar{ flex-direction:column; gap:8px; }
  .nav-links a{ display:inline-block; margin:6px 10px 0; }
}

/* Make hero content taller & centered on mobile */
@media (max-width: 768px) {
  .sssa-hero {
    padding: 100px 20px;  /* more breathing space */
    text-align: center;
  }
  .sssa-hero h1 {
    font-size: 2rem;  /* smaller headline */
    line-height: 1.2;
  }
  .sssa-hero p {
    font-size: 1rem;
    margin-bottom: 24px;
  }
  .sssa-btn {
    display: block;
    width: 100%;         /* full-width buttons */
    margin: 10px 0;
    font-size: 1rem;
  }
}

/* Desktop tweaks: make buttons uniform */
.sssa-btn {
  min-width: 220px;      /* consistent width */
  text-align: center;