/* Контейнер шагов (ожидается: <ol class="steps" style="--length:3">) */
.steps {
    --steps-max-width: 46rem;
    --steps-radius: 14px;
    --steps-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    --steps-bg: #ffffff;
    --steps-title: #111827;
    --steps-text: #4b5563;
    --steps-bar-height: 0.35rem;

    padding: 0 1rem;
    margin: 0 auto;
    list-style: none;
    counter-reset: step;
}

/* Один шаг
   ожидается: <li style="--i:1">, а на .steps — style="--length:3"
*/
.steps > li {
    --stop: calc(100% / var(--length) * var(--i));
    --l1: 60%;
    --l2: 84%;
    --h: calc((var(--i) - 1) * (180 / var(--length)));
    --c1: hsl(var(--h), 71%, var(--l1));
    --c2: hsl(var(--h), 71%, var(--l2));

    position: relative;
    counter-increment: step;
    max-width: var(--steps-max-width);
    margin: 1.5rem auto;
    padding: 1.75rem 1.5rem 1.25rem;
    border-radius: var(--steps-radius);
    background-color: var(--steps-bg);
    box-shadow: var(--steps-shadow);
    overflow: hidden;

    transition:
        transform 160ms ease-out,
        box-shadow 160ms ease-out,
        background-color 160ms ease-out;
}

/* Hover эффект — лёгкое "поднятие" */
.steps > li:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
}

/* Верхняя полоска-прогресс */
.steps > li::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: var(--steps-bar-height);
    background: linear-gradient(
        to right,
        var(--c1) var(--stop),
        var(--c2) var(--stop)
    );
}

/* Заголовок шага */
.steps h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    color: var(--steps-title);
    font-size: 1.25rem;
    line-height: 1.2;
}

/* Номер шага в круге */
.steps h3::before {
    content: counter(step);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.7rem;
    height: 2.7rem;

    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, #ffffff 0, var(--c1) 55%, var(--c2) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.6),
        0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Обычный текст шага */
.steps p,
.steps ul,
.steps ol {
    margin: 0.25rem 0 0;
    color: var(--steps-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Внутренние списки — аккуратные маркеры */
.steps ul {
    padding-left: 1.2rem;
}

.steps ul li {
    margin: 0.15rem 0;
}

/* Адаптив */
@media (min-width: 40em) {
    .steps > li {
        margin: 2.25rem auto;
        padding: 2.25rem 2rem 1.75rem;
    }

    .steps h3 {
        font-size: 1.5rem;
        margin-bottom: 1.2rem;
    }

    .steps h3::before {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}

/* Чуть меньше анимации для тех, кто просил */
@media (prefers-reduced-motion: reduce) {
    .steps > li,
    .steps > li:hover {
        transform: none;
        transition: none;
        box-shadow: var(--steps-shadow);
    }
}