/* ── HOW IT WORKS ──────────────────────────────────── */

.how-wrap {

    background: var(--bg2);

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}

/* ── STEPS GRID ───────────────────────────────────── */

.steps-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 0;

    margin-top: 60px;

    position: relative;

}

.steps-grid::before {

    content: '';

    position: absolute;

    top: 36px;

    left: 12.5%;

    right: 12.5%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent),
            transparent
        );

    opacity: 0.3;

}

/* ── STEP ─────────────────────────────────────────── */

.step {

    padding: 0 24px;

    text-align: center;

    position: relative;

}

/* ── STEP NUMBER ─────────────────────────────────── */

.step-num {

    width: 56px;
    height: 56px;

    margin: 0 auto 20px;

    background: var(--bg3);

    border:
        1px solid var(--border2);

    border-radius: 16px;

    display: flex;

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

    font-size: 22px;

    position: relative;

    transition: all 0.3s;

}

.step:hover .step-num {

    border-color: var(--accent);

    background: var(--glow);

    transform: translateY(-4px);

}

/* ── NUMBER LABEL ────────────────────────────────── */

.step-num-label {

    position: absolute;

    top: -8px;
    right: -8px;

    width: 20px;
    height: 20px;

    background: var(--accent);

    border-radius: 50%;

    font-size: 10px;

    font-weight: 800;

    color: #fff;

    display: flex;

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

    font-family: 'Syne', sans-serif;

}

/* ── CONTENT ─────────────────────────────────────── */

.step-title {

    font-family: 'Syne', sans-serif;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 8px;

    color: var(--text);

}

.step-desc {

    font-size: 13px;

    color: var(--muted2);

    line-height: 1.6;

}