.steps {
    display: flex;
    flex-direction: column;
    gap: 25px;

    max-width: 800px;
    margin: 50px auto;
}

.step-card {
    display: flex;
    align-items: center;
    gap: 20px;

    background: rgba(20, 35, 20, 0.92);

    border: 2px solid #72ff8a;

    border-radius: 22px;

    padding: 25px;

    box-shadow:
        0 0 20px #72ff8a30,
        inset 0 0 15px #72ff8a10;

    transition: 0.35s;
}

.step-card:hover {
    transform: translateY(-5px) scale(1.02);

    box-shadow:
        0 0 35px #72ff8a70,
        0 0 60px #72ff8a25;
}

.step-number {
    min-width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #8effa3,
        #4ed66b
    );

    color: #102010;

    font-size: 34px;
    font-weight: bold;

    box-shadow:
        0 0 20px #72ff8a80;
}

.step-content h2 {
    margin: 0;

    color: #9cffae;

    font-size: 28px;

    text-shadow:
        0 0 10px #72ff8a;
}

.step-content p {
    margin-top: 10px;

    color: #d8ffd8;

    font-size: 17px;

    line-height: 1.5;
}