/* HERO SPLIT */
.hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
}

/* MISSION CHART */
.mission-chart {
    padding: 6rem 0;
}

.sbj-cont {
    margin-bottom: 4rem;
}

.mission-ls {
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mission-ls .item {
        flex: 1 1;
        padding: 1.5rem 1.2rem;
        border-radius: 20px;
        position: relative;
        border: 1px solid var(--color-darkGray);
        box-shadow: 0 8px 20px rgba(255,255,255,0.05),0 8px 16px rgba(0,0,0,0.45);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

        .mission-ls .item:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 12px 24px rgba(255,255,255,0.08),0 12px 28px rgba(0,0,0,0.5);
        }

    .mission-ls .circle {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        display: block;
    }

    .mission-ls .typo {
        text-transform: uppercase;
        display: block;
        margin-top: 0.4rem;
    }

    .mission-ls .tag {
        display: block;
        margin-top: 0.2rem;
    }

    .mission-ls .sbj {
        margin: 0.7rem 0;
        display: block;
    }

    .mission-ls .desc {
        line-height: 1.6;
    }

.mission-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    opacity: 0.95;
}

.mission-ls .item:hover .proactive-icon {
    content: url("/images/ic_proactive_active.png");
}

.mission-ls .item:hover .creative-icon {
    content: url("/images/ic_creative_active.png");
}

.mission-ls .item:hover .reliable-icon {
    content: url("/images/ic_reliable_active.png");
}


/* BIG STATEMENT */
.big-statement {
    padding:10rem 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    font-size:clamp(1.4rem,4vw,3.7rem);
}


    .big-statement::before {
        content: "AMR SOLUTIONS";
        position: absolute;
        font-size: var(--fs-big);
        color: rgba(0,200,210,0.05);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        white-space: nowrap;
        filter: blur(3px)
    }


/* VISUAL FLOW */
.visual-flow {
    padding: 4rem 0;
    gap: 4rem;
    padding-bottom: 12rem;
}

.flow-item {
    max-width: 32rem;
    position: relative;
}

.flow-number {
    display: inline-block;
}

.flow-left {
    align-self: flex-start;
}

.flow-right {
    align-self: flex-end;
}

.visual-flow h3 {
    margin-bottom:1.2rem;
}