:root {
    --b4a-canopy: #273F34;
    --b4a-sun: #F4D845;
    --b4a-flame: #FF8300;
    --b4a-leaf: #4E8B3A;
    --b4a-moss: #E6EED8;
    --b4a-cream: #FFF9EA;
    --b4a-bark: #7A4C2A;
}

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

.navbar {
    background: rgba(255, 249, 234, 0.96);
}

.navbar-brand img {
    height: 44px;
    width: 44px;
    object-fit: contain;
}

.brand-mark {
    color: var(--b4a-canopy);
    line-height: 1;
}

.brand-mark small {
    color: var(--b4a-flame);
    font-size: 0.72rem;
    letter-spacing: 0.02rem;
}

.nav-link {
    color: var(--b4a-canopy);
    font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--b4a-flame);
}

.app-shell {
    display: flex;
    min-height: calc(100vh - 73px);
}

.app-sidebar {
    background: #fffdf5;
    flex: 0 0 260px;
}

.app-sidebar-inner {
    position: sticky;
    top: 73px;
    padding: 1.25rem 0;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-nav,
.sidebar-section {
    display: grid;
    gap: 0.25rem;
}

.sidebar-section {
    border-top: 1px solid rgba(39, 63, 52, 0.12);
    margin-top: 1rem;
    padding-top: 1rem;
}

.sidebar-heading {
    color: rgba(39, 63, 52, 0.68);
    font-size: 0.75rem;
    font-weight: 800;
    margin: 0 1rem 0.35rem;
    text-transform: uppercase;
}

.sidebar-link {
    align-items: center;
    color: var(--b4a-canopy);
    display: flex;
    gap: 0.75rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    text-decoration: none;
}

.sidebar-link:hover,
.sidebar-link:focus {
    background: rgba(244, 216, 69, 0.26);
    color: var(--b4a-flame);
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 1.25rem;
}

.sidebar-link-sm {
    font-size: 0.92rem;
    font-weight: 600;
    padding-bottom: 0.55rem;
    padding-top: 0.55rem;
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.hero-section {
    background:
        radial-gradient(circle at 84% 12%, rgba(244, 216, 69, 0.42), transparent 28%),
        linear-gradient(135deg, #f9f1d0 0%, #e5efd5 45%, #f8dfb2 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::after {
    background:
        linear-gradient(45deg, rgba(39, 63, 52, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 131, 0, 0.08) 25%, transparent 25%);
    background-size: 48px 48px;
    content: "";
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
    position: absolute;
}

.hero-section > .container {
    position: relative;
    z-index: 1;
}

.hero-ecosystem {
    min-height: min(720px, calc(100vh - 73px));
    display: grid;
    align-items: center;
}

.hero-title,
.section-title {
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.hero-title {
    font-size: clamp(2.65rem, 5.5vw, 5rem);
    max-width: 11ch;
}

.section-title {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.hero-copy { max-width: 47rem; }
.section-intro { max-width: 46rem; }

.btn-outline-canopy {
    --bs-btn-color: var(--b4a-canopy);
    --bs-btn-border-color: var(--b4a-canopy);
    --bs-btn-hover-bg: var(--b4a-canopy);
    --bs-btn-hover-border-color: var(--b4a-canopy);
    --bs-btn-hover-color: #fff;
}

.ecosystem-orbit {
    aspect-ratio: 1;
    background: rgba(255, 253, 245, 0.68);
    border: 1px solid rgba(39, 63, 52, 0.18);
    border-radius: 50%;
    margin: auto;
    max-width: 430px;
    position: relative;
}

.ecosystem-orbit::before,
.ecosystem-orbit::after {
    border: 1px dashed rgba(39, 63, 52, 0.28);
    border-radius: 50%; content: ""; inset: 12%; position: absolute;
}
.ecosystem-orbit::after { inset: 29%; }
.orbit-center { align-items: center; background: var(--b4a-canopy); border-radius: 50%; color: #fff; display: flex; flex-direction: column; font-size: .8rem; font-weight: 800; height: 38%; justify-content: center; left: 31%; line-height: 1.2; position: absolute; text-align: center; top: 31%; width: 38%; z-index: 1; }
.orbit-center img { height: 62px; margin-bottom: .25rem; object-fit: contain; width: 62px; }
.orbit-item { background: #fffdf5; border: 1px solid rgba(39, 63, 52, .15); border-radius: 999px; box-shadow: 0 .4rem 1rem rgba(39,63,52,.09); font-size: .78rem; font-weight: 800; padding: .45rem .7rem; position: absolute; z-index: 2; }
.orbit-farmers { left: -3%; top: 21%; }.orbit-makers { right: -2%; top: 14%; }.orbit-knowledge { right: -8%; top: 53%; }.orbit-markets { bottom: 5%; right: 18%; }.orbit-partners { bottom: 10%; left: 5%; }

.problem-list { border-left: 3px solid var(--b4a-sun); display: grid; gap: .8rem; margin-top: 1.5rem; padding-left: 1.25rem; }
.problem-list p { margin: 0; }.problem-list i { color: var(--b4a-flame); margin-right: .4rem; }
.ecosystem-section { background: linear-gradient(180deg, #e6eed8 0%, #f9f4e4 100%); }
.value-chain { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.value-chain span { background: var(--b4a-canopy); border-radius: 999px; color: #fff; font-size: .9rem; font-weight: 800; padding: .65rem 1rem; }.value-chain i { color: var(--b4a-flame); font-size: 1.1rem; }
.ecosystem-role { align-items: center; background: rgba(255,255,255,.78); border: 1px solid rgba(39,63,52,.14); border-radius: .75rem; display: flex; font-size: .9rem; font-weight: 700; gap: .65rem; height: 100%; padding: 1rem; }.ecosystem-role i { color: var(--b4a-leaf); font-size: 1.2rem; }

.map-illustration { background: linear-gradient(135deg, var(--b4a-canopy), #406d36); border-radius: .9rem; height: 330px; overflow: hidden; position: relative; }.map-continent { color: rgba(255,255,255,.84); font-size: clamp(3.2rem, 9vw, 6.3rem); font-weight: 800; left: 50%; letter-spacing: -.08em; opacity: .7; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-10deg); }.map-point { background: var(--b4a-sun); border: 4px solid var(--b4a-flame); border-radius: 50%; box-shadow: 0 0 0 7px rgba(244,216,69,.16); height: 18px; position: absolute; width: 18px; z-index: 2; }.point-one { left: 25%; top: 31%; }.point-two { left: 58%; top: 21%; }.point-three { left: 70%; top: 47%; }.point-four { left: 47%; top: 62%; }.point-five { left: 64%; top: 77%; }.map-line { background: rgba(244,216,69,.55); height: 2px; position: absolute; transform-origin: left; z-index: 1; }.line-one { left: 27%; top: 34%; transform: rotate(-16deg); width: 32%; }.line-two { left: 59%; top: 24%; transform: rotate(38deg); width: 24%; }.line-three { left: 48%; top: 65%; transform: rotate(23deg); width: 25%; }

.action-card { background: #fff; border: 1px solid rgba(39,63,52,.13); border-radius: .8rem; display: flex; flex-direction: column; padding: 1.5rem; }.action-card h3 { color: var(--b4a-canopy); font-size: 1.12rem; font-weight: 800; margin: 1rem 0 .7rem; }.action-card p { color: #5b635e; font-size: .92rem; flex-grow: 1; }.action-card a { color: var(--b4a-flame); font-size: .9rem; font-weight: 800; text-decoration: none; }.action-icon { color: var(--b4a-leaf); font-size: 1.75rem; }
.empty-state { background: #fff; border: 1px dashed rgba(39,63,52,.28); border-radius: .8rem; padding: 2rem; text-align: center; }.empty-state > i { color: var(--b4a-leaf); display: block; font-size: 2rem; margin-bottom: .7rem; }
.contact-panel { background: #fffdf5; border: 1px solid rgba(39,63,52,.16); border-radius: .9rem; }.btn-whatsapp { --bs-btn-bg: #25D366; --bs-btn-border-color: #25D366; --bs-btn-color: #123d24; --bs-btn-hover-bg: #1ebe5d; --bs-btn-hover-border-color: #1ebe5d; --bs-btn-hover-color: #123d24; }

.hero-logo-card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(39, 63, 52, 0.12);
    border-radius: 0.75rem;
}

.hero-logo-card img {
    max-height: 220px;
    object-fit: contain;
}

.eyebrow {
    color: var(--b4a-flame);
    font-weight: 800;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.text-canopy {
    color: var(--b4a-canopy);
}

.text-flame {
    color: var(--b4a-flame);
}

.bg-canopy {
    background-color: var(--b4a-canopy);
}

.bg-sun {
    background-color: var(--b4a-sun);
}

.bg-moss {
    background-color: var(--b4a-moss);
}

.btn-canopy {
    --bs-btn-bg: var(--b4a-canopy);
    --bs-btn-border-color: var(--b4a-canopy);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1d3027;
    --bs-btn-hover-border-color: #1d3027;
    --bs-btn-hover-color: #fff;
}

.btn-flame {
    --bs-btn-bg: var(--b4a-flame);
    --bs-btn-border-color: var(--b4a-flame);
    --bs-btn-color: #1e160b;
    --bs-btn-hover-bg: #e87600;
    --bs-btn-hover-border-color: #e87600;
    --bs-btn-hover-color: #1e160b;
}

.btn-sun {
    --bs-btn-bg: var(--b4a-sun);
    --bs-btn-border-color: var(--b4a-sun);
    --bs-btn-color: var(--b4a-canopy);
    --bs-btn-hover-bg: #e8ca25;
    --bs-btn-hover-border-color: #e8ca25;
    --bs-btn-hover-color: var(--b4a-canopy);
}

.section-band {
    background: #fffdf5;
}

.opportunity-card,
.community-card,
.story-card,
.partner-card,
.dashboard-card {
    border: 1px solid rgba(39, 63, 52, 0.12);
    border-radius: 0.75rem;
}

.opportunity-card {
    border-top: 5px solid var(--b4a-flame);
}

.community-card {
    background: linear-gradient(180deg, #ffffff 0%, #fff5d0 100%);
}

.community-card:hover {
    border-color: var(--b4a-flame);
}

.story-card {
    background: #fff;
}

.story-hero-image {
    max-height: 420px;
    object-fit: cover;
}

.story-card-image {
    aspect-ratio: 16 / 8;
    object-fit: cover;
    width: 100%;
}

.story-accent {
    background: var(--b4a-sun);
    border-radius: 999px;
    height: 0.55rem;
    width: 4rem;
}

.map-placeholder {
    background:
        linear-gradient(135deg, rgba(39, 63, 52, 0.94), rgba(78, 139, 58, 0.88)),
        repeating-linear-gradient(45deg, transparent 0, transparent 16px, rgba(244, 216, 69, 0.16) 16px, rgba(244, 216, 69, 0.16) 32px);
    border-radius: 0.75rem;
    color: #fff;
}

.partner-card {
    background: #fff;
    min-height: 96px;
}

.partner-logo-dot {
    background: var(--b4a-sun);
    border: 5px solid var(--b4a-flame);
    border-radius: 50%;
    height: 42px;
    width: 42px;
}

.partner-logo {
    max-height: 52px;
    max-width: 120px;
    object-fit: contain;
}

.passport-photo {
    aspect-ratio: 1;
    max-width: 180px;
    object-fit: cover;
    width: 100%;
}

.passport-avatar {
    height: 160px;
    width: 160px;
}

.final-cta {
    background:
        radial-gradient(circle at 90% 20%, rgba(244, 216, 69, 0.34), transparent 22%),
        linear-gradient(135deg, var(--b4a-canopy), #355f31);
    border-radius: 0.85rem;
}

.footer {
    background: var(--b4a-canopy);
}
.footer-link { color: rgba(255,255,255,.76); font-size: .9rem; text-decoration: none; }.footer-link:hover, .footer-link:focus { color: var(--b4a-sun); }

@media (max-width: 991.98px) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        border-bottom: 1px solid rgba(39, 63, 52, 0.12);
        border-right: 0 !important;
        flex-basis: auto;
    }

    .app-sidebar-inner {
        position: static;
    }

    .sidebar-nav,
    .sidebar-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 0.75rem;
    }

    .sidebar-heading {
        grid-column: 1 / -1;
        margin-left: 0.25rem;
    }

    .sidebar-link {
        border-radius: 0.5rem;
        padding: 0.65rem 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .hero-ecosystem { min-height: auto; }
    .ecosystem-orbit { margin-top: .5rem; max-width: 330px; }
    .orbit-item { font-size: .67rem; padding: .35rem .5rem; }
    .orbit-knowledge { right: -6%; }.orbit-makers { right: -3%; }
    .value-chain { gap: .4rem; }.value-chain span { font-size: .76rem; padding: .5rem .66rem; }.value-chain i { display: none; }
    .map-illustration { height: 240px; }
}