/* =========================================================
   Bizmantra - How It Works
   assets/css/how-it-works.css?v=1
   Deep navy band in light and dark mode (follows --bm-* tokens).
   - 900px and up: 4 steps along one horizontal line.
   - Below 900px: vertical line on the left with numbered steps.
   ========================================================= */
.bmsp {
    --sp-from: #1B3A86;
    --sp-to: #0F2152;
    --sp-glow-a: rgba(90,130,232,.38);
    --sp-glow-b: rgba(154,205,79,.22);
    --sp-card: rgba(255,255,255,.07);
    --sp-card-line: rgba(255,255,255,.15);
    --sp-text: rgba(255,255,255,.74);

    position: relative; overflow: hidden; isolation: isolate;
    padding-block: clamp(56px, 8vw, 108px);
    background: linear-gradient(160deg, var(--sp-from), var(--sp-to));
    color: #fff;
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bmsp {
    --sp-from: #101C42;
    --sp-to: #0A1126;
    --sp-glow-a: rgba(90,130,232,.30);
    --sp-glow-b: rgba(154,205,79,.16);
    --sp-card: rgba(255,255,255,.05);
    --sp-card-line: rgba(143,176,255,.18);
}

:where(.bmsp) *, :where(.bmsp) *::before, :where(.bmsp) *::after { box-sizing: border-box; }
:where(.bmsp) ol { list-style: none; margin: 0; padding: 0; }
:where(.bmsp) h2, :where(.bmsp) h3, :where(.bmsp) p { margin: 0; }
:where(.bmsp) svg { display: block; flex: none; }
.bmsp :focus-visible { outline: 2px solid var(--bm-green); outline-offset: 3px; border-radius: 10px; }

/* background decor */
.bmsp__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bmsp__glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.bmsp__glow--a { width: 520px; height: 520px; left: -140px; top: -200px; background: var(--sp-glow-a); }
.bmsp__glow--b { width: 460px; height: 460px; right: -140px; bottom: -220px; background: var(--sp-glow-b); }
.bmsp__grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 5%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 5%, transparent 75%);
}

.bmsp__container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

