:root {
    --dh-blue: #163b6d;
    --dh-green: #5f9f78;
    --dh-gold: #d6a645;
    --dh-cream: #fbf7ef;
    --dh-ink: #203244;
}

body {
    color: var(--dh-ink);
    background: var(--dh-cream);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.navbar {
    box-shadow: 0 6px 24px rgba(22, 59, 109, 0.06);
}

.navbar-brand {
    color: var(--dh-blue) !important;
    letter-spacing: 0;
}

.nav-link {
    color: #42566d;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: var(--dh-blue) !important;
}

.btn-donation {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--dh-green);
    --bs-btn-border-color: var(--dh-green);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #4f8b67;
    --bs-btn-hover-border-color: #4f8b67;
    --bs-btn-active-bg: #467d5d;
    --bs-btn-active-border-color: #467d5d;
    font-weight: 700;
}

.btn-outline-primary {
    --bs-btn-color: var(--dh-blue);
    --bs-btn-border-color: var(--dh-blue);
    --bs-btn-hover-bg: var(--dh-blue);
    --bs-btn-hover-border-color: var(--dh-blue);
}

.hero-section,
.page-header {
    background:
        linear-gradient(135deg, rgba(22, 59, 109, 0.95), rgba(95, 159, 120, 0.88)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M15 40h90M35 15v90M85 15v90' stroke='%23ffffff' stroke-opacity='.08' stroke-width='8' fill='none'/%3E%3C/svg%3E");
    color: #ffffff;
}

.hero-section {
    padding: 6rem 0;
}

.page-header {
    padding: 5rem 0;
}

.hero-section .lead,
.page-header .lead {
    color: rgba(255, 255, 255, 0.88);
    max-width: 760px;
}

.eyebrow {
    color: var(--dh-gold);
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-panel,
.placeholder-panel,
.form-panel,
.mission-band {
    background: #ffffff;
    border: 1px solid rgba(22, 59, 109, 0.08);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(22, 59, 109, 0.12);
    color: var(--dh-ink);
}

.hero-panel,
.placeholder-panel,
.form-panel {
    padding: 2rem;
}

.form-label {
    color: var(--dh-blue);
    font-weight: 700;
}

.form-control,
.form-select {
    border-color: rgba(22, 59, 109, 0.18);
    color: var(--dh-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dh-green);
    box-shadow: 0 0 0 0.25rem rgba(95, 159, 120, 0.18);
}

.section-padding {
    padding: 4.5rem 0;
}

.soft-section {
    background: #eef7f1;
}

.section-heading {
    max-width: 680px;
    margin-bottom: 2rem;
}

.info-card,
.mini-card,
.contact-list {
    background: #ffffff;
    border: 1px solid rgba(22, 59, 109, 0.08);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(22, 59, 109, 0.07);
}

.info-card {
    padding: 1.5rem;
}

.info-card p {
    margin-bottom: 0;
}

.step-number {
    align-items: center;
    background: rgba(214, 166, 69, 0.18);
    border-radius: 50%;
    color: var(--dh-blue);
    display: inline-flex;
    font-weight: 800;
    height: 2.4rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 2.4rem;
}

.mini-card {
    color: var(--dh-blue);
    font-weight: 700;
    min-height: 80px;
    padding: 1.25rem;
}

.mission-band {
    border-left: 6px solid var(--dh-gold);
    padding: 2rem;
}

.content-narrow {
    max-width: 820px;
}

.contact-list {
    padding: 2rem;
}

.site-footer {
    background: var(--dh-blue);
    color: rgba(255, 255, 255, 0.82);
}

.site-footer h2,
.site-footer h3 {
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .navbar-nav {
        padding-top: 1rem;
    }

    .btn-donation {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .hero-section,
    .page-header {
        padding: 4rem 0;
    }

    .section-padding {
        padding: 3rem 0;
    }
}