:root {
         --primary: #d9ecff;
         /* very light blue */
         --accent: #6fb7ff;
         /* light blue */
         --deep: #2b8cff;
         /* deeper blue */
         --card-bg: #ffffff;
         --muted: #6b7280;
         --radius: 14px;
         --gap: 1.25rem;
     }

     * {
         box-sizing: border-box
     }

     body {
         font-family: 'Noto Sans Devanagari', 'Noto Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;         background: linear-gradient(180deg, #f6fbff 0%, #eaf6ff 100%);
         color: #0f172a;
         margin: 0;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }

     /* Header include containers (kept load placeholders) */
     #header, #footer {
         width: 100%
     }

     .main-area {
         max-width: 1200px;
         margin: 110px auto;
         padding: 16px
     }

     .top-controls {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
         margin-bottom: 18px;
     }

     /* Left: Search */
     .search-wrapper {
         flex: 1;
         display: flex;
         align-items: center;
         gap: 8px
     }

     .search-input {
         flex: 1;
         padding: 10px 14px;
         border-radius: 999px;
         border: 1px solid rgba(43, 140, 255, 0.12);
         background: white;
         box-shadow: 0 2px 8px rgba(43, 140, 255, 0.05);
     }

     .search-input:focus {
         outline: none;
         box-shadow: 0 6px 18px rgba(43, 140, 255, 0.14)
     }

     .search-icon {
         color: var(--deep);
         font-size: 1.05rem
     }

     /* Right: Filters */
     .filters {
         display: flex;
         gap: 8px;
         align-items: center
     }

     .filter-select, .filter-btn {
         padding: 8px 12px;
         border-radius: 999px;
         border: 1px solid rgba(43, 140, 255, 0.12);
         background: white
     }

     .filter-select:focus, .filter-btn:focus {
         outline: none;
         box-shadow: 0 6px 18px rgba(43, 140, 255, 0.08)
     }

     /* Blog list container */
     .blog-list {
         display: flex;
         flex-direction: column;
         gap: var(--gap)
     }

     /* Blog card - wide: image left, content right */
     .blog-card {
         display: flex;
         gap: 18px;
         background: var(--card-bg);
         border-radius: var(--radius);
         overflow: hidden;
         align-items: stretch;
         box-shadow: 0 10px 30px rgba(14, 30, 37, 0.06);
         transform: translateY(8px);
         opacity: 0;
         transition: transform .45s cubic-bezier(.2, .9, .3, 1), box-shadow .25s, opacity .4s;
     }

     /* slide-in class toggled by IntersectionObserver */
     .blog-card.revealed {
         transform: none;
         opacity: 1
     }

     .card-media {
         flex: 0 0 38%;
         min-height: 170px;
         max-height: 260px;
         overflow: hidden;
         position: relative;
         background: linear-gradient(90deg, var(--primary), #fff)
     }

     .card-media img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform .5s ease
     }

     .blog-card:hover .card-media img {
         transform: scale(1.05)
     }

     .card-body {
         flex: 1;
         padding: 18px 20px;
         display: flex;
         flex-direction: column;
         gap: 10px
     }

     .card-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         gap: 12px
     }

     .title {
        padding: 5px 1px 1px;
         font-size: 1.5rem;
         font-weight: 700;
         color: #05243b
     }

     .platform-badge {
         background: linear-gradient(90deg, var(--accent), var(--deep));
         color: white;
         padding: 6px 10px;
         border-radius: 999px;
         font-size: 1.3rem;
         font-weight: 600
     }

     .meta {
         display: flex;
         gap: 12px;
         align-items: center;
         color: var(--muted);
         font-size: 1.1rem
     }

     .meta i {
         color: var(--deep)
     }

     .description {
         color: #334155;
         line-height: 1.5;
         margin-top: 6px;
         display: -webkit-box;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
         overflow: hidden
     }

     .tags {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
         margin-top: auto
     }

     .tag {
         background: rgba(43, 140, 255, 0.08);
         color: var(--deep);
         padding: 6px 8px;
         border-radius: 8px;
         font-size: 1rem
     }

     .read-more {
         display: inline-flex;
         gap: 8px;
         align-items: center;
         padding: 8px 12px;
         border-radius: 10px;
         background: transparent;
         border: 1px solid rgba(43, 140, 255, 0.12);
         color: var(--deep);
         text-decoration: none;
         font-weight: 600;
         font-size: 1.2rem !important;
     }

     .read-more:hover {
         background: linear-gradient(190deg, rgb(131, 195, 255), #ffffffb8) !important;
         transform: translateY(-5px);
         box-shadow: #0055ff;
     }

     /* Placeholder for missing images */
     .img-placeholder {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         color: rgba(43, 140, 255, 0.18);
         font-size: 2.2rem
     }

     /* Responsive: stack card vertically */
     @media (max-width:900px) {
         .card-media {
             flex: 0 0 44%
         }
     }

     @media (max-width:720px) {
         .main-area {
             margin: 20px;
             padding: 12px
         }

         .top-controls {
             flex-direction: column;
             align-items: stretch
         }

         .search-wrapper {
             order: 1
         }

         .filters {
             order: 2;
             justify-content: flex-end
         }

         .blog-card {
             flex-direction: column
         }

         .card-media {
             flex: 0 0 auto;
             height: 200px
         }

         .card-body {
             padding: 14px
         }
     }

     /* small screens */
     @media (max-width:420px) {
         .title {
             font-size: 1.05rem
         }

         .card-media {
             height: 160px
         }

         .description {
             -webkit-line-clamp: 3
         }
     }

     /* Decorative animations */
     .blog-card:hover {
         box-shadow: 0 28px 60px rgba(14, 30, 37, 0.09)
     }

     /* utility */
     .muted {
         color: var(--muted)
     }