/* Tokens */
:root{
    --page-max:1200px;
    --gutter:20px;
  
    --purple:#403d84;
    --blue:#5d84c2;
    --green:#88aa6f;
    --green-700:#6f8f58;
    --dark-purple:#2f2c63;
    --heading:'Merriweather',serif;
  
    --bg:#ecf4f4;
    --light:#f5f7fa;
    --card:#ffffff;
    --ink:#233323;
    --muted:#5E6D5E;
  
    --border:#e0e4e8;
    --radius:20px;
    --shadow-1:0 6px 18px rgba(0,0,0,.08);
    --shadow-2:0 14px 40px rgba(0,0,0,.12);
  }
  
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:var(--ink);
    background: radial-gradient(1200px 700px at 80% 0%, #F7FBF6 0%, var(--bg) 60%) fixed;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%;display:block}
  a{text-decoration:none;color:inherit}
  

  /* Header */
.site-header{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.1); position:sticky; top:0; z-index:100; }
.site-header .container{ max-width:1200px; margin:auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:90px; }
.site-header__inner{display:contents}
.site-logo img{ height:80px; width:auto; display:block; }
.site-nav{ display:flex; align-items:center; gap:28px; } 
.site-nav a{ font-weight:700; font-size:15px; padding:10px 0; position:relative; } 
.site-nav a::after{ content:""; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--blue); transition:var(--transition); } 
.site-nav a:hover::after{width:100%} .site-nav a[aria-current="page"]{color:var(--purple)}
.site-cta{ display:flex; align-items:center; gap:12px; margin-left:28px; } 
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 22px;
  border-radius:24px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}

.pill:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(0,0,0,.15);
}

.pill--green{background:var(--green);}
.pill--green:hover{
  background:var(--green-700);
}

.pill--purple{background:var(--purple);}
.pill--purple:hover{background:var(--dark-purple);}

