.sw-crm-page {
    --crm-blue: #144896;
    --crm-cyan: #2f8fcf;
    --crm-navy: #0c274f;
}

.sw-crm-hero .sw-bp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
}

.sw-crm-blueprint {
    position: relative;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(20, 72, 150, 0.14);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 28px 65px rgba(31, 57, 91, 0.13);
}

.sw-crm-blueprint__head,
.sw-crm-blueprint__event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #7b899a;
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sw-crm-blueprint__head {
    padding: 2px 4px 13px;
}

.sw-crm-blueprint__head span:first-child {
    display: flex;
    align-items: center;
    color: #31445f;
}

.sw-crm-blueprint__head i,
.sw-crm-blueprint__event i {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #27af7a;
    box-shadow: 0 0 0 4px rgba(39, 175, 122, .12);
}

.sw-crm-blueprint__canvas {
    position: relative;
    min-height: 420px;
    border: 1px solid #dfe7f1;
    border-radius: 19px;
    overflow: hidden;
    background-color: #f8fbff;
    background-image:
        linear-gradient(rgba(20, 72, 150, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 72, 150, .055) 1px, transparent 1px);
    background-size: 24px 24px;
}

.sw-crm-blueprint__links {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    color: rgba(20, 72, 150, .31);
    stroke-dasharray: 5 7;
}

.sw-crm-entity,
.sw-crm-blueprint__core {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #d8e3ef;
    background: #fff;
    box-shadow: 0 7px 18px rgba(31, 57, 91, .08);
}

.sw-crm-entity {
    width: 42%;
    max-width: 150px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 13px;
}

.sw-crm-entity > span {
    color: #80a0c7;
    font-size: 8px;
    font-weight: 820;
}

.sw-crm-entity strong {
    margin: 4px 0 2px;
    font-size: 12px;
}

.sw-crm-entity small,
.sw-crm-blueprint__core small {
    color: #73839a;
    font-size: 8px;
    line-height: 1.35;
}

.sw-crm-entity--client { top: 24px; left: 18px; }
.sw-crm-entity--lead { top: 24px; right: 18px; }
.sw-crm-entity--job { top: 174px; left: 18px; }
.sw-crm-entity--staff { top: 174px; right: 18px; }
.sw-crm-entity--document { bottom: 24px; left: 18px; }
.sw-crm-entity--payment { right: 18px; bottom: 24px; }

