.blog-page,
body:has(.blog-page) { overflow-x: hidden; }

.blog-page {
    --blog-surface: var(--card-bg, #ffffff);
    --blog-surface-elevated: #ffffff;
    --blog-surface-soft: var(--bg-secondary, #f5f7fb);
    --blog-text: var(--text-primary, #172033);
    --blog-muted: var(--text-secondary, #647087);
    --blog-border: var(--card-border, #dfe5ef);
    --blog-brand: var(--accent-primary, #2457e6);
    --blog-brand-bright: #4da3ff;
    --blog-shadow: 0 18px 50px rgba(22, 40, 76, .10);
    color: var(--blog-text);
    padding: 2.5rem 0 4rem;
}

.blog-list-page { padding-top: 1.5rem; }
.blog-list-page .blog-hero {
    position: relative;
    isolation: isolate;
    margin-bottom: clamp(2.25rem, 3.5vw, 3rem);
    padding: clamp(2rem, 3.25vw, 3.25rem);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 87% 18%, rgba(73, 174, 255, .32), transparent 26%),
        radial-gradient(circle at 72% 100%, rgba(27, 105, 187, .30), transparent 32%),
        linear-gradient(135deg, #071b35 0%, #0b315b 52%, #0d5278 100%);
    border: 1px solid rgba(123, 198, 255, .22);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(5, 27, 54, .28);
}
.blog-list-page .blog-hero::after {
    position: absolute;
    z-index: -1;
    top: -55%;
    right: -8%;
    width: min(44vw, 570px);
    aspect-ratio: 1;
    content: "";
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018);
}
.blog-hero-copy { max-width: 890px; }
.blog-list-page .blog-hero h1 {
    max-width: 1040px;
    margin: .65rem 0 1.15rem;
    color: #fff !important;
    font-size: clamp(2.2rem, 3.8vw, 3.55rem);
    font-weight: 820;
    letter-spacing: -.045em;
    line-height: .98;
    text-wrap: balance;
}
.blog-hero-lead {
    max-width: 980px;
    margin: 0;
    color: rgba(237, 246, 255, .83) !important;
    font-size: clamp(1rem, 1.8vw, 1.22rem);
    line-height: 1.65;
}
.blog-eyebrow {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    color: #91caff !important;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.blog-eyebrow span { width: 22px; height: 2px; background: currentColor; }
.category-filter-wrap {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.16);
}
.category-filter-label {
    display: block;
    margin-bottom: .75rem;
    color: rgba(220, 238, 255, .66);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.category-filter { display: flex; flex-wrap: wrap; gap: .55rem; }
.category-filter a {
    padding: .62rem .95rem;
    color: rgba(239, 247, 255, .88) !important;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.category-filter a:hover { color: #fff !important; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); transform: translateY(-1px); }
.category-filter a.is-active { color: #08233e !important; background: #fff; border-color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.17); }
.category-filter a:focus-visible, .news-card a:focus-visible, .latest-news a:focus-visible { outline: 3px solid #8acbff; outline-offset: 3px; }

.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.section-heading { display: flex; align-items: end; gap: 1.25rem; margin-bottom: 1.3rem; }
.section-heading > div { flex: 0 0 auto; }
.section-heading h2, .latest-news h2 { margin: .15rem 0 0; font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -.025em; line-height: 1.15; }
.section-kicker { margin: 0; color: var(--blog-brand); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.section-rule { flex: 1; height: 1px; margin-bottom: .28rem; background: var(--blog-border); }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.news-card, .empty-state, .latest-news, .article-card {
    background: var(--blog-surface);
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    box-shadow: var(--blog-shadow);
    overflow: hidden;
}
.news-card { display: flex; min-width: 0; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.news-card:hover { border-color: color-mix(in srgb, var(--blog-brand) 38%, var(--blog-border)); box-shadow: 0 24px 60px rgba(22, 40, 76, .16); transform: translateY(-4px); }
.news-card--featured { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); min-height: 420px; }
.news-card-media { position: relative; display: block; min-height: 220px; overflow: hidden; background: linear-gradient(135deg, #0b315b, #13789e); }
.news-card--featured .news-card-media { min-height: 100%; }
.news-cover { display: block; width: 100%; height: 225px; object-fit: cover; transition: transform .5s cubic-bezier(.2,.65,.3,1); }
.news-card:hover .news-cover { transform: scale(1.035); }
.news-card--featured .news-cover { height: 100%; min-height: 420px; }
.news-cover-placeholder { display: grid; width: 100%; height: 100%; min-height: inherit; place-content: center; color: rgba(255,255,255,.95); text-align: center; }
.news-cover-placeholder::before { position: absolute; inset: 18%; content: ""; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.035); }
.news-cover-placeholder strong { position: relative; font-size: 3.25rem; letter-spacing: -.08em; }
.news-cover-placeholder small { position: relative; margin-top: -.35rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.news-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.45rem; }
.news-card--featured .news-card-body { justify-content: center; padding: clamp(1.5rem, 2.4vw, 2.2rem); }
.news-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.category-badge { display: inline-flex; padding: .3rem .62rem; color: var(--blog-brand); background: color-mix(in srgb, var(--blog-brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blog-brand) 24%, transparent); border-radius: 999px; font-size: .69rem; font-weight: 850; letter-spacing: .025em; line-height: 1.2; }
.news-date { flex: 0 0 auto; color: var(--blog-muted); font-size: .76rem; font-weight: 650; }
.news-card h3 { margin: 0 0 .75rem; font-size: clamp(1.22rem, 2vw, 1.48rem); letter-spacing: -.025em; line-height: 1.26; }
.news-card--featured h3 { font-size: clamp(1.65rem, 2.15vw, 2.15rem); line-height: 1.16; text-wrap: balance; }
.news-card h3 a, .read-more, .back-link, .latest-news a { color: inherit; text-decoration: none; }
.news-card h3 a:hover, .latest-news a:hover { color: var(--blog-brand); }
.news-summary { margin: 0 0 1.25rem; color: var(--blog-muted); line-height: 1.62; }
.news-card--featured .news-summary { font-size: 1.02rem; }
.read-more, .back-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: auto; color: var(--blog-brand); font-weight: 800; text-decoration: none; }
.read-more > span:last-child { font-size: 1.25em; transition: transform .18s ease; }
.read-more:hover > span:last-child { transform: translateX(4px); }
.empty-state { grid-column: 1 / -1; padding: clamp(2rem, 5vw, 4rem); text-align: center; }
.empty-state-icon { display: grid; width: 64px; height: 64px; margin: 0 auto 1.25rem; place-content: center; color: #fff; background: linear-gradient(135deg, #2457e6, #0d83b9); border-radius: 18px; box-shadow: 0 12px 28px rgba(36,87,230,.25); font-weight: 900; }
.empty-state h2 { margin: 0 0 .6rem; }
.empty-state p { max-width: 560px; margin: 0 auto 1.25rem; color: var(--blog-muted); }
.empty-state .read-more { justify-content: center; }

.latest-news { position: sticky; top: 110px; padding: 1.5rem; }
.latest-news-header { margin-bottom: 1.15rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--blog-border); }
.latest-news ol { margin: 0; padding: 0; list-style: none; }
.latest-news li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; padding: 1rem 0; border-top: 1px solid var(--blog-border); }
.latest-news li:first-child { padding-top: 0; border-top: 0; }
.latest-number { color: color-mix(in srgb, var(--blog-muted) 55%, transparent); font-size: .78rem; font-weight: 850; letter-spacing: .04em; }
.latest-category { display: block; margin-bottom: .25rem; color: var(--blog-brand); font-size: .65rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.latest-news a { display: block; font-size: .92rem; font-weight: 750; line-height: 1.35; transition: color .18s ease; }
.latest-news time { display: block; margin-top: .35rem; color: var(--blog-muted); font-size: .74rem; }
.latest-all-link { margin-top: .7rem; padding-top: 1.1rem; color: var(--blog-brand) !important; border-top: 1px solid var(--blog-border); font-size: .82rem !important; font-weight: 850 !important; text-transform: uppercase; letter-spacing: .06em; }
.latest-all-link span { margin-left: .35rem; }

.article-container { width: min(100% - 2rem, 1080px); max-width: 1080px; margin: 0 auto; }
.article-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 1.25rem; }
.edit-article-link { padding: .55rem .85rem; color: var(--blog-brand); border: 1px solid var(--blog-brand); border-radius: 9px; font-weight: 750; text-decoration: none; }
.edit-article-link:hover { color: #fff; background: var(--blog-brand); }
.article-card { margin-top: 0; padding: clamp(1.75rem, 4vw, 3.75rem); overflow: visible; }
.article-header { max-width: 830px; margin: 0 auto; padding-bottom: 2rem; border-bottom: 1px solid var(--blog-border); }
.article-card h1 { margin: .55rem 0 1rem; font-size: clamp(2.15rem, 4.2vw, 3.35rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.article-summary { max-width: 760px; margin: 0; color: var(--blog-muted); font-size: clamp(1.08rem, 2vw, 1.25rem); line-height: 1.55; }
.cover-image { display: block; width: min(100%, 900px); max-height: 540px; margin: 2rem auto 0; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.article-content { max-width: 790px; margin: 2.25rem auto 0; font-size: 1.08rem; line-height: 1.78; overflow-wrap: anywhere; }
.article-content > :first-child { margin-top: 0; }
.article-content h2, .article-content h3, .article-content h4 { margin: 1.8em 0 .55em; line-height: 1.25; }
.article-content p, .article-content ul, .article-content ol, .article-content blockquote { margin: 0 0 1.15em; }
.article-content blockquote { padding: .75rem 1.25rem; color: var(--blog-muted); border-left: 4px solid var(--blog-brand); background: var(--blog-surface-soft); }
.article-content a, .article-source a { color: var(--blog-brand); }
.article-content table { display: block; width: 100%; margin: 1.5rem 0; overflow-x: auto; border-collapse: collapse; }
.article-content th, .article-content td { padding: .75rem; border: 1px solid var(--blog-border); text-align: left; }
.article-content th { background: var(--blog-surface-soft); }
.article-content img { max-width: 100%; height: auto; border-radius: 10px; }

.article-source, .sales-cta { max-width: 820px; margin: 2rem auto 0; padding: 1.15rem 1.35rem; color: var(--blog-muted); background: var(--blog-surface-soft); border: 1px solid var(--blog-border); border-left: 4px solid var(--blog-brand); border-radius: 12px; }
.sales-cta { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; color: var(--blog-text); background: linear-gradient(135deg, color-mix(in srgb, var(--blog-brand) 14%, var(--blog-surface)), var(--blog-surface-soft)); }
.sales-cta p { margin: .25rem 0 0; color: var(--blog-muted); }
.sales-cta a { flex: 0 0 auto; padding: .75rem 1.1rem; color: #fff !important; background: var(--blog-brand); border-radius: 9px; box-shadow: 0 8px 18px color-mix(in srgb, var(--blog-brand) 30%, transparent); font-weight: 800; text-decoration: none; }
.article-video { max-width: 820px; margin: 2.75rem auto 0; }
.article-video h2 { margin-bottom: 1rem; font-size: 1.45rem; }
.video-frame { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 14px; background: #000; }
.video-frame iframe, .article-content iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.video-frame iframe { position: absolute; inset: 0; height: 100%; }
.video-fallback { margin: .75rem 0 0; color: var(--blog-muted); font-size: .92rem; }
.video-fallback a { color: var(--blog-brand); font-weight: 750; }
.test-banner { margin: 0 0 1rem; padding: .9rem 1.1rem; color: #78350f !important; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 12px; box-shadow: 0 8px 22px rgba(120,53,15,.10); font-weight: 800; }

html[data-bs-theme="dark"] .blog-list-page {
    --blog-surface: #13192f;
    --blog-surface-elevated: #18203b;
    --blog-surface-soft: #1d2541;
    --blog-text: #f5f8ff;
    --blog-muted: #b8c3d8;
    --blog-border: #303a5d;
    --blog-brand: #62adff;
    --blog-shadow: 0 20px 54px rgba(0, 0, 0, .26);
}
html[data-bs-theme="dark"] .blog-list-page .news-card,
html[data-bs-theme="dark"] .blog-list-page .latest-news,
html[data-bs-theme="dark"] .blog-list-page .empty-state { background: linear-gradient(155deg, #151c34, #11172d); }
html[data-bs-theme="dark"] .blog-list-page .news-card:hover { border-color: #496397; box-shadow: 0 26px 66px rgba(0,0,0,.38); }
html[data-bs-theme="dark"] .blog-list-page .category-badge { color: #8bc5ff; background: rgba(73,156,255,.10); border-color: rgba(111,184,255,.28); }
html[data-bs-theme="dark"] .blog-list-page .news-card h3 a { color: #f7f9ff; }
html[data-bs-theme="dark"] .blog-list-page .news-summary,
html[data-bs-theme="dark"] .blog-list-page .news-date,
html[data-bs-theme="dark"] .blog-list-page .latest-news time,
html[data-bs-theme="dark"] .blog-list-page .empty-state p { color: #bac5d9 !important; }
html[data-bs-theme="dark"] .blog-page .test-banner { color: #fde68a !important; background: #3b2f13 !important; border-color: #d97706 !important; }
html[data-bs-theme="dark"] .blog-page .article-card { background: #151932 !important; border-color: #364066 !important; box-shadow: 0 20px 50px rgba(0,0,0,.32); }
html[data-bs-theme="dark"] .blog-page .article-header { border-color: #364066; }
html[data-bs-theme="dark"] .blog-page .article-summary { color: #c7d2e6 !important; }
html[data-bs-theme="dark"] .blog-page .sales-cta { color: #f8fafc !important; background: linear-gradient(135deg, #172554, #1e2442) !important; border-color: #405486 !important; }
html[data-bs-theme="dark"] .blog-page .sales-cta :is(strong, p) { color: #e2e8f0 !important; }
html[data-bs-theme="dark"] .blog-page .sales-cta a { color: #07111f !important; background: #60a5fa !important; }
html[data-bs-theme="dark"] .blog-page .article-source { background: #1e2442 !important; border-color: #405486 !important; }
html[data-bs-theme="dark"] .blog-page .video-fallback { color: #c7d2e6 !important; }
html[data-bs-theme="dark"] .blog-page .video-fallback a { color: #7dc0ff !important; }

@media (max-width: 1100px) {
    .blog-layout { grid-template-columns: 1fr; }
    .latest-news { position: static; }
    .latest-news ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
    .latest-news li:nth-child(2) { padding-top: 0; border-top: 0; }
}

@media (max-width: 780px) {
    .blog-page { padding-top: 1rem; }
    .blog-list-page .blog-hero { margin-inline: 0; padding: 2rem 1.35rem; border-radius: 21px; }
    .blog-list-page .blog-hero::after { top: -20%; right: -35%; width: 95vw; }
    .category-filter { flex-wrap: nowrap; margin-right: -1.35rem; padding-right: 1.35rem; overflow-x: auto; scrollbar-width: none; }
    .category-filter::-webkit-scrollbar { display: none; }
    .category-filter a { flex: 0 0 auto; }
    .section-heading { align-items: start; }
    .news-grid { grid-template-columns: 1fr; }
    .news-card--featured { display: flex; grid-column: auto; min-height: 0; }
    .news-card--featured .news-card-media { min-height: 0; }
    .news-card--featured .news-cover { height: clamp(225px, 58vw, 360px); min-height: 0; }
    .news-card--featured .news-card-body { padding: 1.5rem; }
    .news-card--featured h3 { font-size: clamp(1.55rem, 6vw, 2.1rem); }
    .latest-news ol { grid-template-columns: 1fr; }
    .latest-news li:nth-child(2) { padding-top: 1rem; border-top: 1px solid var(--blog-border); }
    .article-container { width: min(100% - 1rem, 1080px); }
    .article-actions { align-items: stretch; flex-direction: column; }
    .edit-article-link { text-align: center; }
    .article-card { padding: 1.4rem; }
    .sales-cta { align-items: stretch; flex-direction: column; }
    .sales-cta a { text-align: center; }
}

@media (max-width: 430px) {
    .blog-list-page .blog-hero h1 { font-size: 2.05rem; line-height: 1.04; }
    .blog-hero-lead { font-size: .96rem; }
    .news-meta { align-items: flex-start; flex-direction: column; gap: .55rem; }
    .news-card-body { padding: 1.2rem; }
    .news-cover { height: 205px; }
    .latest-news { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-list-page *, .blog-list-page *::before, .blog-list-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}