/* ---------------- HEADING ---------------- */
.bmsp__head { max-width: 720px; margin-inline: auto; text-align: center; }
.bmsp__badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #C9D8FF;
}
.bmsp__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bm-green); box-shadow: 0 0 0 4px rgba(154,205,79,.25); }
.bmsp__title { margin-top: 16px; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.bmsp__lead { margin: 14px auto 0; max-width: 60ch; font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.7; color: var(--sp-text); }

/* ---------------- STEPS (mobile first: vertical line on the left) ---------------- */
.bmsp__steps { position: relative; display: grid; gap: 22px; max-width: 560px; margin: clamp(32px, 5vw, 56px) auto 0; padding-left: 76px; }
.bmsp__steps::before, .bmsp__steps::after {
    content: ""; position: absolute; left: 26px; top: 28px; bottom: 28px; width: 4px;
    -webkit-mask-image: radial-gradient(circle, #000 1.7px, transparent 2px); mask-image: radial-gradient(circle, #000 1.7px, transparent 2px);
    -webkit-mask-size: 4px 11px; mask-size: 4px 11px; -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
}
.bmsp__steps::before { background: rgba(255,255,255,.34); }
.bmsp__steps::after { background: linear-gradient(var(--bm-blue), var(--bm-green)); transform-origin: top; }

.bmsp__step { position: relative; display: flex; flex-direction: column; }

.bmsp__node {
    position: absolute; left: -76px; top: 0; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(145deg, #5A82E8, #2F54B8); color: #fff;
    box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 16px 28px -10px rgba(5,12,40,.7);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.bmsp__node > svg { width: 24px; height: 24px; }
.bmsp__step:nth-child(4) .bmsp__node { background: linear-gradient(145deg, #A8D75E, #86B83F); color: #17306B; }
.bmsp__num {
    position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--bm-green); color: #17306B; font-size: 11px; font-weight: 800; letter-spacing: .02em;
    border: 2px solid var(--sp-to);
}
.bmsp__step:nth-child(4) .bmsp__num { background: #fff; }

.bmsp__body {
    position: relative; flex: 1; padding: 20px 20px 22px; border-radius: 18px;
    background: var(--sp-card); border: 1px solid var(--sp-card-line);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s;
}
.bmsp__body::before {            /* dotted connector from the line to the card */
    content: ""; position: absolute; left: -20px; top: 26px; width: 20px; height: 4px;
    background: rgba(255,255,255,.6);
    -webkit-mask-image: radial-gradient(circle, #000 1.7px, transparent 2px); mask-image: radial-gradient(circle, #000 1.7px, transparent 2px);
    -webkit-mask-size: 8px 4px; mask-size: 8px 4px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.bmsp__body::after {             /* dot where the connector meets the card */
    content: ""; position: absolute; left: -4px; top: 24px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--bm-green); box-shadow: 0 0 0 3px rgba(154,205,79,.25);
}
.bmsp__name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.bmsp__text { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--sp-text); }
.bmsp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (hover: hover) {
    .bmsp__step:hover .bmsp__node { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 8px rgba(255,255,255,.1), 0 22px 34px -10px rgba(5,12,40,.8); }
    .bmsp__step:hover .bmsp__body { transform: translateY(-4px); background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); }
}

/* ---------------- ENTRANCE (only with JS) ---------------- */
.bmsp--js .bmsp__steps::after { transform: scaleY(0); }
.bmsp--js .bmsp__steps.is-in::after { transform: scaleY(1); transition: transform 1.6s cubic-bezier(.4,0,.2,1) .2s; }
.bmsp--js .bmsp__step { opacity: 0; transform: translateY(22px); }
.bmsp--js .is-in .bmsp__step { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--i) * .22s + .15s), transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .22s + .15s); }

/* ---------------- 900px and up: horizontal line ---------------- */
@media (min-width: 900px) {
    .bmsp__steps {
        max-width: none; padding-left: 0; gap: clamp(18px, 2.4vw, 32px);
        grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch;
    }
    /* line runs through the centres of the four nodes (node = 80px, so centre = 40px) */
    .bmsp__steps::before, .bmsp__steps::after {
        left: 12.5%; right: 12.5%; top: 38px; bottom: auto; width: auto; height: 4px;
        -webkit-mask-size: 11px 4px; mask-size: 11px 4px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    }
    .bmsp__steps::after { background: linear-gradient(90deg, var(--bm-blue), var(--bm-green)); transform-origin: left; }
    .bmsp--js .bmsp__steps::after { transform: scaleX(0); }
    .bmsp--js .bmsp__steps.is-in::after { transform: scaleX(1); }

    .bmsp__step { align-items: center; text-align: center; }
    .bmsp__node { position: relative; left: auto; top: auto; width: 80px; height: 80px; flex: none; }
    .bmsp__node > svg { width: 30px; height: 30px; }
    .bmsp__num { top: -4px; right: -10px; min-width: 30px; height: 26px; font-size: 12px; }

    .bmsp__body { margin-top: 32px; width: 100%; padding: 24px 20px 26px; }
    .bmsp__body::before {        /* dotted connector straight up to the node */
        left: 50%; top: -32px; width: 4px; height: 32px; margin-left: -2px;
        -webkit-mask-size: 4px 9px; mask-size: 4px 9px; -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
    }
    .bmsp__body::after { left: 50%; top: -4px; margin-left: -4px; }
    .bmsp__text { font-size: 14px; }
}

@media (max-width: 599px) {
    .bmsp__container { padding-inline: 16px; }
    .bmsp__steps { padding-left: 68px; gap: 18px; }
    .bmsp__steps::before, .bmsp__steps::after { left: 22px; }
    .bmsp__node { left: -68px; width: 48px; height: 48px; }
    .bmsp__node > svg { width: 21px; height: 21px; }
    .bmsp__num { top: -7px; right: -10px; }
    .bmsp__body { padding: 16px 16px 18px; }
    .bmsp__body::before { top: 22px; }
    .bmsp__body::after { top: 20px; }
    .bmsp__name { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .bmsp * { transition-duration: .01ms !important; }
    .bmsp--js .bmsp__step { opacity: 1; transform: none; }
}