:root{
    --blog-primary:#6556d6;
    --blog-primary-dark:#4f44b2;
    --blog-text:#2f2b45;
    --blog-muted:#6f6b81;
    --blog-soft:#f8f7ff;
    --blog-border:#ece9f6;
    --blog-card:#ffffff;
    --blog-shadow:0 14px 40px rgba(42,36,71,.08);
}
.blog-page{background:linear-gradient(180deg,#f7f6ff 0,#ffffff 220px,#fbfbfe 100%)}
.blog-hero{padding:110px 0 26px;background:linear-gradient(180deg,#f7f6ff 0%,#ffffff 100%);border-bottom:1px solid var(--blog-border)}
.blog-hero h1{font-size:clamp(2rem,4vw,3.55rem);font-weight:800;letter-spacing:-.045em;margin:0 0 14px;color:var(--blog-text);line-height:1.1}
.blog-hero p{max-width:840px;color:var(--blog-muted);font-size:1.08rem;line-height:1.7;margin:0}
.breadcrumb-os{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;color:#8b86a1;font-size:.92rem}
.breadcrumb-os a{color:#726ca0;text-decoration:none;font-weight:700}
.breadcrumb-os a:hover{color:var(--blog-primary)}
.blog-overview{padding:28px 0 76px}
.blog-section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;flex-wrap:wrap;margin-bottom:24px}
.blog-section-head h2{font-size:1.55rem;letter-spacing:-.03em;margin:0;color:var(--blog-text)}
.blog-section-head p{margin:6px 0 0;color:var(--blog-muted)}
.blog-total-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--blog-border);box-shadow:var(--blog-shadow);font-weight:700;color:#615b78}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.blog-card{background:var(--blog-card);border:1px solid var(--blog-border);border-radius:24px;overflow:hidden;box-shadow:var(--blog-shadow);display:flex;flex-direction:column;min-height:100%}
.blog-card-media{position:relative;display:block;background:#f0eef8}

.blog-card-media img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#f4f3fa;display:block}

.blog-card-media::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.08) 100%)}
.blog-card-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.blog-meta,.article-meta{display:flex;gap:12px;flex-wrap:wrap;color:#8a8698;font-size:.85rem}
.blog-meta span,.article-meta span{display:inline-flex;align-items:center;gap:6px}
.blog-card h2{font-size:1.25rem;line-height:1.35;margin:0}
.blog-card h2 a{color:var(--blog-text);text-decoration:none}
.blog-card h2 a:hover{color:var(--blog-primary)}
.blog-card p{color:var(--blog-muted);margin:0;line-height:1.7}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.blog-card .read{display:inline-flex;align-items:center;gap:8px;color:var(--blog-primary);font-weight:800;text-decoration:none}
.blog-card .read:hover{color:var(--blog-primary-dark)}
.blog-tag{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:var(--blog-soft);color:#5f5980;font-weight:700;font-size:.82rem}
.blog-card--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(320px,1.08fr) minmax(0,1fr)}

.blog-card--featured .blog-card-media img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:contain;
    display:block;
}

.blog-card--featured .blog-card-body{padding:22px 28px;gap:10px}
.blog-card--featured h2{
    font-size:clamp(1.65rem,2.35vw,2.2rem);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.blog-card--featured p{
    font-size:1rem;
    line-height:1.65;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.blog-card--featured .blog-card-footer{padding-top:2px}
.blog-empty{border:1px dashed #cbc6e8;border-radius:24px;padding:42px;text-align:center;background:#faf9ff;color:var(--blog-muted)}
.blog-pagination{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.blog-pagination a,.blog-pagination span{min-width:44px;height:44px;border-radius:14px;border:1px solid var(--blog-border);display:inline-flex;align-items:center;justify-content:center;padding:0 14px;background:#fff;color:#5b5670;font-weight:800;text-decoration:none;box-shadow:0 8px 20px rgba(42,36,71,.04)}
.blog-pagination a:hover{border-color:#d8d2f4;color:var(--blog-primary)}
.blog-pagination .active{background:var(--blog-primary);border-color:var(--blog-primary);color:#fff}
.article-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,.9fr);gap:28px;align-items:start}
.article-main,.article-sidebar{min-width:0}
.article-cover{width:100%;height:auto;border-radius:24px;aspect-ratio:16/9;object-fit:contain;margin:0 0 24px;border:1px solid var(--blog-border);box-shadow:var(--blog-shadow);background:#fff}
.article-card,.sidebar-card{background:#fff;border:1px solid var(--blog-border);border-radius:24px;box-shadow:var(--blog-shadow)}
.article-card{padding:28px}
.article-content{font-size:1.04rem;line-height:1.9;color:#484457}
.article-content h2{font-size:1.72rem;margin:36px 0 14px;color:#2f2a42;letter-spacing:-.03em}
.article-content h3{font-size:1.34rem;margin:30px 0 12px;color:#363149;letter-spacing:-.02em}
.article-content a{color:var(--blog-primary);font-weight:700}
.article-content p,.article-content ul,.article-content ol,.article-content blockquote,.article-content table{margin-bottom:1.15rem}
.article-content ul,.article-content ol{padding-left:1.2rem}
.article-content blockquote{border-left:4px solid #7367f0;background:#f8f7ff;padding:18px 20px;border-radius:0 16px 16px 0}
.article-content table{width:100%;border-collapse:collapse;margin:22px 0}
.article-content th,.article-content td{border:1px solid #e6e3ee;padding:10px;text-align:left}
.article-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--blog-border)}
.article-callout{margin-top:24px;padding:18px 20px;border-radius:18px;background:#f8f7ff;border:1px solid #e2ddfb;color:#5a5476;line-height:1.7}
.article-callout strong{display:block;font-size:1.1rem;color:var(--blog-text);margin-bottom:6px}
.sidebar-sticky{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.sidebar-card{padding:22px}
.sidebar-card h3{font-size:1.08rem;margin:0 0 14px;color:var(--blog-text)}
.sidebar-links,.sidebar-posts{display:flex;flex-direction:column;gap:12px}
.sidebar-links a,.sidebar-posts a{text-decoration:none;color:#4f4966;font-weight:700;line-height:1.5}
.sidebar-links a:hover,.sidebar-posts a:hover{color:var(--blog-primary)}
.sidebar-post-item{padding:12px 0;border-top:1px solid #f0edf8}
.sidebar-post-item:first-child{padding-top:0;border-top:0}
.sidebar-mini-meta{font-size:.82rem;color:#8c88a0;margin-top:4px}
.sidebar-cta{padding:20px;background:linear-gradient(180deg,#f8f7ff 0,#ffffff 100%);border:1px solid #e3dff7;border-radius:20px}
.sidebar-cta .btn-os,.sidebar-cta .btn-outline-os{width:100%;justify-content:center;margin-top:10px}.sidebar-cta .btn-os{display:flex;align-items:center;background:linear-gradient(135deg,#6556d6,#7568e7)!important;color:#fff!important;border:1px solid #6556d6!important;text-decoration:none!important}.sidebar-cta .btn-os:hover{color:#fff!important;background:linear-gradient(135deg,#5548bc,#6556d6)!important}.sidebar-cta .btn-outline-os{display:flex;align-items:center;color:#4f4868!important;border:1px solid #d8d3ef!important;background:#fff!important;text-decoration:none!important}.sidebar-cta .btn-outline-os:hover{color:#6556d6!important;border-color:#bcb3ec!important;background:#f8f7ff!important}
@media(max-width:1199px){.article-layout{grid-template-columns:1fr}.sidebar-sticky{position:relative;top:0}.blog-card--featured{grid-template-columns:1fr}}
@media(max-width:767px){.blog-hero{padding:100px 0 20px}.blog-overview{padding:22px 0 56px}.blog-grid{grid-template-columns:1fr}.blog-card--featured{grid-column:auto}.blog-card,.article-card,.sidebar-card{border-radius:18px}.blog-card-body,.article-card,.sidebar-card{padding:18px}.article-cover{border-radius:18px}.blog-card h2{font-size:1.15rem}}