/* ════════════════════════════════════════════════════════
           CSS VARIABLES
        ════════════════════════════════════════════════════════ */
        :root {
            --primary    : #e53935;
            --primary-dk : #b71c1c;
            --dark       : #1f2937;
            --dark-2     : #374151;
            --light      : #f9fafb;
            --white      : #ffffff;
            --accent     : #2563eb;
            --border     : #e5e7eb;
            --muted      : #6b7280;
            --font-head  : 'Poppins', sans-serif;
            --font-body  : 'Inter', sans-serif;
            --radius     : 12px;
            --radius-sm  : 8px;
            --shadow-sm  : 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
            --shadow-md  : 0 4px 16px rgba(0,0,0,.10);
            --shadow-lg  : 0 12px 40px rgba(0,0,0,.15);
            --transition : .25s ease;
        }

        /* ════════════════════════════════════════════════════════
           BASE
        ════════════════════════════════════════════════════════ */
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; font-size: 16px; }
        body {
            font-family  : var(--font-body);
            background   : var(--light);
            color        : var(--dark);
            line-height  : 1.65;
            -webkit-font-smoothing: antialiased;
        }
        h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.3; }
        a { color: inherit; text-decoration: none; transition: color var(--transition); }
        img { display: block; max-width: 100%; }
        .section-gap { padding: 72px 0; }
        .section-gap-sm { padding: 48px 0; }

        /* ════════════════════════════════════════════════════════
           NAVBAR
        ════════════════════════════════════════════════════════ */
        .ib-navbar {
            background  : var(--white);
            border-bottom: 1px solid var(--border);
            padding     : 0;
            position    : sticky;
            top         : 0;
            z-index     : 1040;
            box-shadow  : var(--shadow-sm);
        }
        .ib-navbar .navbar-brand img {
            height    : 40px;
            width     : auto;
        }
        .ib-navbar .nav-link {
            font-family : var(--font-head);
            font-size   : .875rem;
            font-weight : 500;
            color       : var(--dark-2);
            padding     : 1.1rem .75rem !important;
            position    : relative;
        }
        .ib-navbar .nav-link::after {
            content    : '';
            position   : absolute;
            bottom     : 0; left: .75rem; right: .75rem;
            height     : 2px;
            background : var(--primary);
            transform  : scaleX(0);
            transition : transform var(--transition);
        }
        .ib-navbar .nav-link:hover,
        .ib-navbar .nav-link.active { color: var(--primary); }
        .ib-navbar .nav-link:hover::after,
        .ib-navbar .nav-link.active::after { transform: scaleX(1); }
        .ib-navbar .btn-cta {
            background  : var(--primary);
            color       : var(--white) !important;
            font-family : var(--font-head);
            font-size   : .8125rem;
            font-weight : 600;
            padding     : .5rem 1.25rem !important;
            border-radius: 6px;
            letter-spacing: .02em;
            transition  : background var(--transition), transform var(--transition);
        }
        .ib-navbar .btn-cta:hover { background: var(--primary-dk); transform: translateY(-1px); }
        .ib-navbar .btn-cta::after { display: none; }
        .navbar-toggler { border: none; padding: .5rem; }
        .navbar-toggler:focus { box-shadow: none; }

        /* ════════════════════════════════════════════════════════
           BREADCRUMB
        ════════════════════════════════════════════════════════ */
        .ib-breadcrumb {
            background  : var(--white);
            border-bottom: 1px solid var(--border);
            padding     : .625rem 0;
            font-size   : .8125rem;
        }
        .ib-breadcrumb .breadcrumb { margin: 0; }
        .ib-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
        .ib-breadcrumb a { color: var(--accent); }
        .ib-breadcrumb .breadcrumb-item.active { color: var(--muted); }

        /* ════════════════════════════════════════════════════════
           BLOG HEADER BANNER
        ════════════════════════════════════════════════════════ */
        .blog-hero-banner {
            background  : linear-gradient(135deg, var(--dark) 0%, #111827 60%, #1e1b4b 100%);
            color        : var(--white);
            padding      : 56px 0 48px;
            position     : relative;
            overflow     : hidden;
        }
        .blog-hero-banner::before {
            content    : '';
            position   : absolute;
            inset      : 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");
        }
        .blog-hero-banner .badge-pill {
            background  : rgba(229,57,53,.15);
            border      : 1px solid rgba(229,57,53,.4);
            color       : #fca5a5;
            font-size   : .75rem;
            font-weight : 600;
            padding     : .3rem .875rem;
            border-radius: 100px;
            letter-spacing: .06em;
            text-transform: uppercase;
            display     : inline-flex;
            align-items : center;
            gap         : .4rem;
            margin-bottom: 1rem;
        }
        .blog-hero-banner h1 {
            font-size   : clamp(1.75rem, 4vw, 2.75rem);
            font-weight : 800;
            margin-bottom: .75rem;
        }
        .blog-hero-banner h1 span { color: var(--primary); }
        .blog-hero-banner p {
            font-size   : 1.0625rem;
            color       : #d1d5db;
            max-width   : 580px;
            margin      : 0;
        }
        .blog-hero-stats {
            display     : flex;
            gap         : 2rem;
            margin-top  : 1.75rem;
            flex-wrap   : wrap;
        }
        .blog-hero-stats .stat {
            display     : flex;
            align-items : center;
            gap         : .5rem;
            font-size   : .875rem;
            color       : #9ca3af;
        }
        .blog-hero-stats .stat i { color: var(--primary); }
        .blog-hero-stats .stat strong { color: var(--white); font-family: var(--font-head); }

        /* ════════════════════════════════════════════════════════
           SECTION LABELS
        ════════════════════════════════════════════════════════ */
        .section-label {
            display     : flex;
            align-items : center;
            gap         : .75rem;
            margin-bottom: 2rem;
        }
        .section-label .label-bar {
            width       : 4px;
            height      : 28px;
            background  : var(--primary);
            border-radius: 4px;
            flex-shrink : 0;
        }
        .section-label h2 {
            font-size   : 1.5rem;
            font-weight : 700;
            margin      : 0;
        }
        .section-label span {
            margin-left : auto;
            font-size   : .875rem;
            color       : var(--accent);
            font-weight : 500;
        }
        .section-label span:hover { text-decoration: underline; }

        /* ════════════════════════════════════════════════════════
           FEATURED ARTICLE
        ════════════════════════════════════════════════════════ */
        .featured-card {
            border-radius: var(--radius);
            overflow     : hidden;
            background   : var(--white);
            box-shadow   : var(--shadow-md);
            display      : grid;
            grid-template-columns: 1fr 1fr;
            min-height   : 380px;
            transition   : box-shadow var(--transition), transform var(--transition);
        }
        .featured-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
        .featured-card .fc-image {
            position     : relative;
            overflow     : hidden;
        }
        .featured-card .fc-image img {
            width        : 100%;
            height       : 100%;
            object-fit   : cover;
            transition   : transform .4s ease;
        }
        .featured-card:hover .fc-image img { transform: scale(1.04); }
        .featured-card .fc-image .fc-badge {
            position     : absolute;
            top          : 1rem;
            left         : 1rem;
            background   : var(--primary);
            color        : var(--white);
            font-family  : var(--font-head);
            font-size    : .72rem;
            font-weight  : 600;
            padding      : .25rem .75rem;
            border-radius: 100px;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .featured-card .fc-body {
            padding      : 2.5rem 2rem;
            display      : flex;
            flex-direction: column;
            justify-content: center;
        }
        .featured-card .fc-meta {
            display      : flex;
            align-items  : center;
            gap          : 1rem;
            font-size    : .8125rem;
            color        : var(--muted);
            margin-bottom: 1rem;
        }
        .featured-card .fc-meta .fc-cat {
            background   : #fef2f2;
            color        : var(--primary);
            font-weight  : 600;
            padding      : .2rem .6rem;
            border-radius: 4px;
            font-family  : var(--font-head);
        }
        .featured-card .fc-body h3 {
            font-size    : clamp(1.1rem, 2.5vw, 1.5rem);
            font-weight  : 700;
            margin-bottom: .875rem;
            color        : var(--dark);
            line-height  : 1.35;
        }
        .featured-card .fc-body h3 a:hover { color: var(--primary); }
        .featured-card .fc-body p {
            font-size    : .9375rem;
            color        : var(--muted);
            margin-bottom: 1.5rem;
            display      : -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow     : hidden;
        }
        .fc-link {
            display      : inline-flex;
            align-items  : center;
            gap          : .5rem;
            color        : var(--primary);
            font-family  : var(--font-head);
            font-size    : .875rem;
            font-weight  : 600;
        }
        .fc-link i { transition: transform var(--transition); }
        .fc-link:hover { color: var(--primary-dk); }
        .fc-link:hover i { transform: translateX(4px); }
        @media (max-width: 767px) {
            .featured-card { grid-template-columns: 1fr; min-height: auto; }
            .featured-card .fc-image { height: 220px; }
            .featured-card .fc-body { padding: 1.5rem; }
        }

        /* ════════════════════════════════════════════════════════
           CATEGORY CAROUSEL
        ════════════════════════════════════════════════════════ */
        .categories-section { background: var(--white); }
        .swiper-categories { padding-bottom: 3.5rem !important; }
        .category-card {
            border-radius: var(--radius);
            overflow     : hidden;
            background   : var(--white);
            box-shadow   : var(--shadow-sm);
            border       : 1px solid var(--border);
            transition   : box-shadow var(--transition), transform var(--transition);
            cursor       : pointer;
            display      : block;
        }
        .category-card:hover {
            box-shadow   : var(--shadow-lg);
            transform    : translateY(-4px);
        }
        .category-card .cc-image {
            position     : relative;
            height       : 180px;
            overflow     : hidden;
        }
        .category-card .cc-image picture,
        .category-card .cc-image img {
            width        : 100%;
            height       : 100%;
            object-fit   : cover;
            transition   : transform .4s ease;
        }
        .category-card:hover .cc-image img { transform: scale(1.06); }
        .category-card .cc-overlay {
            position     : absolute;
            inset        : 0;
            background   : linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
        }
        .category-card .cc-icon {
            position     : absolute;
            top          : 1rem;
            right        : 1rem;
            width        : 38px;
            height       : 38px;
            border-radius: 50%;
            background   : rgba(255,255,255,.92);
            display      : flex;
            align-items  : center;
            justify-content: center;
            font-size    : 1rem;
            box-shadow   : var(--shadow-sm);
        }
        .category-card .cc-count {
            position     : absolute;
            bottom       : .75rem;
            left         : 1rem;
            background   : rgba(0,0,0,.5);
            backdrop-filter: blur(4px);
            color        : var(--white);
            font-size    : .75rem;
            font-weight  : 600;
            padding      : .2rem .6rem;
            border-radius: 100px;
            font-family  : var(--font-head);
            display      : flex;
            align-items  : center;
            gap          : .35rem;
        }
        .category-card .cc-body {
            padding      : 1.125rem 1.25rem 1.375rem;
        }
        .category-card .cc-name {
            font-family  : var(--font-head);
            font-size    : 1rem;
            font-weight  : 700;
            color        : var(--dark);
            margin-bottom: .4rem;
        }
        .category-card .cc-desc {
            font-size    : .8125rem;
            color        : var(--muted);
            line-height  : 1.55;
            display      : -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow     : hidden;
            margin-bottom: .875rem;
        }
        .category-card .cc-cta {
            display      : inline-flex;
            align-items  : center;
            gap          : .375rem;
            font-family  : var(--font-head);
            font-size    : .8125rem;
            font-weight  : 600;
            color        : var(--primary);
        }
        .category-card .cc-cta i { font-size: .7rem; transition: transform var(--transition); }
        .category-card:hover .cc-cta i { transform: translateX(3px); }

        /* Swiper controls */
        .swiper-button-prev,
        .swiper-button-next {
            width        : 42px !important;
            height       : 42px !important;
            background   : var(--white);
            border       : 1px solid var(--border);
            border-radius: 50%;
            box-shadow   : var(--shadow-sm);
            color        : var(--dark) !important;
            transition   : all var(--transition);
            top          : calc(50% - 1.75rem) !important;
        }
        .swiper-button-prev:hover,
        .swiper-button-next:hover {
            background   : var(--primary);
            border-color : var(--primary);
            color        : var(--white) !important;
        }
        .swiper-button-prev::after,
        .swiper-button-next::after { font-size: .8rem !important; font-weight: 700; }
        .swiper-pagination-bullet {
            background   : var(--border) !important;
            opacity      : 1 !important;
            width        : 8px !important;
            height       : 8px !important;
        }
        .swiper-pagination-bullet-active {
            background   : var(--primary) !important;
            width        : 24px !important;
            border-radius: 4px !important;
        }

        /* ════════════════════════════════════════════════════════
           SEARCH BAR
        ════════════════════════════════════════════════════════ */
        .search-section { background: var(--light); }
        .search-wrap {
            background   : var(--white);
            border       : 1px solid var(--border);
            border-radius: var(--radius);
            padding      : 2rem 2.5rem;
            box-shadow   : var(--shadow-sm);
            max-width    : 680px;
            margin       : 0 auto;
        }
        .search-wrap h2 {
            font-size    : 1.25rem;
            font-weight  : 700;
            text-align   : center;
            margin-bottom: 1.25rem;
            color        : var(--dark);
        }
        .search-wrap h2 i { color: var(--primary); margin-right: .4rem; }
        .search-input-group {
            display      : flex;
            gap          : 0;
            border-radius: var(--radius-sm);
            overflow     : hidden;
            border       : 1.5px solid var(--border);
            transition   : border-color var(--transition), box-shadow var(--transition);
        }
        .search-input-group:focus-within {
            border-color : var(--primary);
            box-shadow   : 0 0 0 3px rgba(229,57,53,.1);
        }
        .search-input-group input {
            flex         : 1;
            border       : none;
            padding      : .875rem 1.25rem;
            font-family  : var(--font-body);
            font-size    : .9375rem;
            color        : var(--dark);
            background   : transparent;
            outline      : none;
        }
        .search-input-group input::placeholder { color: #9ca3af; }
        .search-input-group button {
            background   : var(--primary);
            border       : none;
            padding      : .875rem 1.5rem;
            color        : var(--white);
            font-family  : var(--font-head);
            font-size    : .9rem;
            font-weight  : 600;
            cursor       : pointer;
            transition   : background var(--transition);
            display      : flex;
            align-items  : center;
            gap          : .5rem;
        }
        .search-input-group button:hover { background: var(--primary-dk); }
        .search-tags {
            display      : flex;
            flex-wrap    : wrap;
            gap          : .5rem;
            margin-top   : 1rem;
            justify-content: center;
        }
        .search-tag {
            background   : var(--light);
            border       : 1px solid var(--border);
            color        : var(--dark-2);
            font-size    : .78rem;
            font-weight  : 500;
            padding      : .3rem .75rem;
            border-radius: 100px;
            cursor       : pointer;
            transition   : all var(--transition);
        }
        .search-tag:hover {
            background   : var(--primary);
            border-color : var(--primary);
            color        : var(--white);
        }

        /* ════════════════════════════════════════════════════════
           LATEST ARTICLES GRID
        ════════════════════════════════════════════════════════ */
        .article-card {
            background   : var(--white);
            border-radius: var(--radius);
            overflow     : hidden;
            border       : 1px solid var(--border);
            box-shadow   : var(--shadow-sm);
            transition   : box-shadow var(--transition), transform var(--transition);
            display      : flex;
            flex-direction: column;
            height       : 100%;
        }
        .article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
        .article-card .ac-image {
            position     : relative;
            height       : 188px;
            overflow     : hidden;
        }
        .article-card .ac-image img {
            width        : 100%;
            height       : 100%;
            object-fit   : cover;
            transition   : transform .4s ease;
        }
        .article-card:hover .ac-image img { transform: scale(1.05); }
        .article-card .ac-cat {
            position     : absolute;
            top          : .75rem;
            left         : .75rem;
            font-family  : var(--font-head);
            font-size    : .7rem;
            font-weight  : 700;
            padding      : .25rem .65rem;
            border-radius: 100px;
            letter-spacing: .04em;
            text-transform: uppercase;
            background   : var(--primary);
            color        : var(--white);
        }
        .article-card .ac-body {
            padding      : 1.125rem 1.25rem 1.375rem;
            flex         : 1;
            display      : flex;
            flex-direction: column;
        }
        .article-card .ac-meta {
            font-size    : .78rem;
            color        : var(--muted);
            margin-bottom: .625rem;
            display      : flex;
            align-items  : center;
            gap          : .75rem;
        }
        .article-card .ac-meta i { color: var(--border); }
        .article-card h3 {
            font-size    : .9375rem;
            font-weight  : 700;
            color        : var(--dark);
            margin-bottom: .625rem;
            display      : -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow     : hidden;
            line-height  : 1.45;
        }
        .article-card h3 a:hover { color: var(--primary); }
        .article-card p {
            font-size    : .8375rem;
            color        : var(--muted);
            display      : -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow     : hidden;
            margin-bottom: auto;
            padding-bottom: 1rem;
        }
        .ac-read-more {
            display      : inline-flex;
            align-items  : center;
            gap          : .4rem;
            font-family  : var(--font-head);
            font-size    : .8125rem;
            font-weight  : 600;
            color        : var(--primary);
            border-top   : 1px solid var(--border);
            padding-top  : .875rem;
            margin-top   : auto;
        }
        .ac-read-more i { font-size: .65rem; transition: transform var(--transition); }
        .ac-read-more:hover i { transform: translateX(3px); }

        /* Empty state */
        .articles-empty {
            text-align   : center;
            padding      : 4rem 1rem;
            color        : var(--muted);
        }
        .articles-empty i { font-size: 3rem; margin-bottom: 1rem; opacity: .3; }

        /* ════════════════════════════════════════════════════════
           FOOTER
        ════════════════════════════════════════════════════════ */
        .ib-footer {
            background   : var(--dark);
            color        : #9ca3af;
            padding      : 60px 0 0;
        }
        .ib-footer .footer-brand img { height: 36px; width: auto; margin-bottom: .875rem; }
        .ib-footer .footer-desc {
            font-size    : .875rem;
            line-height  : 1.7;
            color        : #6b7280;
            max-width    : 280px;
        }
        .ib-footer .footer-heading {
            font-family  : var(--font-head);
            font-size    : .75rem;
            font-weight  : 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color        : #d1d5db;
            margin-bottom: 1.25rem;
        }
        .ib-footer ul { list-style: none; padding: 0; margin: 0; }
        .ib-footer ul li { margin-bottom: .6rem; }
        .ib-footer ul a {
            font-size    : .875rem;
            color        : #6b7280;
            transition   : color var(--transition);
            display      : flex;
            align-items  : center;
            gap          : .4rem;
        }
        .ib-footer ul a i { font-size: .65rem; color: var(--primary); }
        .ib-footer ul a:hover { color: var(--white); }
        .footer-divider {
            border-color : #374151;
            margin       : 2.5rem 0 0;
        }
        .footer-bottom {
            padding      : 1.25rem 0;
            display      : flex;
            align-items  : center;
            justify-content: space-between;
            flex-wrap    : wrap;
            gap          : .75rem;
            font-size    : .8125rem;
            color        : #6b7280;
        }
        .footer-bottom a { color: #6b7280; }
        .footer-bottom a:hover { color: var(--white); }
        .footer-bottom .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
        .social-icons { display: flex; gap: .625rem; margin-top: 1.25rem; }
        .social-icon {
            width        : 36px;
            height       : 36px;
            border-radius: 50%;
            background   : #374151;
            display      : flex;
            align-items  : center;
            justify-content: center;
            font-size    : .875rem;
            color        : #9ca3af;
            transition   : all var(--transition);
        }
        .social-icon:hover { background: var(--primary); color: var(--white); }

        /* ════════════════════════════════════════════════════════
           BACK TO TOP
        ════════════════════════════════════════════════════════ */
        #backToTop {
            position     : fixed;
            bottom       : 1.5rem;
            right        : 1.5rem;
            width        : 44px;
            height       : 44px;
            background   : var(--primary);
            color        : var(--white);
            border       : none;
            border-radius: 50%;
            display      : flex;
            align-items  : center;
            justify-content: center;
            font-size    : 1rem;
            cursor       : pointer;
            z-index      : 999;
            box-shadow   : var(--shadow-md);
            opacity      : 0;
            transform    : translateY(12px);
            transition   : opacity .3s, transform .3s, background .2s;
        }
        #backToTop.visible { opacity: 1; transform: translateY(0); }
        #backToTop:hover { background: var(--primary-dk); }

        /* ════════════════════════════════════════════════════════
           UTILITIES
        ════════════════════════════════════════════════════════ */
        .text-primary-ib { color: var(--primary) !important; }
        .bg-light-ib { background: var(--light) !important; }

        /* Skeleton loader */
        @keyframes shimmer {
            0%   { background-position: -600px 0; }
            100% { background-position: 600px 0; }
        }
        .skeleton {
            background  : linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 600px 100%;
            animation   : shimmer 1.4s infinite linear;
            border-radius: 4px;
        }

        /* ════════════════════════════════════════════════════════
           RESPONSIVE TWEAKS
        ════════════════════════════════════════════════════════ */
        @media (max-width: 575px) {
            .section-gap { padding: 48px 0; }
            .blog-hero-banner { padding: 40px 0 36px; }
            .search-wrap { padding: 1.5rem 1.25rem; }
            .blog-hero-stats { gap: 1.25rem; }
        }
        @media (max-width: 991px) {
            .ib-navbar .nav-link::after { display: none; }
        }