.sw-crm-blueprint__core {
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    align-items: center;
    justify-content: center;
    border-color: rgba(20, 72, 150, .28);
    border-radius: 22px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.sw-crm-blueprint__core span {
    color: var(--crm-blue);
    font-size: 17px;
    font-weight: 900;
    line-height: .9;
}

.sw-crm-blueprint__event {
    display: block;
    padding: 13px 4px 2px;
}

.sw-crm-blueprint__event p {
    display: flex;
    margin: 6px 0 0;
    align-items: center;
    color: #465a75;
    font-size: 10px;
    font-weight: 630;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

.sw-crm-layers {
    display: grid;
    max-width: 970px;
    margin-inline: auto;
    gap: 9px;
}

.sw-crm-layer {
    display: grid;
    min-height: 98px;
    padding: 20px;
    align-items: center;
    grid-template-columns: 42px 1fr;
    gap: 17px;
    border: 1px solid #dce6f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 57, 91, .055);
}

.sw-crm-layer > span,
.sw-crm-connect__grid article > span,
.sw-crm-fit__grid div > span {
    color: #82a1c6;
    font-size: 10px;
    font-weight: 850;
}

.sw-crm-layer strong {
    display: block;
    margin-bottom: 4px;
    color: #183455;
    font-size: 15px;
}

.sw-crm-layer p {
    margin-bottom: 0;
    color: #718096;
    font-size: 12px;
    line-height: 1.55;
}

.sw-crm-layer--base {
    border-color: rgba(20, 72, 150, .32);
    background: #eaf2fc;
}

.sw-crm-panel {
    display: grid;
    padding: 23px;
    gap: 27px;
    border: 1px solid var(--sw-line);
    border-radius: 24px;
    background: #fff;
}

.sw-crm-panel__copy > span {
    color: var(--crm-blue);
    font-size: 9px;
    font-weight: 820;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sw-crm-panel__copy h3 {
    margin: 10px 0 12px;
    font-size: clamp(23px, 4vw, 34px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.sw-crm-panel__copy p {
    color: var(--sw-muted);
    font-size: 13px;
    line-height: 1.65;
}

.sw-crm-panel__copy ul {
    display: grid;
    margin: 20px 0 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    list-style: none;
}

.sw-crm-panel__copy li {
    padding-left: 15px;
    color: #465a75;
    font-size: 11px;
    line-height: 1.45;
}

.sw-crm-panel__copy li::before {
    content: "";
    float: left;
    width: 6px;
    height: 6px;
    margin: 5px 0 0 -15px;
    border-radius: 50%;
    background: var(--crm-blue);
}

.sw-crm-panel__map {
    display: grid;
    align-content: center;
    gap: 10px;
}

.sw-crm-panel__map div {
    position: relative;
    display: grid;
    min-height: 70px;
    padding: 13px 14px 13px 52px;
    align-content: center;
    border: 1px solid #dbe5ef;
    border-radius: 14px;
    background: #f7faff;
}

.sw-crm-panel__map span {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    color: var(--crm-blue);
    background: #e3edf9;
    font-size: 8px;
    font-weight: 850;
}

.sw-crm-panel__map strong { font-size: 12px; }
.sw-crm-panel__map small { margin-top: 3px; color: #718096; font-size: 9px; }

.sw-crm-trace {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 1px;
    list-style: none;
    border: 1px solid #dbe5ef;
    border-radius: 23px;
    overflow: hidden;
    background: #dbe5ef;
}

.sw-crm-trace li {
    position: relative;
    display: flex;
    min-height: 96px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.sw-crm-trace span { color: #8ba5c4; font-size: 9px; font-weight: 850; }
.sw-crm-trace strong { margin: 5px 0; font-size: 13px; }
.sw-crm-trace small { color: #74839a; font-size: 9px; }

.sw-crm-spectrum {
    background: linear-gradient(135deg, #0b254d, #071a36);
}

.sw-crm-spectrum__scale {
    display: grid;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 25px;
    overflow: hidden;
}

.sw-crm-spectrum__scale article {
    padding: 26px;
    background: rgba(255,255,255,.035);
}

.sw-crm-spectrum__scale article + article { border-top: 1px solid rgba(255,255,255,.11); }
.sw-crm-spectrum__scale .is-shared { background: #144896; }
.sw-crm-spectrum__scale span { color: #8fb9eb; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sw-crm-spectrum__scale .is-shared span { color: #d5e7ff; }
.sw-crm-spectrum__scale h3 { margin: 10px 0 9px; color: #fff; font-size: 20px; }
.sw-crm-spectrum__scale p { margin-bottom: 0; color: #aabbd2; font-size: 12px; line-height: 1.6; }
.sw-crm-spectrum__scale .is-shared p { color: #d7e5f7; }
.sw-crm-spectrum__note { max-width: 780px; margin: 24px 0 0; color: #8fa6c2; font-size: 11px; line-height: 1.6; }

.sw-crm-role-grid,
.sw-crm-connect__grid,
.sw-crm-fit__grid {
    display: grid;
    gap: 14px;
}

.sw-crm-role-grid article,
.sw-crm-connect__grid article,
.sw-crm-fit__grid > div {
    padding: 23px;
    border: 1px solid #dce5ef;
    border-radius: 20px;
    background: #fff;
}

.sw-crm-role-grid article > span { color: var(--crm-blue); font-size: 9px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.sw-crm-role-grid h3,
.sw-crm-connect__grid h3 { margin: 11px 0 9px; font-size: 17px; line-height: 1.25; }
.sw-crm-role-grid p,
.sw-crm-connect__grid p { color: var(--sw-muted); font-size: 11px; line-height: 1.6; }
.sw-crm-role-grid ul { display: flex; margin: 18px 0 0; padding: 0; flex-wrap: wrap; gap: 6px; list-style: none; }
.sw-crm-role-grid li { padding: 6px 9px; border-radius: 8px; color: #48617e; background: #eef4fb; font-size: 8px; font-weight: 730; }

.sw-crm-cascade__grid,
.sw-crm-engineering__grid {
    display: grid;
    gap: 42px;
}

.sw-crm-cascade__grid h2,
.sw-crm-engineering__copy h2 {
    margin: 17px 0 15px;
    font-size: clamp(30px, 5.8vw, 48px);
    line-height: 1.06;
    letter-spacing: -.04em;
}

.sw-crm-cascade__grid > div > p,
.sw-crm-engineering__copy > p { color: var(--sw-muted); font-size: 14px; line-height: 1.72; }

.sw-crm-cascade__flow { margin: 0; padding: 0; list-style: none; }
.sw-crm-cascade__flow li { display: grid; min-height: 88px; padding: 17px 0; grid-template-columns: 45px 1fr; gap: 13px; border-bottom: 1px solid #d7e1eb; }
.sw-crm-cascade__flow li > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: var(--crm-blue); font-size: 9px; font-weight: 850; }
.sw-crm-cascade__flow strong { display: block; margin: 2px 0 5px; font-size: 13px; }
.sw-crm-cascade__flow small { color: var(--sw-muted); font-size: 10px; line-height: 1.5; }

.sw-crm-connect__grid article { min-height: 190px; }
.sw-crm-connect__grid p { margin-bottom: 0; }

.sw-crm-engineering { color: #fff; background: #102d59; }
.sw-crm-engineering__copy h2 { color: #fff; }
.sw-crm-engineering__copy > p { color: #abc0dc; }
.sw-crm-engineering__list { border-top: 1px solid rgba(255,255,255,.13); }
.sw-crm-engineering__list > div { display: grid; padding: 19px 0; grid-template-columns: 42px 1fr; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.13); }
.sw-crm-engineering__list > div > span { color: #72a7e6; font-size: 9px; font-weight: 850; }
.sw-crm-engineering__list p { margin: 0; color: #9fb4cf; font-size: 10px; line-height: 1.55; }
.sw-crm-engineering__list strong { display: block; margin-bottom: 4px; color: #fff; font-size: 12px; }

.sw-crm-fit__grid > div { display: grid; min-height: 130px; grid-template-columns: 34px 1fr; gap: 10px; }
.sw-crm-fit__grid p { margin: 0; color: #455a74; font-size: 12px; line-height: 1.6; }

.sw-crm-method__tracks { display: grid; gap: 14px; }
.sw-crm-method__track { padding: 23px; border: 1px solid #dce5ef; border-radius: 22px; background: #fff; }
.sw-crm-method__track > span { color: var(--crm-blue); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sw-crm-method__track ol { display: grid; margin: 20px 0 0; padding: 0; gap: 1px; list-style: none; background: #dbe5ef; }
.sw-crm-method__track li { display: flex; min-height: 76px; padding: 15px; flex-direction: column; justify-content: center; background: #f8fbff; }
.sw-crm-method__track strong { font-size: 12px; }
.sw-crm-method__track small { margin-top: 5px; color: var(--sw-muted); font-size: 9px; }
.sw-crm-method__track--tech > span { color: #147d74; }
.sw-crm-method__result { display: flex; min-height: 128px; padding: 25px; align-items: flex-start; justify-content: center; flex-direction: column; border-radius: 22px; color: #fff; background: var(--crm-blue); }
.sw-crm-method__result span { font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.sw-crm-method__result strong { margin: 8px 0 5px; font-size: 18px; }
.sw-crm-method__result small { color: #d7e6f8; font-size: 10px; }

@media (min-width: 640px) {
    .sw-crm-blueprint { padding: 20px; }
    .sw-crm-entity { width: 142px; }
    .sw-crm-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-crm-connect__grid,
    .sw-crm-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-crm-trace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 800px) {
    .sw-crm-layers .sw-crm-layer:nth-child(1) { margin-inline: 16%; }
    .sw-crm-layers .sw-crm-layer:nth-child(2) { margin-inline: 12%; }
    .sw-crm-layers .sw-crm-layer:nth-child(3) { margin-inline: 8%; }
    .sw-crm-layers .sw-crm-layer:nth-child(4) { margin-inline: 4%; }
    .sw-crm-panel { grid-template-columns: minmax(0, 1fr) minmax(310px, .82fr); padding: 36px; }
    .sw-crm-panel__map div:not(:last-child)::after { content: ""; position: absolute; left: 26px; bottom: -11px; z-index: 2; width: 1px; height: 11px; background: #9db6d2; }
    .sw-crm-spectrum__scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sw-crm-spectrum__scale article + article { border-top: 0; border-left: 1px solid rgba(255,255,255,.11); }
    .sw-crm-cascade__grid,
    .sw-crm-engineering__grid { grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); align-items: start; gap: 80px; }
    .sw-crm-connect__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sw-crm-method__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-crm-method__result { grid-column: 1 / -1; align-items: center; text-align: center; }
}

@media (min-width: 980px) {
    .sw-crm-hero .sw-bp-hero__grid { grid-template-columns: minmax(0, 1.03fr) minmax(450px, .97fr); }
    .sw-crm-role-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sw-crm-role-grid article { grid-column: span 2; }
    .sw-crm-role-grid article:nth-child(4) { grid-column: 2 / span 2; }
    .sw-crm-role-grid article:nth-child(5) { grid-column: 4 / span 2; }
    .sw-crm-fit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sw-crm-trace { grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; background: transparent; border: 0; }
    .sw-crm-trace li { border: 1px solid #dbe5ef; }
    .sw-crm-trace li:first-child { border-radius: 18px 0 0 18px; }
    .sw-crm-trace li:last-child { border-radius: 0 18px 18px 0; }
    .sw-crm-trace li:not(:last-child)::after { content: ""; position: absolute; z-index: 3; top: 50%; right: -7px; width: 12px; height: 12px; border-top: 1px solid #92a9c2; border-right: 1px solid #92a9c2; background: #fff; transform: translateY(-50%) rotate(45deg); }
}

@media (max-width: 420px) {
    .sw-crm-blueprint__canvas { min-height: 370px; }
    .sw-crm-entity { max-width: 118px; min-height: 67px; padding: 9px; }
    .sw-crm-entity--client,
    .sw-crm-entity--job,
    .sw-crm-entity--document { left: 10px; }
    .sw-crm-entity--lead,
    .sw-crm-entity--staff,
    .sw-crm-entity--payment { right: 10px; }
    .sw-crm-blueprint__core { width: 64px; height: 64px; border-radius: 18px; }
    .sw-crm-blueprint__core span { font-size: 14px; }
    .sw-crm-panel__copy ul { grid-template-columns: 1fr; }
}