:root{--blog-ink:#17143d;--blog-accent:#6c63ff;--blog-soft:#f5f4ff;--blog-line:#e7e5f2}.blog-page{background:#fff;color:var(--blog-ink)}.blog-header{background:#17143d}.blog-hero{padding:180px 0 90px;background:radial-gradient(circle at 80% 20%,rgba(108,99,255,.35),transparent 34%),linear-gradient(135deg,#151238,#24205a);color:#fff}.blog-kicker{display:inline-block;margin-bottom:20px;color:#8ee4ff;font-size:13px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase}.blog-hero h1,.article-hero h1{max-width:930px;margin:0 0 24px;color:#fff;font-size:56px;line-height:1.1}.blog-hero h1 span{color:#9b95ff}.blog-hero p{max-width:670px;margin:0;color:rgba(255,255,255,.72);font-size:19px;line-height:1.7}.blog-catalog{padding:72px 0 100px}.blog-layout{display:grid;grid-template-columns:255px 1fr;gap:54px}.blog-sidebar{align-self:start;position:sticky;top:110px}.blog-section-filter{margin-top:26px;padding-top:22px;border-top:1px solid var(--blog-line)}.blog-section-filter strong{display:block;margin-bottom:10px;font-size:13px;text-transform:uppercase;letter-spacing:.7px}.blog-filter{display:block;padding:7px 11px;border-radius:8px;color:#66627d;font-size:14px;line-height:1.4}.blog-filter:hover,.blog-filter.active{background:var(--blog-soft);color:var(--blog-accent)}.blog-results-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.blog-results-head h2,.related-section h2{margin:0;font-size:32px}.blog-results-head span{color:#89869b;font-size:14px}.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.blog-card{position:relative;display:flex;min-height:320px;flex-direction:column;padding:30px;border:1px solid var(--blog-line);border-radius:20px;background:#fff;transition:.25s ease}.blog-card:hover{border-color:#b7b1ff;box-shadow:0 18px 45px rgba(38,31,92,.11);transform:translateY(-4px)}.blog-card-featured{background:linear-gradient(145deg,#f3f1ff,#fff)}.blog-card-link{position:absolute;inset:0;z-index:1}.blog-card-top{display:flex;min-height:28px;align-items:flex-start;justify-content:space-between;gap:10px}.blog-category,.blog-featured{color:var(--blog-accent);font-size:12px;font-weight:700;text-transform:uppercase}.blog-featured{padding:4px 8px;border-radius:20px;background:#e6e3ff;font-size:10px}.blog-card h3{margin:20px 0 14px;font-size:23px;line-height:1.35}.blog-card p{margin-bottom:24px;color:#69667c;font-size:15px;line-height:1.7}.blog-card-meta{display:flex;align-items:center;gap:16px;margin-top:auto;color:#908da0;font-size:12px}.blog-arrow{margin-left:auto;color:var(--blog-accent);font-size:23px}.blog-empty{grid-column:1/-1;padding:50px;border-radius:18px;background:var(--blog-soft);text-align:center}.pagination{margin-top:40px}.article-hero{padding:170px 0 75px;background:linear-gradient(135deg,#151238,#272361);color:#fff}.article-container{max-width:900px}.blog-breadcrumbs{display:flex;gap:10px;margin-bottom:32px;font-size:13px}.blog-breadcrumbs a,.blog-breadcrumbs span{color:rgba(255,255,255,.58)}.article-hero h1{font-size:48px}.article-lead{max-width:780px;color:rgba(255,255,255,.74);font-size:20px;line-height:1.65}.article-meta{display:flex;gap:24px;margin-top:30px;color:#aaa6cc;font-size:13px}.article-body-section{padding:75px 0 90px}.article-content{font-size:18px;line-height:1.85}.article-content h2{margin:48px 0 18px;font-size:30px}.article-content p{margin-bottom:22px;color:#4f4c61}.article-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:65px;padding:35px 40px;border-radius:22px;background:var(--blog-soft)}.article-cta span{color:var(--blog-accent);font-size:13px;font-weight:700;text-transform:uppercase}.article-cta h2{margin:5px 0 0;font-size:26px}.related-section{padding:70px 0 100px;background:#f8f8fc}.related-section h2{margin-bottom:30px}.related-section .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.related-section .blog-card{min-height:300px;padding:25px}@media(max-width:991px){.blog-hero h1,.article-hero h1{font-size:42px}.blog-layout{grid-template-columns:1fr}.blog-sidebar{position:static;display:flex;overflow:auto;gap:8px;padding-bottom:8px}.blog-section-filter{display:flex;margin:0;padding:0;border:0;gap:8px}.blog-section-filter strong{display:none}.blog-filter{flex:none;white-space:nowrap;background:#f7f6fb}.related-section .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767px){.blog-hero,.article-hero{padding:135px 0 60px}.blog-hero h1,.article-hero h1{font-size:34px}.blog-hero p,.article-lead{font-size:17px}.blog-catalog{padding:45px 0 70px}.blog-grid,.related-section .blog-grid{grid-template-columns:1fr}.blog-card{min-height:280px;padding:24px}.blog-results-head{align-items:flex-start;flex-direction:column;gap:7px}.article-body-section{padding:50px 0}.article-content{font-size:16px}.article-cta{align-items:flex-start;flex-direction:column;padding:28px}.blog-breadcrumbs{overflow:hidden;white-space:nowrap}}

.blog-card-cover{width:calc(100% + 60px);height:190px;margin:-30px -30px 24px;object-fit:cover;border-radius:20px 20px 0 0}.article-cover{margin:0 0 55px}.article-cover img,.article-content figure img{display:block;width:100%;height:auto;border-radius:22px}.article-reading-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:55px;align-items:start}.article-toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--blog-line);border-radius:16px}.article-toc strong{margin-bottom:5px;font-size:13px;text-transform:uppercase}.article-toc a{color:#6d6980;font-size:12px;line-height:1.45}.article-toc a:hover{color:var(--blog-accent)}.article-toc .article-toc-button{margin-top:8px;padding:10px;border-radius:8px;background:var(--blog-accent);color:#fff;text-align:center;font-weight:700}.article-content ul{margin:0 0 28px;padding-left:24px}.article-content li{margin:10px 0;color:#4f4c61}.article-content figure{margin:35px 0 45px}.article-offer{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:45px 0;padding:28px 30px;border-radius:20px;background:linear-gradient(135deg,#eeecff,#f8f8ff)}.article-offer span{color:var(--blog-accent);font-size:12px;font-weight:700;text-transform:uppercase}.article-offer h3{margin:5px 0 7px;font-size:23px}.article-offer p{max-width:540px;margin:0;color:#656176;line-height:1.6}.article-offer-large{margin-top:65px;padding:38px 42px;background:var(--blog-soft)}@media(max-width:991px){.article-reading-layout{grid-template-columns:1fr}.article-toc{position:static}.blog-card-cover{width:calc(100% + 50px);margin:-25px -25px 22px}}@media(max-width:767px){.blog-card-cover{width:calc(100% + 48px);height:170px;margin:-24px -24px 20px}.article-offer{align-items:flex-start;flex-direction:column;padding:25px}.article-cover{margin-bottom:35px}}

/* Article reading experience */
.article-content section {
    scroll-margin-top: 125px;
}

.article-content h2 {
    line-height: 1.28;
    letter-spacing: -.02em;
}

.article-toc {
    gap: 0;
    padding: 24px 18px 18px;
    overflow: hidden;
    border-color: #dedbea;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 45px rgba(32, 26, 78, .08);
}

.article-toc strong {
    margin: 0 8px 15px;
    color: #312d4b;
    letter-spacing: .08em;
}

.article-toc-links {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.article-toc-links a {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 9px 8px 9px 11px;
    border-radius: 9px;
    color: #6d6980;
    font-size: 12px;
    line-height: 1.4;
    transition: color .2s ease, background-color .2s ease;
}

.article-toc-links a::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--blog-accent);
    content: '';
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity .2s ease, transform .2s ease;
}