.pill--blue{background:var(--blue);}
.pill--blue:hover{filter:brightness(0.92);}
/* Section baseline */
  .section{padding:64px 0}
  .section--light{background:#F8FBF7;border-top:1px solid #EBF1EA;border-bottom:1px solid #EBF1EA}
  .section__title{
    font-family:'Merriweather',serif;
    color:#2f2c63;
    font-size:2.2rem;
    text-align:center;
    margin-bottom:28px;
  }
  

  /* =========================
GET INVOLVED HERO
========================= */

.get-involved-hero{
    background: linear-gradient(
      135deg,
      #1f1b4d 0%,
      #2f2c63 15%,
      #403d84 55%,
      #5a56a8 80%,
      #7a76d1 100%
    );
  
    background-size:300% 300%;
    animation:gradientShift 12s ease infinite;
  
    padding:6rem 8%;
    color:white;
  }
  
  
  /* TEXT */
  
  .hero-text h1,
  .hero-text p,
  .eyebrow{
    color:white;
  }
  /* Emphasize "Future" in green */
.hero-text h1 span {
    color: #cde2c0;
  }
  
  /* ANIMATION */
  
  @keyframes gradientShift{
  
    0%{
      background-position:0% 50%;
    }
  
    50%{
      background-position:100% 50%;
    }
  
    100%{
      background-position:0% 50%;
    }
  
  }
  .hero-content{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:4rem;
    align-items:center;
  }
  
  .hero-text h1{
    font-size:3.5rem;
    line-height:1.2;
    margin:1.5rem ;
  
    font-family:var(--heading);
    font-weight:700;
    letter-spacing:-2px;
  
    color:#fff;
  }
  
  .hero-description{
    font-size:1.1rem;
    max-width:600px;
    color:#555;
    margin-bottom:2rem;
  }
  
  .hero-buttons{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
  }
  
  .hero-image img {
    width: 100%;
    max-width: 700px;   /* increase this to make it bigger */
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: transform 5s ease;
  }
  
  
  
  /* =========================
  EYEBROW
  ========================= */
  
  .eyebrow{
    color:#5d84c2;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
  }
  
  
  /* =========================
  IMPACT STRIP
  ========================= */
  
  .impact-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
    padding:3rem 8%;
    background:#403d84;
    color:#fff;
  }
  
  .impact-card{
    text-align:center;
  }
  
  .impact-card h2{
    font-size:3rem;
    color:#fff;
  }
  
  
  /* =========================
  SURVEY
  ========================= */
  
  .survey-section{
    padding:6rem 8%;
    background:#f8fafc;
  }
  
  .survey-header{
    max-width:800px;
    margin:auto;
    text-align:center;
    margin-bottom:3rem;
  }
  
  .survey-header h2{
    margin:1rem 0;
  }
  
  .survey-container{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
  
  
  /* =========================
  WAYS TO HELP
  ========================= */
  
  .ways-to-help{
    padding:6rem 8%;
  }
  
  .section-heading{
    text-align:center;
    margin-bottom:4rem;
  }
  
  .help-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
  }
  
  .help-card{
    background:#fff;
    padding:2.5rem;
    border-radius:20px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
  }
  
  .help-card img{
    width:70px;
    margin:auto;
    margin-bottom:1rem;
  }
  
  .help-card h3{
    margin-bottom:1rem;
  }
  
  
  /* =========================
  FINAL CTA
  ========================= */
  
  .final-cta{
    padding:5rem 8%;
  }
  
  .cta-box{
    background:#403d84;
    color:#fff;
    padding:4rem;
    border-radius:28px;
    text-align:center;
  }
  
  .cta-box h2{
    color:#fff;
    margin-bottom:1rem;
  }
  
  .cta-box p{
    max-width:700px;
    margin:auto;
    margin-bottom:2rem;
  }
  
  
  /* =========================
  RESPONSIVE
  ========================= */
  
  @media(max-width:900px){

    .hero-content,
    .help-grid,
    .impact-strip{
      grid-template-columns:1fr;
    }
  
    .hero-text h1{
      font-size:4rem;
    }
  
  }
  /* Survey CTA */
  .survey-cta{background:linear-gradient(180deg,#f6fbf4,#eef6ea);border-top:1px solid #e7efe2;border-bottom:1px solid #e7efe2;padding:56px 0}
  .survey-cta__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
  .survey-cta__text h2{
    font-family:'Merriweather',serif;
    color:#2f2c63;
    font-size:2rem;
    margin-bottom:8px;
  }
  .survey-cta__text p{color:#496149;max-width:700px}
  .survey-cta__bullets{margin:12px 0 18px;padding-left:18px}
  .survey-cta__bullets li{list-style:disc;margin:4px 0;color:#496149}
  .cta-btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:48px;padding:0 22px;border-radius:24px;border:1px solid #6f8f58;
    background:#88aa6f;color:#fff;font-weight:800
  }
  .cta-btn:hover{background:#6f8f58}
  
  .survey-cta__card{
    position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;min-height:220px;box-shadow:var(--shadow-1);
    display:flex;align-items:center;justify-content:center;overflow:hidden
  }
  .survey-cta__ring{
    position:absolute;border-radius:50%;border:2px solid #e3eddc;inset:auto
  }
  .survey-cta__ring--a{width:240px;height:240px}
  .survey-cta__ring--b{width:160px;height:160px}
  .survey-cta__ring--c{width:90px;height:90px}
  .survey-cta__badge{
    position:absolute;bottom:10px;right:10px;background:#f0f3ff;color:#4b59a3;border:1px solid #e3e7ff;border-radius:12px;
    padding:6px 10px;font-weight:800;font-size:12px
  }
  
  /* Footer */
  .site-footer{background:#fff;border-top:1px solid rgba(0,0,0,.06);padding:24px 0;margin-top:24px}
  .site-footer__inner{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
  .footer-nav{display:flex;gap:16px}
  
  /* Responsive */
  @media (max-width:1100px){
    .hero__grid{grid-template-columns:1fr;gap:24px}
    .hero__art{height:360px}
    .survey-cta__grid{grid-template-columns:1fr}
  }
  @media (max-width:720px){
    .site-nav{display:none}
    .site-header__inner{grid-template-columns:auto auto}
    .focus{grid-template-columns:1fr 1fr}
  }
  @media (max-width:480px){
    .focus{grid-template-columns:1fr}
  }