:root {
    --blog-blue: #237be3;
    --blog-blue-hover: #1a63bd;
    --blog-ink: #1c1c1f;
    --blog-text: #4e4e4e;
    --blog-muted: #8b8f94;
    --blog-panel: #fafaff;
    --blog-line: #e6e8f0;
    --blog-tint: #eef4fd;
    --blog-radius: 20px;
}

.blog-page .title_l { margin-bottom: 14px; }

.blog-lead {
    max-width: 720px;
    margin: 0 0 40px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--blog-text);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--blog-panel);
    border: 1px solid var(--blog-line);
    border-radius: var(--blog-radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
}

.blog-card:hover,
.blog-card:focus-within {
    transform: scale(1.04);
    box-shadow: 0 24px 48px -12px rgba(35, 60, 110, .28);
    z-index: 2;
}

.blog-card__img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #dfe3ea;
}

.blog-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 26px 26px;
}

.blog-card__date {
    font-size: 13px;
    color: var(--blog-muted);
    margin-bottom: 10px;
}

.blog-card__title {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--blog-ink);
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blog-card__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--blog-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    border-radius: 14px;
    background: var(--blog-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 11px 18px 0 rgb(48 113 206 / 12%);
    transition: background .2s linear;
}

.blog-btn:hover { background: var(--blog-blue-hover); color: #fff; }

.blog-card .blog-btn { margin-top: auto; align-self: flex-start; }

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--blog-line);
    background: #fff;
    color: var(--blog-ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s linear;
}

.blog-pagination a:hover { border-color: var(--blog-blue); color: var(--blog-blue); }

.blog-pagination .is-active span {
    background: var(--blog-blue);
    border-color: var(--blog-blue);
    color: #fff;
}

.blog-pagination .is-disabled span { color: #c3c7ce; }

.blog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.blog-hero__img {
    border-radius: var(--blog-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #dfe3ea;
}

.blog-hero__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px 0 14px;
    margin-bottom: 28px;
    border-radius: 12px;
    background: #f1f2f5;
    color: var(--blog-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s linear;
}

.blog-back svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; }
.blog-back:hover { background: var(--blog-tint); color: var(--blog-blue); }
.blog-back:hover svg { transform: translateX(-3px); }

.blog-hero__meta {
    font-size: 14px;
    color: var(--blog-muted);
    margin-bottom: 14px;
}

.blog-hero__title {
    margin: 0 0 22px;
    font: 700 40px / 1.15 "Montserrat", "Open Sans", sans-serif;
    color: #000;
}

.blog-hero__lead {
    margin: 0;
    font-size: 19px;
    line-height: 1.55;
    color: var(--blog-text);
}

.blog-content {
    max-width: 820px;
    font-size: 17px;
    line-height: 1.7;
    color: #353f47;
}

.blog-content > *:first-child { margin-top: 0; }

.blog-content p { margin: 0 0 1.1em; }

.blog-content h2 {
    margin: 2.2em 0 .7em;
    font: 700 28px / 1.25 "Montserrat", "Open Sans", sans-serif;
    color: var(--blog-ink);
}

.blog-content h3 {
    margin: 1.8em 0 .5em;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--blog-ink);
}

.blog-content ul,
.blog-content ol { margin: 0 0 1.3em; padding-left: 1.4em; }

.blog-content li { margin-bottom: .45em; padding-left: .2em; }
.blog-content ul li::marker { color: var(--blog-blue); }
.blog-content ol li::marker { color: var(--blog-blue); font-weight: 700; }

.blog-content a { color: var(--blog-blue); }

.blog-content strong { color: var(--blog-ink); }

.blog-content .blog-note,
.blog-content .blog-note_warn {
    margin: 1.6em 0;
    padding: 22px 26px;
    border-radius: 16px;
    background: var(--blog-tint);
    border-left: 4px solid var(--blog-blue);
    color: var(--blog-ink);
}

