html {
    scroll-behavior: smooth;
}

body.blog-harmonized {
    background: #020617;
    color: #e2e8f0;
    overflow-x: hidden;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
}

body.blog-harmonized .site-3d-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

body.blog-harmonized .site-ambient-veil {
    position: fixed;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 18% 18%, rgba(14, 165, 233, 0.16), transparent 34%),
        radial-gradient(circle at 78% 34%, rgba(20, 184, 166, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.58) 0%, rgba(2, 6, 23, 0.28) 36%, rgba(2, 6, 23, 0.76) 100%),
        linear-gradient(90deg, rgba(2, 6, 23, 0.86) 0%, rgba(2, 6, 23, 0.36) 47%, rgba(2, 6, 23, 0.72) 100%);
    pointer-events: none;
}

body.blog-harmonized > nav,
body.blog-harmonized > header,
body.blog-harmonized > section,
body.blog-harmonized > article,
body.blog-harmonized > footer,
body.blog-harmonized > div:not(.site-ambient-veil) {
    position: relative;
    z-index: 2;
}

body.blog-harmonized > header,
body.blog-harmonized > section,
body.blog-harmonized > footer {
    background: transparent !important;
}

body.blog-harmonized > footer {
    border-top-color: transparent !important;
}

body.blog-harmonized header > .absolute.inset-0 {
    background:
        radial-gradient(circle at 24% 15%, rgba(56, 189, 248, 0.24), transparent 34%),
        radial-gradient(circle at 76% 38%, rgba(45, 212, 191, 0.18), transparent 36%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.88), rgba(8, 47, 73, 0.42), rgba(2, 6, 23, 0.82)) !important;
}

body.blog-harmonized .glass {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
    border-color: rgba(125, 211, 252, 0.14);
}

body.blog-harmonized .glass-strong {
    background: rgba(15, 23, 42, 0.76);
    backdrop-filter: blur(20px);
    border-color: rgba(125, 211, 252, 0.12);
}

body.blog-harmonized .glass-card {
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(16px);
    border-color: rgba(125, 211, 252, 0.14);
}

body.blog-harmonized .glass-card:hover {
    border-color: rgba(45, 212, 191, 0.48) !important;
    box-shadow: 0 20px 44px rgba(14, 165, 233, 0.18);
}

body.blog-harmonized #navbar,
body.blog-harmonized #navbar.nav-hidden {
    transform: translateY(0) !important;
}

body.blog-harmonized .text-gradient {
    background: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 52%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.blog-harmonized .btn-primary,
body.blog-harmonized a.inline-flex[class*="bg-gradient"],
body.blog-harmonized button.bg-sky-600,
body.blog-harmonized .filter-btn.active {
    background: linear-gradient(135deg, #0ea5e9, #14b8a6) !important;
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.22);
}

body.blog-harmonized header a:not(.btn-primary),
body.blog-harmonized article a:not(.inline-flex):hover,
body.blog-harmonized .prose a {
    color: #38bdf8 !important;
}

body.blog-harmonized header .rounded-full {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #bae6fd !important;
}

body.blog-harmonized article.glass-card .absolute.top-4 span {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.86), rgba(20, 184, 166, 0.82)) !important;
    color: #fff !important;
}

body.blog-harmonized article.glass-card a.flex,
body.blog-harmonized article.glass-card:hover h3,
body.blog-harmonized article.glass-card:hover h3 a {
    color: #38bdf8 !important;
}

body.blog-harmonized .highlight-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(20, 184, 166, 0.07)) !important;
    border-left-color: #0ea5e9 !important;
}

body.blog-harmonized .prose li::marker {
    color: #22d3ee !important;
}

body.blog-harmonized a.glass-card span,
body.blog-harmonized a.glass-card:hover h4 {
    color: #38bdf8 !important;
}

body.blog-harmonized #articles-grid {
    scroll-snap-type: none !important;
    max-height: none !important;
    overflow-y: visible !important;
}

body.blog-harmonized .snap-header,
body.blog-harmonized .snap-content,
body.blog-harmonized .snap-start {
    scroll-snap-align: start;
}