:root {
        --fe-green: #15803d;
        --fe-green-light: #dcfce7;
        --fe-green-xlight: #f0fdf4;
        --fe-yellow: #fbbf24;
        --fe-text: #0f172a;
        --fe-muted: #64748b;
        --fe-border: #e2e8f0;
        --fe-white: #ffffff;
        --fe-radius: 16px;
        --fe-shadow: 0 4px 24px rgba(15, 92, 46, 0.10);
    }

    .projects-hero {
        background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
        padding: 6rem 0 4rem;
        text-align: center;
    }

    .projects-title {
        font-size: clamp(2.2rem, 5vw, 3.2rem);
        font-weight: 900;
        color: var(--fe-text);
        margin-bottom: 1rem;
    }

    .projects-subtitle {
        font-size: 1.1rem;
        color: var(--fe-muted);
        max-width: 600px;
        margin: 0 auto 3rem;
    }

    .projects-grid {
        padding: 3rem 0 5rem;
        background: var(--fe-green-xlight);
    }

    .project-card {
        background: var(--fe-white);
        border-radius: var(--fe-radius);
        border: 1px solid var(--fe-border);
        box-shadow: var(--fe-shadow);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
    }

    .project-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 32px rgba(15, 92, 46, 0.16);
    }

    .project-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .fe-cta-section {
        background: linear-gradient(135deg, #0a3d1c 0%, var(--fe-green) 100%);
        padding: 4rem 0;
        text-align: center;
        color: var(--fe-white);
    }

    .fe-cta-section h2 {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        font-weight: 900;
        margin-bottom: 1rem;
    }

    .fe-cta-section p {
        font-size: 1.05rem;
        margin-bottom: 2rem;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }

    .fe-btn-primary {
        background: var(--fe-yellow);
        color: #111;
        font-weight: 700;
        padding: 0.8rem 2rem;
        border-radius: 12px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 20px rgba(251, 191, 36, 0.35);
    }

    .fe-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(251, 191, 36, 0.5);
    }