.sw-service-page {
    --service-violet: #6f56cf;
    --service-blue: #2467b2;
    --service-ink: #17223b;
}

.sw-service-hero {
    background:
        radial-gradient(circle at 80% 16%, rgba(111, 86, 207, .14), transparent 30%),
        #f2f4f9;
}

.sw-service-hero::before {
    background-image: radial-gradient(rgba(36, 103, 178, .12) 1px, transparent 1px);
    background-size: 24px 24px;
}

.sw-service-hero .sw-bp-hero__title span { color: var(--service-violet); }

.sw-service-console {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(35, 56, 91, .13);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 28px 65px rgba(31, 42, 72, .15);
}

.sw-service-console__top {
    display: flex;
    padding: 3px 5px 13px;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    color: #8290a5;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sw-service-console__top span:first-child { display: flex; align-items: center; color: #40506a; }
.sw-service-console__top i { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #2caf7d; box-shadow: 0 0 0 4px rgba(44,175,125,.12); }

.sw-service-console__roles {
    display: grid;
    padding: 5px;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-radius: 13px;
    background: #eef1f6;
}

.sw-service-console__roles button {
    min-height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: 9px;
    color: #68768b;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 760;
}

.sw-service-console__roles button[aria-selected="true"] { color: #fff; background: var(--service-violet); box-shadow: 0 6px 14px rgba(111,86,207,.22); }
.sw-service-console__roles button:focus-visible { outline: 3px solid rgba(245,158,11,.46); outline-offset: 2px; }
.sw-service-console__views { padding-top: 12px; }
.sw-service-console__views [role="tabpanel"][hidden] { display: none; }

.sw-service-console__views [role="tabpanel"] {
    min-height: 365px;
    padding: 18px;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    background: #f9fafc;
}

.sw-service-view__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sw-service-view__head div { display: flex; flex-direction: column; }
.sw-service-view__head span,
.sw-service-view__grid small,
.sw-service-log > span { color: #8794a8; font-size: 8px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.sw-service-view__head strong { margin-top: 6px; font-size: 15px; }
.sw-service-view__head b { padding: 6px 8px; border-radius: 7px; color: var(--service-violet); background: #edeafd; font-size: 8px; }
.sw-service-progress { height: 6px; margin: 18px 0; border-radius: 99px; overflow: hidden; background: #e4e8f0; }
.sw-service-progress i { display: block; width: 62%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--service-violet), #3e8fcd); }
.sw-service-progress--staff i { width: 46%; }
.sw-service-progress--partner i { width: 72%; }
.sw-service-view__grid { display: grid; gap: 9px; }
.sw-service-view__grid article { display: flex; min-height: 100px; padding: 13px; align-items: flex-start; flex-direction: column; border: 1px solid #e0e5ed; border-radius: 13px; background: #fff; }
.sw-service-view__grid strong { margin: 7px 0; font-size: 11px; line-height: 1.35; }
.sw-service-view__grid span { color: #79879b; font-size: 8px; line-height: 1.45; }
.sw-service-view__grid button { margin-top: auto; padding: 6px 9px; border: 0; border-radius: 7px; color: #fff; background: var(--service-blue); font: inherit; font-size: 8px; font-weight: 740; opacity: .72; }
.sw-service-log { margin-top: 12px; padding: 12px; border: 1px dashed #d7dee8; border-radius: 12px; }
.sw-service-log p { display: flex; margin: 6px 0 0; align-items: center; color: #66768c; font-size: 9px; line-height: 1.45; }
.sw-service-log p i { width: 6px; height: 6px; margin-right: 7px; flex: 0 0 6px; border-radius: 50%; background: #28a979; }

.sw-service-compare { display: grid; gap: 18px; }
.sw-service-compare article { padding: 25px; border: 1px solid #dce4ee; border-radius: 23px; background: #fff; }
.sw-service-compare article > span,
.sw-service-types__grid article > span,
.sw-service-role-design__grid article > span { color: var(--service-violet); font-size: 9px; font-weight: 840; letter-spacing: .07em; text-transform: uppercase; }
.sw-service-compare h3 { margin: 12px 0 20px; font-size: 21px; line-height: 1.2; }
.sw-service-compare ul { margin: 0; padding: 0; list-style: none; }
.sw-service-compare li { padding: 11px 0 11px 22px; border-top: 1px solid #e6ebf1; color: #64738a; font-size: 11px; line-height: 1.45; }
.sw-service-compare li::before { content: ""; float: left; width: 7px; height: 7px; margin: 4px 0 0 -20px; border: 2px solid var(--service-violet); border-radius: 50%; }
.sw-service-compare__bridge { display: flex; min-height: 72px; padding: 15px; align-items: center; justify-content: center; gap: 10px; color: #78879b; font-size: 8px; font-weight: 760; text-transform: uppercase; }
.sw-service-compare__bridge i { width: 44px; height: 1px; background: #aab7c8; }
.sw-service-compare__bridge strong { color: var(--service-violet); }

.sw-service-route { display: grid; margin: 0; padding: 0; gap: 11px; list-style: none; }
.sw-service-route li { display: grid; min-height: 138px; padding: 21px; grid-template-columns: 39px 1fr; gap: 12px; border: 1px solid #dce4ed; border-radius: 19px; background: #fff; }
.sw-service-route li > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #fff; background: var(--service-violet); font-size: 8px; font-weight: 850; }
.sw-service-route small { color: #8a97a9; font-size: 8px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.sw-service-route strong { display: block; margin: 7px 0; font-size: 14px; }
.sw-service-route p { margin: 0; color: #6f7d91; font-size: 10px; line-height: 1.55; }

.sw-service-types__grid,
.sw-service-integrations__grid,
.sw-service-role-design__grid { display: grid; gap: 13px; }
.sw-service-types__grid article,
.sw-service-role-design__grid article { padding: 23px; border: 1px solid #dce4ee; border-radius: 20px; background: #fff; }
.sw-service-types__grid article { min-height: 180px; }
.sw-service-types__grid h3,
.sw-service-role-design__grid h3 { margin: 12px 0 10px; font-size: 17px; line-height: 1.25; }
.sw-service-types__grid p,
.sw-service-role-design__grid p { margin: 0; color: #6c7b90; font-size: 11px; line-height: 1.6; }

.sw-service-anatomy { background: linear-gradient(135deg, #171d36, #0b1631); }
.sw-service-stack { display: grid; gap: 8px; }
.sw-service-stack article { display: grid; min-height: 105px; padding: 20px; align-content: center; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.035); }
.sw-service-stack article:nth-child(1) { margin-inline: 8%; background: rgba(111,86,207,.22); }
.sw-service-stack article:nth-child(2) { margin-inline: 6%; }
.sw-service-stack article:nth-child(3) { margin-inline: 4%; }
.sw-service-stack article:nth-child(4) { margin-inline: 2%; }
.sw-service-stack span { color: #a99ceb; font-size: 8px; font-weight: 830; letter-spacing: .08em; text-transform: uppercase; }
.sw-service-stack strong { margin: 6px 0 4px; color: #fff; font-size: 13px; }
.sw-service-stack small { color: #9faec5; font-size: 9px; line-height: 1.45; }

.sw-service-rules__grid,
.sw-service-security__grid,
.sw-service-fit__grid { display: grid; gap: 42px; }
.sw-service-rules__grid h2,
.sw-service-security__grid h2,
.sw-service-fit__grid h2 { margin: 17px 0 15px; font-size: clamp(30px, 5.8vw, 48px); line-height: 1.06; letter-spacing: -.04em; }
.sw-service-rules__grid > div:first-child > p,
.sw-service-security__grid > div > p { color: var(--sw-muted); font-size: 14px; line-height: 1.72; }
.sw-service-rules__list { border-top: 1px solid #dbe3ed; }
.sw-service-rules__list > div { display: grid; padding: 19px 0; grid-template-columns: 42px 1fr; gap: 13px; border-bottom: 1px solid #dbe3ed; }
.sw-service-rules__list > div > span { color: var(--service-violet); font-size: 9px; font-weight: 850; }
.sw-service-rules__list p { margin: 0; color: #6d7b8f; font-size: 10px; line-height: 1.55; }
.sw-service-rules__list strong { display: block; margin-bottom: 4px; color: var(--service-ink); font-size: 12px; }

.sw-service-core__scheme { display: grid; gap: 14px; }
.sw-service-core__actors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sw-service-core__actors span { display: grid; min-height: 55px; place-items: center; border: 1px solid #dce4ed; border-radius: 12px; color: #52647c; background: #fff; font-size: 9px; font-weight: 760; }
.sw-service-core__portal,
.sw-service-core__engine { position: relative; padding: 26px; border-radius: 22px; text-align: center; }
.sw-service-core__portal { color: #fff; background: var(--service-violet); }
.sw-service-core__engine { border: 1px solid #dce4ed; background: #fff; }
.sw-service-core__portal::before,
.sw-service-core__engine::before { content: ""; position: absolute; top: -15px; left: 50%; width: 1px; height: 15px; background: #aab7c8; }
.sw-service-core__portal small,
.sw-service-core__engine small { display: block; font-size: 8px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.sw-service-core__portal strong,
.sw-service-core__engine strong { display: block; margin: 8px 0; font-size: 19px; }
.sw-service-core__portal p,
.sw-service-core__engine p { max-width: 570px; margin: 0 auto; font-size: 10px; line-height: 1.55; opacity: .78; }
.sw-service-core__engine a { display: inline-flex; margin-top: 17px; color: var(--service-blue); font-size: 10px; font-weight: 760; text-decoration: none; }

.sw-service-integrations__grid > div { min-height: 120px; padding: 20px; border: 1px solid #dce4ed; border-radius: 17px; background: #fff; }
.sw-service-integrations__grid span { color: var(--service-blue); font-size: 11px; font-weight: 790; }
.sw-service-integrations__grid p { margin: 8px 0 0; color: #718096; font-size: 10px; line-height: 1.5; }
.sw-service-role-design { background: #f8f9fc; }
.sw-service-role-design__grid article { min-height: 200px; }

.sw-service-security { background: #17223b; }
.sw-service-security__grid h2 { color: #fff; }
.sw-service-security__grid > div > p { color: #aab9cd; }
.sw-service-security ul { display: grid; margin: 0; padding: 0; gap: 1px; border: 1px solid rgba(255,255,255,.11); border-radius: 21px; overflow: hidden; list-style: none; background: rgba(255,255,255,.11); }
.sw-service-security li { display: flex; min-height: 76px; padding: 17px 19px; justify-content: center; flex-direction: column; background: #1c2945; }
.sw-service-security strong { color: #fff; font-size: 12px; }
.sw-service-security li span { margin-top: 5px; color: #99abc1; font-size: 9px; line-height: 1.45; }

.sw-service-method__steps { display: grid; margin: 0; padding: 0; gap: 12px; counter-reset: service-steps; list-style: none; }
.sw-service-method__steps li { display: grid; min-height: 130px; padding: 21px; grid-template-columns: 40px 1fr; gap: 13px; border: 1px solid #dce4ed; border-radius: 19px; background: #fff; }
.sw-service-method__steps li > span { color: var(--service-violet); font-size: 9px; font-weight: 850; }
.sw-service-method__steps strong { font-size: 13px; }
.sw-service-method__steps p { margin: 7px 0 0; color: #6f7e92; font-size: 10px; line-height: 1.55; }

.sw-service-fit__checks { display: grid; gap: 9px; }
.sw-service-fit__checks p { display: grid; margin: 0; padding: 17px; grid-template-columns: 27px 1fr; gap: 10px; align-items: center; border: 1px solid #dce4ed; border-radius: 15px; color: #52637a; background: #fff; font-size: 11px; line-height: 1.5; }
.sw-service-fit__checks p span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: var(--service-violet); font-size: 10px; font-weight: 850; }

.sw-service-cta .sw-bp-cta__panel { background: linear-gradient(135deg, #1a2542, #121a31); }
.sw-service-cta .sw-bp-cta__mark span { background: var(--service-violet); }

@media (min-width: 600px) {
    .sw-service-view__grid,
    .sw-service-types__grid,
    .sw-service-integrations__grid,
    .sw-service-role-design__grid,
    .sw-service-method__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-service-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 800px) {
    .sw-service-compare { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); align-items: stretch; }
    .sw-service-compare__bridge { flex-direction: column; }
    .sw-service-compare__bridge i { width: 1px; height: 40px; }
    .sw-service-types__grid,
    .sw-service-integrations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sw-service-role-design__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sw-service-rules__grid,
    .sw-service-security__grid,
    .sw-service-fit__grid { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: start; gap: 80px; }
    .sw-service-method__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
    .sw-service-hero .sw-bp-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(450px, .98fr); }
    .sw-service-console { padding: 17px; }
    .sw-service-console__views [role="tabpanel"] { min-height: 382px; padding: 21px; }
    .sw-service-route { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
    .sw-service-route li { position: relative; border-radius: 0; }
    .sw-service-route li:first-child { border-radius: 19px 0 0 19px; }
    .sw-service-route li:last-child { border-radius: 0 19px 19px 0; }
    .sw-service-route li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 33px; right: -7px; width: 12px; height: 12px; border-top: 1px solid #9caabd; border-right: 1px solid #9caabd; background: #fff; transform: rotate(45deg); }
}

@media (max-width: 420px) {
    .sw-service-console { padding: 9px; }
    .sw-service-console__views [role="tabpanel"] { padding: 14px; }
    .sw-service-view__head b { display: none; }
    .sw-service-core__actors { grid-template-columns: 1fr; }
    .sw-service-core__portal::before { display: none; }
}