:root {
    --cg-blue: #2d50e6;
    --cg-dark: #0f172a;
    --cg-gold: #f9b933;
    --cg-light-bg: #f8fafc;
    --cg-white: #ffffff;
}

body { font-family: 'Inter', sans-serif; margin: 0; color: #334155; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }

/* Header & Hero */
.main-header { padding: 20px 0; border-bottom: 1px solid #e2e8f0; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 40px; }
.nav-links a { text-decoration: none; color: #475569; margin: 0 15px; font-weight: 500; }
.btn { padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: 600; display: inline-block; }
.btn-primary { background: var(--cg-blue); color: white; }
.btn-outline { border: 1px solid var(--cg-blue); color: var(--cg-blue); margin-left: 10px; }

.hero { padding: 100px 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.hero-text h1 { font-size: 2.8rem; color: var(--cg-dark); margin-bottom: 20px; }
.hero-image img { width: 100%; }

/* Dark Section */
.how-it-works-dark { background: var(--cg-dark); color: white; padding: 80px 0; }
.section-intro { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step-num { background: var(--cg-blue); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-weight: bold; }

/* Client Grid */
.clients { padding: 80px 0; background: var(--cg-light-bg); }
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.client-logo { background: white; padding: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.client-logo img { max-height: 60px; filter: grayscale(100%); transition: 0.3s; }
.client-logo:hover img { filter: grayscale(0%); }

/* Mission */
.mission { padding: 80px 0; }
.mission-flex { display: flex; gap: 50px; align-items: center; }
.mission-image img { width: 100%; border-radius: 12px; }


/* Donor Section Styling */
.how-it-works-donors {
    padding: 80px 0;
    background: var(--cg-white);
}

.donor-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}

.donor-mockup img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}

.donor-text h2 {
    font-size: 2.2rem;
    color: var(--cg-dark);
    margin-bottom: 20px;
}

.donor-steps {
    border-top: 1px solid #e2e8f0;
    padding-top: 60px;
}

.step-num.gold {
    background: var(--cg-gold); /* Using the gold color from the branding */
    color: var(--cg-dark);
}

/* Team Styling */
.team { padding: 80px 0; }
.team-intro { max-width: 800px; margin: 0 auto 50px; color: var(--cg-text); }
.team-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 30px; 
    text-align: center;
}
.team-card img { 
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-bottom: 15px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.team-card h4 { margin: 5px 0; color: var(--cg-dark); }
.team-card p { font-size: 0.9rem; color: var(--cg-text); }

/* Footer Styling */
.site-footer { padding: 60px 0 40px; background: #fdfdfd; }
.statement-boxes { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-bottom: 60px;
}
.statement-box { 
    background: #24292e; 
    color: white; 
    padding: 60px 40px; 
    border-radius: 12px; 
    text-align: center;
}
.statement-box h3 { font-size: 1.5rem; margin-bottom: 15px; opacity: 0.8; }
.statement-box p { font-size: 1.25rem; font-weight: 300; }

.final-cta { 
    border-top: 1px solid #e2e8f0; 
    padding-top: 40px; 
}
.cta-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}