/* --- Reset & Base --- */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: #F8F9FB;
            color: #1A1D23;
            line-height: 1.5;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
        }

        :focus-visible {
            outline: 3px solid #4F46E5;
            outline-offset: 4px;
            border-radius: 4px;
        }

        /* --- Layout System --- */
        .container {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding-left: 32px;
            padding-right: 32px;
        }

        @media (max-width: 768px) {
            .container {
                padding-left: 24px;
                padding-right: 24px;
            }
        }

        @media (max-width: 425px) {
            .container {
                padding-left: 16px;
                padding-right: 16px;
            }
        }

        section {
            padding: 64px 0;
        }

        @media (max-width: 768px) {
            section {
                padding: 48px 0;
            }
        }

        /* --- Hero Section --- */
        .hero {
            text-align: center;
            padding-top: 30px;
        }
        .hero h1 {
            font-size:clamp(1.75rem, 5vw, 2.5rem);
            font-weight: 800;
            letter-spacing: -0.04em;
            margin-bottom: 12px;
            color: #111111;
        }

        .hero p {
            font-size: clamp(18px, 2vw, 22px);
            color: #5F6368;
            margin: 0 auto 12px;
            line-height: 1.6;
        }

        /* --- Featured Article --- */
        .featured-card {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            background: #FFFFFF;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            transition: transform 250ms ease, box-shadow 250ms ease;
            border: 1px solid #F0F0F0;
            height: 520px;
            text-decoration: none;
        }

        .featured-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 30px 80px rgba(0,0,0,0.12);
        }

        .featured-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        .featured-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 400ms ease;
        }

        .featured-card:hover .featured-image-wrapper img {
            transform: scale(1.05);
        }

        .featured-content {
            padding: 64px 48px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .featured-badge {
            display: inline-block;
            padding: 8px 16px;
            background: #EEF2FF;
            color: #4F46E5;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 24px;
            align-self: flex-start;
        }

        .featured-title {
            font-size: clamp(16px, 1.2vw, 18px);
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: -0.01em;
            color: #111111;
            margin-bottom: 24px;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 16px 32px;
            background: #111111;
            color: #FFFFFF;
            border-radius: 12px;
            font-weight: 600;
            font-size: 16px;
            transition: all 200ms ease;
            align-self: flex-start;
        }

        .btn-primary:hover {
            background: #4F46E5;
            transform: translateX(4px);
        }

        /* --- Category Shelf --- */
        .shelf-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 24px;
        }

        .shelf-title {
            font-size: clamp(24px, 3vw, 32px);
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #111111;
        }

        .view-all {
            color: #4F46E5;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: transform 200ms ease;
        }

        .view-all:hover {
            transform: translateX(4px);
        }

        .carousel-wrapper {
            position: relative;
        }

        .carousel {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            scroll-padding-left: 32px;
            padding-bottom: 8px; /* Spacing for drag */
        }

        .carousel::-webkit-scrollbar {
            display: none;
        }

        .carousel.dragging {
            cursor: grabbing;
            user-select: none;
        }


        /* --- Article Card --- */
        .card {
            flex: 0 0 auto;
            width: clamp(260px, 25vw, 340px);
            background: #FFFFFF;
            border-radius: 16px;
            border: 1px solid #E4E7EC;
            overflow: hidden;
            scroll-snap-align: start;
            transition: transform 250ms ease, box-shadow 250ms ease;
            display: flex;
            flex-direction: column;
            text-decoration: none;
        }

        .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }

        .card-img-wrapper {
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            flex-shrink: 0;
        }

        .card-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .card:hover .card-img-wrapper img {
            transform: scale(1.05);
        }

        .card-body {
            padding: 24px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .card-title {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.4;
            color: #111111;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 16px;
        }

        .card-link {
            margin-top: auto;
            color: #4F46E5;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: transform 200ms ease;
        }

        .card:hover .card-link {
            transform: translateX(4px);
        }

        /* --- Carousel Controls --- */
        .controls {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 32px;
        }

        .arrow-btn {
            width: 52px;
            height: 52px;
            border-radius: 999px;
            background: #FFFFFF;
            border: 1px solid #E4E7EC;
            box-shadow: 0 6px 16px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #111111;
            transition: all 250ms ease;
        }

        .arrow-btn:hover:not(:disabled) {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 10px 24px rgba(0,0,0,0.1);
            border-color: #4F46E5;
            color: #4F46E5;
        }

        .arrow-btn:active:not(:disabled) {
            transform: scale(0.98);
        }

        .arrow-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* --- SEO Content Section --- */
        .seo-section {
            background: #FFFFFF;
            border-top: 1px solid #E4E7EC;
        }

        .seo-content{
            max-width:1200px;
            margin:auto;
            text-align:left;
        }
        .seo-content h2 {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 32px;
            color: #111111;
        }

        .seo-content p {
            font-size: 18px;
            line-height: 1.7;
            color: #475467;
            margin-bottom: 24px;
        }
/* =====================================================
   BLOG SKELETON UI PRE-FLIGHT (ZERO CLS SHIMMER)
===================================================== */
.blog-skeleton {
    pointer-events: none;
    position: relative;
    overflow: hidden;
    background: #FFFFFF !important;
}

.blog-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.03),
        transparent
    );
    transform: translateX(-100%);
    animation: blog-shimmer 1.5s infinite linear;
    z-index: 5;
}

@keyframes blog-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #E4E7EC;
}

.skeleton-line {
    background: #E4E7EC;
    border-radius: 6px;
}

.skeleton-line.title {
    width: 90%;
    height: 22px;
    margin-bottom: 12px;
}

.skeleton-line.link {
    width: 35%;
    height: 16px;
    margin-top: auto;
}
        /* --- Responsive --- */
        @media (max-width: 1024px) {
            .featured-card {
                height: auto;
                grid-template-columns: 1fr;
            }
            .featured-image-wrapper {
                aspect-ratio: 16/9;
                height: auto;
            }
            .featured-content {
                padding: 40px;
            }
        }

        @media (max-width: 425px) {
            .featured-content {
                padding: 24px;
            }
            .featured-title {
                font-size: 24px;
            }
            .btn-primary {
                width: 100%;
                justify-content: center;
            }
        }