:root {
        --brand: #0A58CA;
        --brand-dark: #0947A8;
        --brand-light: #E8F0FE;
        --gray-50: #F8F9FC;
        --gray-100: #F1F3F7;
        --gray-200: #E9ECF0;
        --gray-500: #9AA4B2;
        --gray-600: #6C757D;
        --gray-700: #495057;
        --gray-800: #212529;
        --gray-900: #1A1F2C;
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
        --shadow-lg: 0 20px 35px -12px rgba(0,0,0,0.08);
        --radius: 24px;
        --radius-sm: 16px;
        --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Premium Blog Header with Gradient */
    .blog-header {
        background: linear-gradient(145deg, var(--gray-900) 0%, var(--brand-dark) 100%);
        padding: 5rem 0;
        position: relative;
        overflow: hidden;
        isolation: isolate; color: #fff;
    }
    .blog-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
        opacity: 0.2;
        z-index: 0;
    }
    .blog-header .container {
        position: relative;
        z-index: 1;
    }
    .blog-header h1 {
        font-size: 2.8rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
        max-width: 800px;
        margin: 0 auto;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .blog-meta {
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
        font-size: 0.9rem;
        opacity: 0.85;
    }
    .blog-meta svg {
        display: inline-block;
        margin-left: 0.4rem;
        vertical-align: middle;
    }

    /* Folded Corner Content Card (Using corner-shape from article) */
    .blog-content-card {
        --x-coord: 2rem;
        --y-coord: 2rem;
        border-top-right-radius: var(--x-coord) var(--y-coord);
        corner-top-right-shape: bevel;
        overflow: clip;
        position: relative;
        background: white;
        margin-top: -3rem;
        margin-bottom: 3rem;
        box-shadow: var(--shadow-lg);
        transition: var(--transition);
    }
    .blog-content-card::before {
        content: "";
        background: inherit;
        width: var(--x-coord);
        height: var(--y-coord);
        box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 4) rgba(0,0,0,0.1);
        position: absolute;
        inset: 0 0 auto auto;
        corner-bottom-left-shape: bevel;
        border-bottom-left-radius: calc(100% - var(--y-coord)) 100%;
        transition: var(--transition);
    }
    .blog-content-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 25px 40px -12px rgba(0,0,0,0.15);
    }
    .blog-content-inner {
        padding: 2.5rem;
    }

    /* Typography for blog content */
    .blog-content-inner {
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--gray-700);
    }
    .blog-content-inner h2 {
        font-size: 1.8rem;
        font-weight: 700;
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: var(--gray-900);
        padding-right: 0.5rem;
        border-right: 4px solid var(--brand);
    }
    .blog-content-inner h3 {
        font-size: 1.4rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        color: var(--gray-800);
    }
    .blog-content-inner p {
        margin-bottom: 1.25rem;
    }
    .blog-content-inner img {
        max-width: 100%;
        border-radius: 20px;
        margin: 2rem 0;
        box-shadow: var(--shadow-md);
        transition: var(--transition);
    }
    .blog-content-inner img:hover {
        transform: scale(1.01);
        box-shadow: var(--shadow-lg);
    }
    .blog-content-inner blockquote {
        border-right: 4px solid var(--brand);
        background: var(--gray-50);
        padding: 1.25rem 1.5rem;
        margin: 1.5rem 0;
        border-radius: 20px;
        font-style: italic;
        color: var(--gray-600);
        font-size: 1rem;
    }
    .blog-content-inner ul, .blog-content-inner ol {
        padding-right: 1.5rem;
        margin-bottom: 1.25rem;
    }
    .blog-content-inner li {
        margin-bottom: 0.5rem;
    }

    /* Category Badges */
    .category-badge {
        background: var(--brand-light);
        color: var(--brand);
        padding: 0.4rem 1rem;
        border-radius: 40px;
        font-size: 0.75rem;
        font-weight: 500;
        text-decoration: none;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .category-badge:hover {
        background: var(--brand);
        color: white;
        transform: translateY(-2px);
    }

    /* Share Buttons Material Design */
    .share-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 700;
        transition: var(--transition);
        text-decoration: none;
        background: #fff;
        color: var(--gray-700);
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow-sm);
    }
    .share-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    .share-btn.telegram { color: #229ED9; }
    .share-btn.twitter { color: #1DA1F2; }
    .share-btn.linkedin { color: #0077B5; }
    .share-btn.telegram:hover { background: #229ED9; color: white; border-color: #229ED9; }
    .share-btn.twitter:hover { background: #1DA1F2; color: white; border-color: #1DA1F2; }
    .share-btn.linkedin:hover { background: #0077B5; color: white; border-color: #0077B5; }

    /* Related Posts Cards */
    .related-card {
        background: white;
        border-radius: var(--radius-sm);
        overflow: hidden;
        transition: var(--transition);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--gray-200);
        height: 100%;
    }
    .related-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }
    .related-card-img {
        height: 160px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    .related-card:hover .related-card-img {
        transform: scale(1.03);
    }
    .related-card-body {
        padding: 1rem;
    }
    .related-card-title {
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }
    .read-more-link {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--brand);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: var(--transition);
    }
    .read-more-link:hover {
        gap: 8px;
        color: var(--brand-dark);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .blog-header h1 {
            font-size: 1.8rem;
        }
        .blog-meta {
            gap: 1rem;
            font-size: 0.75rem;
        }
        .blog-content-inner {
            padding: 1.5rem;
        }
        .blog-content-inner h2 {
            font-size: 1.4rem;
        }
    }