.blog-shell{
        position:relative;
        padding:18px 12px 42px;
        background:
            radial-gradient(900px 420px at 8% 0%, rgba(31,157,232,.16), rgba(255,255,255,0)),
            radial-gradient(640px 360px at 92% 18%, rgba(4,72,141,.11), rgba(255,255,255,0)),
            linear-gradient(180deg, #f8fbff 0%, #f4f8fc 100%);
        overflow:hidden;
    }
    .blog-shell:before,
    .blog-shell:after{
        content:"";
        position:absolute;
        border-radius:999px;
        pointer-events:none;
    }
    .blog-shell:before{
        width:280px;
        height:280px;
        right:-80px;
        top:80px;
        background:rgba(31,157,232,.09);
    }
    .blog-shell:after{
        width:220px;
        height:220px;
        left:-70px;
        bottom:70px;
        background:rgba(4,72,141,.06);
    }
    .blog-wrap{
        width:100%;
        max-width:1180px;
        margin:0 auto;
        position:relative;
        z-index:1;
    }
    .blog-hero{
        display:grid;
        grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
        gap:18px;
        margin-bottom:24px;
    }
    .blog-intro,
    .blog-aside{
        border:1px solid rgba(148,163,184,.18);
        border-radius:28px;
        background:rgba(255,255,255,.9);
        box-shadow:0 20px 60px rgba(15,23,42,.08);
        backdrop-filter:blur(10px);
    }
    .blog-intro{
        padding:30px 30px 28px;
    }
    .blog-kicker,
    .featured-tag,
    .mini-pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        width:fit-content;
        padding:7px 12px;
        border-radius:999px;
        font-size:12px;
        font-weight:900;
        letter-spacing:.25px;
        text-transform:uppercase;
    }
    .blog-kicker,
    .featured-tag{
        background:#e7f2fd;
        color:#04488d;
        border:1px solid rgba(4,72,141,.12);
    }
    .blog-kicker .dot,
    .featured-tag .dot,
    .mini-pill .dot{
        width:8px;
        height:8px;
        border-radius:999px;
        background:#1f9de8;
        display:inline-block;
    }
    .blog-title{
        margin:18px 0 12px;
        color:#0f172a;
        font-size:44px;
        line-height:1.02;
        letter-spacing:-1.1px;
        font-weight:900;
    }
    .blog-sub{
        margin:0;
        color:#475569;
        font-size:18px;
        line-height:1.65;
    }
    .blog-links{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:22px;
    }
    .blog-btn,
    .blog-btn-alt{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        min-height:46px;
        padding:0 18px;
        border-radius:14px;
        font-weight:900;
        text-decoration:none;
        transition:transform .18s ease, box-shadow .18s ease;
    }
    .blog-btn{
        background:#0b63ce;
        color:#fff;
        box-shadow:0 14px 32px rgba(11,99,206,.22);
    }
    .blog-btn-alt{
        background:#fff;
        color:#0f172a;
        border:1px solid rgba(148,163,184,.28);
    }
    .blog-btn:hover,
    .blog-btn-alt:hover{
        transform:translateY(-2px);
        text-decoration:none;
    }
    .blog-aside{
        padding:24px;
        display:flex;
        flex-direction:column;
        gap:14px;
        background:linear-gradient(180deg, rgba(4,72,141,.96) 0%, rgba(11,99,206,.90) 100%);
        color:#fff;
    }
    .blog-aside h2{
        margin:0;
        font-size:22px;
        line-height:1.15;
        font-weight:900;
    }
    .blog-aside p{
        margin:0;
        color:rgba(255,255,255,.85);
        line-height:1.6;
        font-size:15px;
    }
    .aside-list{
        display:grid;
        gap:10px;
        margin-top:4px;
    }
    .aside-item{
        border-radius:18px;
        padding:14px 16px;
        background:rgba(255,255,255,.12);
        border:1px solid rgba(255,255,255,.14);
    }
    .aside-item strong{
        display:block;
        font-size:14px;
        margin-bottom:4px;
    }
    .aside-item span{
        font-size:13px;
        color:rgba(255,255,255,.78);
    }
    .section-head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:12px;
        margin:0 0 14px;
    }
    .section-head h2{
        margin:0;
        color:#0f172a;
        font-size:18px;
        font-weight:900;
    }
    .section-head p{
        margin:0;
        color:#64748b;
        font-size:14px;
    }
    .featured-card{
        display:grid;
        grid-template-columns:minmax(0, 1.1fr) minmax(320px, .9fr);
        border:1px solid rgba(148,163,184,.18);
        border-radius:30px;
        overflow:hidden;
        background:#fff;
        box-shadow:0 22px 70px rgba(15,23,42,.09);
        margin-bottom:20px;
    }
    .featured-media{
        min-height:360px;
        background-size:cover;
        background-position:center;
        position:relative;
    }
    .featured-media:after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(135deg, rgba(15,23,42,.08), rgba(15,23,42,.34));
    }
    .featured-body{
        padding:28px 28px 24px;
        display:flex;
        flex-direction:column;
        gap:14px;
    }
    .featured-meta,
    .bmeta{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        color:#64748b;
        font-size:13px;
        font-weight:700;
    }
    .meta-chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:7px 11px;
        border-radius:999px;
        background:#f8fbff;
        border:1px solid rgba(148,163,184,.18);
        color:#334155;
    }
    .meta-chip strong{
        color:#0f172a;
        font-weight:900;
    }
    .featured-h{
        margin:0;
        color:#0f172a;
        font-size:34px;
        line-height:1.06;
        letter-spacing:-.9px;
        font-weight:900;
    }
    .featured-date-line,
    .card-date-line{
        color:#0b63ce;
        font-size:14px;
        font-weight:900;
        letter-spacing:.1px;
    }
    .featured-p{
        margin:0;
        color:#334155;
        font-size:16px;
        line-height:1.7;
    }
    .featured-actions{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:auto;
    }
    .blog-grid{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:18px;
    }
    .cardlink,
    .cardlink:hover,
    .cardlink:focus{
        display:block;
        color:inherit;
        text-decoration:none;
    }
    .bcard{
        height:100%;
        display:flex;
        flex-direction:column;
        border-radius:24px;
        overflow:hidden;
        background:#fff;
        border:1px solid rgba(148,163,184,.18);
        box-shadow:0 18px 46px rgba(15,23,42,.07);
        transition:transform .18s ease, box-shadow .18s ease;
    }
    .bcard:hover{
        transform:translateY(-5px);
        box-shadow:0 22px 56px rgba(15,23,42,.12);
    }
    .bcard-media{
        position:relative;
        aspect-ratio:16 / 10;
        overflow:hidden;
        background:#dbeafe;
    }
    .bcard-img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transition:transform .3s ease;
    }
    .bcard:hover .bcard-img{
        transform:scale(1.04);
    }
    .mini-pill{
        position:absolute;
        left:14px;
        bottom:14px;
        background:rgba(15,23,42,.76);
        color:#fff;
        border:1px solid rgba(255,255,255,.2);
        z-index:2;
    }
    .bcard-body{
        padding:18px 18px 20px;
        display:flex;
        flex-direction:column;
        gap:12px;
        flex:1;
    }
    .bcard-h{
        margin:0;
        color:#0f172a;
        font-size:22px;
        line-height:1.18;
        font-weight:900;
        letter-spacing:-.45px;
    }
    .bexcerpt{
        margin:0;
        color:#475569;
        font-size:15px;
        line-height:1.7;
    }
    .more{
        margin-top:auto;
        display:inline-flex;
        align-items:center;
        gap:8px;
        color:#0b63ce;
        font-weight:900;
    }
    .filters-panel{
        display:grid;
        gap:14px;
        margin:0 0 18px;
        padding:18px;
        border-radius:26px;
        background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,251,255,.94) 100%);
        border:1px solid rgba(148,163,184,.18);
        box-shadow:0 18px 46px rgba(15,23,42,.06);
        scroll-margin-top:18px;
    }
    .filters-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
    }
    .filters-head h3{
        margin:0;
        color:#0f172a;
        font-size:18px;
        font-weight:900;
        letter-spacing:-.2px;
    }
    .filters-head p{
        margin:0;
        color:#64748b;
        font-size:14px;
    }
    .filters-groups{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
    }
    .filter-group{
        padding:14px 14px 12px;
        border-radius:20px;
        background:#fff;
        border:1px solid rgba(148,163,184,.16);
        box-shadow:0 10px 24px rgba(15,23,42,.04);
    }
    .filter-group-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-bottom:12px;
    }
    .filters-label{
        color:#0f172a;
        font-size:12px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.35px;
    }
    .filters-row{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        align-items:flex-start;
    }
    .filter-chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        min-height:34px;
        padding:0 13px;
        border-radius:999px;
        background:#fff;
        color:#334155;
        border:1px solid rgba(148,163,184,.22);
        text-decoration:none;
        font-size:13px;
        font-weight:800;
        transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .filter-chip:hover{
        text-decoration:none;
        transform:translateY(-1px);
        box-shadow:0 10px 24px rgba(15,23,42,.07);
    }
    .filter-chip.active{
        background:#0b63ce;
        color:#fff;
        border-color:#0b63ce;
        box-shadow:0 14px 32px rgba(11,99,206,.20);
    }
    .filter-clear{
        color:#0b63ce;
        font-size:13px;
        font-weight:900;
        text-decoration:none;
        white-space:nowrap;
    }
    .filter-clear:hover{ text-decoration:underline; }
    .type-pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:7px 11px;
        border-radius:999px;
        background:#fff7ed;
        border:1px solid rgba(251,146,60,.18);
        color:#9a3412;
        font-size:12px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.2px;
    }
    .empty-state{
        padding:26px 24px;
        border-radius:26px;
        background:#fff;
        border:1px solid rgba(148,163,184,.18);
        box-shadow:0 18px 46px rgba(15,23,42,.06);
    }
    .empty-state h3{
        margin:0 0 8px;
        color:#0f172a;
        font-size:24px;
        font-weight:900;
    }
    .empty-state p{
        margin:0;
        color:#475569;
        font-size:15px;
        line-height:1.7;
    }
    .blog-featured-area,
    .blog-results-area{
        transition:opacity .18s ease, transform .18s ease;
    }
    .blog-featured-area.is-loading,
    .blog-results-area.is-loading{
        opacity:.45;
        transform:translateY(2px);
        pointer-events:none;
    }
    .blog-pagination{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:8px;
        margin-top:20px;
    }
    .pager-link{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:40px;
        height:40px;
        padding:0 14px;
        border-radius:999px;
        background:#fff;
        color:#334155;
        border:1px solid rgba(148,163,184,.22);
        text-decoration:none;
        font-size:14px;
        font-weight:800;
        transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .pager-link:hover{
        text-decoration:none;
        transform:translateY(-1px);
        box-shadow:0 10px 24px rgba(15,23,42,.07);
    }
    .pager-link.active{
        background:#0b63ce;
        color:#fff;
        border-color:#0b63ce;
        box-shadow:0 14px 32px rgba(11,99,206,.20);
        pointer-events:none;
    }
    .pager-link.wide{
        padding:0 16px;
    }
    @media (max-width: 991px){
        .blog-hero,
        .featured-card{
            grid-template-columns:1fr;
        }
        .featured-media{
            min-height:280px;
        }
        .blog-grid{
            grid-template-columns:repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 767px){
        .blog-shell{
            padding:12px 10px 30px;
        }
        .blog-intro,
        .blog-aside,
        .featured-body{
            padding:20px;
        }
        .blog-title{
            font-size:34px;
        }
        .blog-sub{
            font-size:16px;
        }
        .featured-h{
            font-size:28px;
        }
        .blog-grid{
            grid-template-columns:1fr;
            gap:14px;
        }
        .section-head{
            flex-direction:column;
            align-items:flex-start;
        }
        .filters-panel{
            padding:16px;
        }
        .filters-head{
            flex-direction:column;
            align-items:flex-start;
        }
        .filters-groups{
            grid-template-columns:1fr;
        }
        .filter-group{
            padding:13px;
        }
    }