.article-toc-links a span {
    color: #aaa6ba;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.article-toc-links a:hover,
.article-toc-links a:focus-visible,
.article-toc-links a.active {
    background: var(--blog-soft);
    color: #302a71;
}

.article-toc-links a.active {
    font-weight: 400;
}

.article-toc-links a.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.article-toc-links a.active span {
    color: var(--blog-accent);
}

.article-toc .article-toc-button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 17px;
    padding: 11px 12px;
    background: var(--blog-accent);
    color: #fff;
    line-height: 1.35;
    overflow-wrap: normal;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.article-toc .article-toc-button:hover,
.article-toc .article-toc-button:focus-visible {
    background: #5148e8;
    color: #fff;
    box-shadow: 0 9px 22px rgba(108, 99, 255, .28);
    transform: translateY(-1px);
}

.article-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    padding: 30px 32px;
    overflow: hidden;
    border: 1px solid #dfdcff;
    border-left: 5px solid var(--blog-accent);
    background: linear-gradient(135deg, #f0eeff 0%, #fafaff 100%);
    box-shadow: 0 16px 40px rgba(48, 40, 115, .08);
}

.article-offer > div {
    min-width: 0;
}

.article-offer h3 {
    line-height: 1.3;
}

.article-offer .article-offer-button {
    display: inline-flex;
    width: auto;
    min-width: 170px;
    max-width: 230px;
    height: auto;
    min-height: 50px;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding: 12px 20px;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.article-offer .article-offer-button:hover,
.article-offer .article-offer-button:focus-visible {
    color: #fff;
}

@media (max-width: 991px) {
    .article-toc {
        position: sticky;
        top: 88px;
        z-index: 4;
        padding: 16px;
    }

    .article-toc strong {
        margin-bottom: 10px;
    }

    .article-toc-links {
        max-height: 184px;
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .article-content h2 {
        margin-top: 38px;
        font-size: 25px;
        line-height: 1.25;
    }

    .article-toc {
        position: static;
    }

    .article-offer,
    .article-offer-large {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 25px 24px;
    }

    .article-offer .article-offer-button {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

/* Article lists and image gallery */
.article-content ul {
    display: grid;
    gap: 12px;
    margin: 4px 0 30px;
    padding: 0;
    list-style: none;
}

.article-content li {
    position: relative;
    margin: 0;
    padding: 2px 0 2px 36px;
    line-height: 1.65;
}

.article-content li::before {
    position: absolute;
    top: .28em;
    left: 0;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eeecff;
    color: var(--blog-accent);
    content: '✓';
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.article-cover a,
.article-content figure a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 22px;
    cursor: zoom-in;
}

.article-cover a::after,
.article-content figure a::after {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(23, 20, 61, .78);
    box-shadow: 0 8px 24px rgba(23, 20, 61, .2);
    color: #fff;
    content: '+';
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
}

.article-cover a:hover::after,
.article-cover a:focus-visible::after,
.article-content figure a:hover::after,
.article-content figure a:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.article-cover a img,
.article-content figure a img {
    transition: transform .3s ease;
}

.article-cover a:hover img,
.article-content figure a:hover img {
    transform: scale(1.015);
}

@media (max-width: 767px) {
    .article-content li {
        padding-left: 32px;
    }

    .article-content li::before {
        width: 22px;
        height: 22px;
    }

    .article-cover a::after,
    .article-content figure a::after {
        width: 38px;
        height: 38px;
        opacity: 1;
        transform: none;
    }
}

/* Wider article column and edge-to-edge catalog covers */
.article-page .article-container {
    max-width: 1089px;
}

.blog-card {
    overflow: hidden;
}

.blog-card-cover {
    display: block;
    max-width: none;
    flex: 0 0 auto;
}

@media (max-width: 991px) and (min-width: 768px) {
    .blog-card-cover {
        width: calc(100% + 60px);
        margin: -30px -30px 24px;
    }
}
.article-content strong{font-weight:700;color:var(--blog-ink)}.article-content em{font-style:italic}.article-content u{text-decoration-color:var(--blog-accent);text-decoration-thickness:2px;text-underline-offset:3px}

/* Blog pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--blog-line);
}

.blog-pagination-summary {
    margin: 0;
    color: #89869b;
    font-size: 13px;
    white-space: nowrap;
}

.blog-pagination-list {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-pagination-list a,
.blog-pagination-list li > span {
    display: inline-flex;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--blog-line);
    border-radius: 12px;
    background: #fff;
    color: #56516e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.blog-pagination-list a:hover,
.blog-pagination-list a:focus-visible {
    border-color: #b9b4ff;
    background: var(--blog-soft);
    color: var(--blog-accent);
    box-shadow: 0 8px 20px rgba(48, 40, 115, .1);
    transform: translateY(-1px);
}

.blog-pagination-page.active > span {
    border-color: var(--blog-accent);
    background: var(--blog-accent);
    box-shadow: 0 8px 20px rgba(108, 99, 255, .25);
    color: #fff;
}

.blog-pagination-edge a,
.blog-pagination-edge > span {
    gap: 8px;
    min-width: 104px;
}

.blog-pagination-edge.disabled > span {
    border-color: #efedf5;
    background: #faf9fc;
    color: #b7b4c2;
}

.blog-pagination-dots > span {
    min-width: 24px;
    padding: 0 3px;
    border-color: transparent;
    background: transparent;
    color: #aaa6b6;
}

@media (max-width: 767px) {
    .blog-pagination {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-top: 34px;
        padding-top: 22px;
    }

    .blog-pagination-summary {
        text-align: center;
    }

    .blog-pagination-list {
        justify-content: center;
    }

    .blog-pagination-list a,
    .blog-pagination-list li > span {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 10px;
    }

    .blog-pagination-edge a,
    .blog-pagination-edge > span {
        min-width: 38px;
        font-size: 0;
    }

    .blog-pagination-edge a span,
    .blog-pagination-edge > span span {
        font-size: 18px;
    }
}