.blog-content .blog-note_warn {
    background: #fff5ec;
    border-left-color: #f08a24;
}

.blog-table {
    margin: 1.4em 0 2em;
    overflow-x: auto;
    border: 1px solid var(--blog-line);
    border-radius: 16px;
}

.blog-table table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.blog-table th,
.blog-table td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--blog-line);
}

.blog-table thead th {
    background: var(--blog-panel);
    color: var(--blog-ink);
    font-weight: 700;
}

.blog-table tbody tr:last-child td { border-bottom: 0; }

.blog-table table > tbody:first-child > tr:first-child > td {
    background: var(--blog-panel);
    color: var(--blog-ink);
    font-weight: 700;
}
.blog-table td:first-child { font-weight: 700; color: var(--blog-ink); }

.blog-cta {
    margin: 2.4em 0 0;
    padding: 32px 36px;
    border-radius: var(--blog-radius);
    background: var(--blog-panel);
    border: 1px solid var(--blog-line);
}

.blog-cta h3 { margin-top: 0; }
.blog-cta p { margin-bottom: 20px; }
.blog-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.blog-btn_ghost { background: #fff; color: var(--blog-blue); border: 1px solid var(--blog-blue); box-shadow: none; }
.blog-btn_ghost:hover { background: var(--blog-tint); color: var(--blog-blue); }

.blog-slider__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px;
}

.blog-slider__head .title_l { margin: 0; }

.blog-slider__nav { display: flex; gap: 10px; }

.blog-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid var(--blog-line);
    background: #fff;
    color: var(--blog-ink);
    cursor: pointer;
    transition: all .2s linear;
}

.blog-slider__arrow svg { width: 22px; height: 22px; }
.blog-slider__arrow:hover:not(:disabled) { border-color: var(--blog-blue); color: var(--blog-blue); }
.blog-slider__arrow:disabled { opacity: .35; cursor: default; }
.blog-slider__arrow.swiper-button-lock { display: none; }

.blog-slider .blog-slider__viewport {
    position: relative;
    overflow: hidden;
    height: auto;
    padding: 16px 12px 28px;
    margin: -16px -12px -28px;
}

.blog-slider__track { margin: 0; padding: 0; list-style: none; }
.blog-slider .blog-card { flex-shrink: 0; height: auto; }

@media (max-width: 1199px) {
    .blog-hero { gap: 36px; }
    .blog-hero__title { font-size: 34px; }
}

@media (max-width: 991px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .blog-hero { grid-template-columns: 1fr; }
    .blog-hero__text { order: -1; }
}

@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card:hover, .blog-card:focus-within { transform: scale(1.02); }
    .blog-hero__title { font-size: 28px; }
    .blog-hero__lead { font-size: 17px; }
    .blog-content { font-size: 16px; }
    .blog-content h2 { font-size: 23px; }
    .blog-cta { padding: 24px 22px; }
    .blog-slider__head { align-items: center; }
    .blog-slider__arrow { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-back svg { transition: none; }
    .blog-card:hover, .blog-card:focus-within { transform: none; }
}

.blog-btn:focus-visible,
.blog-back:focus-visible,
.blog-pagination a:focus-visible,
.blog-slider__arrow:focus-visible {
    outline: 3px solid var(--blog-blue);
    outline-offset: 3px;
}
.blog-card__title a:focus-visible { outline: none; }

.blog-table thead { position: static; top: auto; background: none; z-index: auto; }
.blog-table tr { border-bottom: 0; }
.blog-table td,
.blog-table th { max-width: none; min-width: 0; width: auto; }
.blog-table td:first-child,
.blog-table th:first-child { width: 22%; padding-left: 18px; }

.blog-content .blog-btn { color: #fff; text-decoration: none; }
.blog-content .blog-btn_ghost { color: var(--blog-blue); }

.blog-page_body { padding-top: 0; }
.blog-page_gray { background: #f2f3f7; }