/* TaxGyani - Blogs */


        /* ─── TOKENS ─── */
        :root {
            --navy: #0B1F3A;
            --navy-mid: #152d50;
            --teal: #00A896;
            --teal-d: #008a7c;
            --teal-lt: #e6f7f5;
            --gold: #F4A32A;
            --gold-lt: #FFF8EC;
            --orange: #E05C2D;
            --red: #D93025;
            --bg: #F4F7FB;
            --white: #ffffff;
            --text: #1A2A3A;
            --muted: #6B7F93;
            --border: #DDE5EF;
            --shadow: 0 4px 28px rgba(11,31,58,.09);
            --shadow-hover: 0 12px 40px rgba(11,31,58,.15);
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* ─── TOPBAR ─── */
        .topbar {
            background: var(--navy);
            color: #90b4d4;
            font-size: .76rem;
            font-weight: 500;
            padding: .42rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            letter-spacing: .02em;
        }

        .topbar-left {
            display: flex;
            gap: 1.5rem;
        }

            .topbar-left span {
                display: flex;
                align-items: center;
                gap: .35rem;
            }

        .topbar .hi {
            color: var(--gold);
            font-weight: 600;
        }

        .topbar-right a {
            color: #90b4d4;
            text-decoration: none;
            font-size: .75rem;
            margin-left: 1.2rem;
            transition: color .2s;
        }

            .topbar-right a:hover {
                color: var(--teal);
            }

        /* ─── NAV ─── */
        nav {
            background: var(--white);
            border-bottom: 2px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 200;
            box-shadow: 0 2px 16px rgba(0,0,0,.06);
        }

        .nav-inner {
            max-width: 1260px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .75rem 1.5rem;
            gap: 1rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: .6rem;
            text-decoration: none;
        }

        .logo-mark {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--teal) 0%, #007a6e 100%);
            border-radius: 10px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(0,168,150,.3);
        }

            .logo-mark svg {
                width: 22px;
                height: 22px;
                fill: white;
            }

        .logo-text-wrap .brand {
            font-family: 'Playfair Display', serif;
            font-size: 1.35rem;
            color: var(--navy);
            line-height: 1;
        }

            .logo-text-wrap .brand span {
                color: var(--teal);
            }

        .logo-text-wrap .sub {
            font-size: .6rem;
            color: var(--muted);
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: .2rem;
        }

            .nav-menu > li {
                position: relative;
            }

                .nav-menu > li > a {
                    display: flex;
                    align-items: center;
                    gap: .25rem;
                    text-decoration: none;
                    color: var(--text);
                    font-size: .86rem;
                    font-weight: 500;
                    padding: .5rem .75rem;
                    border-radius: 6px;
                    transition: color .2s, background .2s;
                }

                    .nav-menu > li > a:hover,
                    .nav-menu > li > a.active {
                        color: var(--teal);
                        background: var(--teal-lt);
                    }

                    .nav-menu > li > a .chev {
                        font-size: .6rem;
                        opacity: .6;
                    }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: .7rem;
        }

        .nav-search {
            display: flex;
            align-items: center;
            gap: .4rem;
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: 8px;
            padding: .4rem .75rem;
            font-size: .85rem;
            color: var(--muted);
            cursor: pointer;
            transition: border-color .2s;
        }

            .nav-search:hover {
                border-color: var(--teal);
            }

            .nav-search input {
                background: none;
                border: none;
                outline: none;
                font-size: .85rem;
                color: var(--text);
                width: 130px;
                font-family: inherit;
            }

            .nav-search svg {
                width: 15px;
                fill: var(--muted);
                flex-shrink: 0;
            }

        .nav-cta {
            background: var(--teal);
            color: white;
            padding: .52rem 1.2rem;
            border-radius: 8px;
            font-size: .86rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: background .2s, transform .15s, box-shadow .2s;
            box-shadow: 0 2px 10px rgba(0,168,150,.3);
        }

            .nav-cta:hover {
                background: var(--teal-d);
                transform: translateY(-1px);
                box-shadow: 0 4px 16px rgba(0,168,150,.4);
            }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
        }

            .hamburger span {
                width: 22px;
                height: 2px;
                background: var(--navy);
                border-radius: 2px;
                transition: .3s;
            }

        /* ─── BREADCRUMB ─── */
        .breadcrumb {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            padding: .55rem 1.5rem;
            font-size: .78rem;
            color: var(--muted);
        }

        .breadcrumb-inner {
            max-width: 1260px;
            margin: auto;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        .breadcrumb a {
            color: var(--teal);
            text-decoration: none;
        }

            .breadcrumb a:hover {
                text-decoration: underline;
            }

        .breadcrumb-sep {
            color: var(--border);
        }

        /* ─── BLOG HERO ─── */
        .blog-hero {
            background: var(--navy);
            padding: 3.5rem 1.5rem 0;
            position: relative;
            overflow: hidden;
        }

            .blog-hero::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse 70% 100% at 100% 50%, rgba(0,168,150,.15) 0%, transparent 60%), radial-gradient(ellipse 50% 80% at 0% 80%, rgba(244,163,42,.08) 0%, transparent 55%);
                pointer-events: none;
            }
            /* decorative grid lines */
            .blog-hero::after {
                content: '';
                position: absolute;
                inset: 0;
                background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
                background-size: 60px 60px;
                pointer-events: none;
            }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 1260px;
            margin: auto;
            text-align: center;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(0,168,150,.15);
            border: 1px solid rgba(0,168,150,.35);
            color: #6de4da;
            border-radius: 100px;
            padding: .3rem .9rem;
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: 1.2rem;
            animation: fadeUp .5s ease both;
        }

        .hero-content h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2rem, 5vw, 3.2rem);
            color: white;
            line-height: 1.2;
            margin-bottom: 1rem;
            animation: fadeUp .5s .08s ease both;
        }

            .hero-content h1 em {
                color: var(--gold);
                font-style: normal;
            }

        .hero-desc {
            color: #90b4d4;
            font-size: 1rem;
            max-width: 580px;
            margin: 0 auto 2rem;
            animation: fadeUp .5s .16s ease both;
        }
        /* stats row */
        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            flex-wrap: wrap;
            border-top: 1px solid rgba(255,255,255,.08);
            padding: 1.5rem 0 0;
            animation: fadeUp .5s .24s ease both;
        }

        .hero-stat {
            text-align: center;
        }

        .hero-stat-val {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            color: var(--gold);
            font-weight: 700;
            line-height: 1;
        }

        .hero-stat-label {
            font-size: .75rem;
            color: #7ea8c8;
            margin-top: .3rem;
        }

        /* ─── CATEGORY TABS ─── */
        .cat-strip {
            background: var(--white);
            border-bottom: 2px solid var(--border);
            position: sticky;
            top: 62px;
            z-index: 100;
            box-shadow: 0 2px 12px rgba(0,0,0,.04);
        }

        .cat-inner {
            max-width: 1260px;
            margin: auto;
            display: flex;
            align-items: center;
            padding: 0 1.5rem;
            gap: 0;
            overflow-x: auto;
            scrollbar-width: none;
        }

            .cat-inner::-webkit-scrollbar {
                display: none;
            }

        .cat-tab {
            display: flex;
            align-items: center;
            gap: .4rem;
            padding: .9rem 1.1rem;
            font-size: .83rem;
            font-weight: 500;
            color: var(--muted);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            cursor: pointer;
            transition: color .2s, border-color .2s;
            border: none;
            background: none;
            font-family: inherit;
        }

            .cat-tab:hover {
                color: var(--navy);
            }

            .cat-tab.active {
                color: var(--teal);
                border-bottom: 3px solid var(--teal);
                font-weight: 600;
            }

            .cat-tab .dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                flex-shrink: 0;
            }

            .cat-tab .count {
                background: var(--bg);
                color: var(--muted);
                font-size: .68rem;
                font-weight: 600;
                border-radius: 100px;
                padding: .1rem .45rem;
            }

            .cat-tab.active .count {
                background: var(--teal-lt);
                color: var(--teal);
            }

        /* ─── MAIN GRID ─── */
        .main-wrap {
            max-width: 1260px;
            margin: 2.5rem auto;
            padding: 0 1.5rem;
            display: grid;
            grid-template-columns: 1fr 310px;
            gap: 2.5rem;
            align-items: start;
        }

        /* ─── FEATURED POST ─── */
        .featured-label {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .75rem;
            font-weight: 700;
            color: var(--teal);
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 1rem;
        }

            .featured-label::before {
                content: '';
                display: block;
                width: 28px;
                height: 2px;
                background: var(--teal);
            }

        .featured-card {
            background: var(--white);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            margin-bottom: 2.5rem;
            transition: box-shadow .3s, transform .3s;
        }

            .featured-card:hover {
                box-shadow: var(--shadow-hover);
                transform: translateY(-3px);
            }

        .featured-img {
            background: linear-gradient(135deg, var(--navy) 0%, #1a3d6b 50%, #0f4c75 100%);
            min-height: 320px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            padding: 2rem;
        }

            .featured-img::before {
                content: '';
                position: absolute;
                inset: 0;
                background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' 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='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0L80 12v2L54 40h-2zm4 0L80 16v2L58 40h-2zm4 0L80 20v2L62 40h-2zm4 0L80 24v2L66 40h-2zm4 0L80 28v2L70 40h-2zm4 0L80 32v2L74 40h-2zm4 0L80 36v2L78 40h-2zm4 0L80 40v0H40z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }

        .featured-img-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-60%);
            font-size: 5rem;
            opacity: .15;
        }

        .featured-badge {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            background: var(--gold);
            color: var(--navy);
            border-radius: 100px;
            padding: .3rem .85rem;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .05em;
        }

        .featured-body {
            padding: 2.2rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .featured-cat {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-bottom: .9rem;
        }

        .cat-pill {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            padding: .25rem .7rem;
            border-radius: 100px;
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .03em;
        }

        .cat-business {
            background: #EAF4FF;
            color: #1565C0;
        }

        .cat-tax {
            background: #FFF3CD;
            color: #856404;
        }

        .cat-gst {
            background: #E8F5E9;
            color: #2E7D32;
        }

        .cat-itr {
            background: #FCE4EC;
            color: #C2185B;
        }

        .cat-compliance {
            background: var(--teal-lt);
            color: var(--teal-d);
        }

        .cat-startup {
            background: #EDE7F6;
            color: #512DA8;
        }

        .cat-ipr {
            background: #FBE9E7;
            color: #BF360C;
        }

        .featured-body h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.55rem;
            line-height: 1.3;
            color: var(--navy);
            margin-bottom: .75rem;
        }

            .featured-body h2 a {
                text-decoration: none;
                color: inherit;
                transition: color .2s;
            }

                .featured-body h2 a:hover {
                    color: var(--teal);
                }

        .featured-body p {
            font-size: .91rem;
            color: var(--muted);
            line-height: 1.65;
            margin-bottom: 1.3rem;
        }

        .post-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .post-meta-item {
            display: flex;
            align-items: center;
            gap: .3rem;
            font-size: .78rem;
            color: var(--muted);
        }

            .post-meta-item svg {
                width: 13px;
                fill: var(--muted);
            }

        .read-more {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            color: var(--teal);
            text-decoration: none;
            font-size: .85rem;
            font-weight: 600;
            margin-top: 1.2rem;
            transition: gap .2s;
        }

            .read-more:hover {
                gap: .7rem;
            }

        /* ─── POSTS GRID SECTION ─── */
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.3rem;
            color: var(--navy);
            display: flex;
            align-items: center;
            gap: .6rem;
        }

            .section-title::after {
                content: '';
                flex: 1;
                height: 2px;
                background: var(--border);
                display: block;
                min-width: 40px;
            }

        .view-all {
            display: flex;
            align-items: center;
            gap: .3rem;
            color: var(--teal);
            text-decoration: none;
            font-size: .83rem;
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
        }

            .view-all:hover {
                text-decoration: underline;
            }

        /* 3-col card grid */
        .posts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .post-card {
            background: var(--white);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            transition: box-shadow .3s, transform .3s;
            text-decoration: none;
            color: inherit;
        }

            .post-card:hover {
                box-shadow: var(--shadow-hover);
                transform: translateY(-4px);
            }

        .post-card-img {
            height: 160px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

            .post-card-img::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(0,0,0,.2) 0%, transparent 50%);
            }

        .post-card-body {
            padding: 1.3rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .post-card-cat {
            margin-bottom: .65rem;
        }

        .post-card h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            line-height: 1.35;
            color: var(--navy);
            margin-bottom: .55rem;
            flex: 1;
        }

        .post-card-desc {
            font-size: .82rem;
            color: var(--muted);
            line-height: 1.55;
            margin-bottom: .9rem;
        }

        .post-card-foot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: .8rem;
            border-top: 1px solid var(--border);
        }

        .post-card-author {
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        .avatar {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: .7rem;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        .av-teal {
            background: var(--teal);
        }

        .av-navy {
            background: var(--navy);
        }

        .av-gold {
            background: var(--gold);
            color: var(--navy);
        }

        .av-orange {
            background: var(--orange);
        }

        .author-name {
            font-size: .75rem;
            font-weight: 500;
            color: var(--text);
        }

        .post-read-time {
            font-size: .72rem;
            color: var(--muted);
        }

        /* 2-col layout for second row */
        .posts-grid-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        /* ─── LIST STYLE POSTS ─── */
        .list-posts {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            margin-bottom: 2.5rem;
        }

        .list-card {
            background: var(--white);
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
            display: grid;
            grid-template-columns: 120px 1fr;
            transition: box-shadow .3s, transform .2s;
            text-decoration: none;
            color: inherit;
        }

            .list-card:hover {
                box-shadow: var(--shadow-hover);
                transform: translateY(-2px);
            }

        .list-card-img {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            min-height: 110px;
        }

        .list-card-body {
            padding: 1.1rem 1.3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .list-card h3 {
            font-family: 'Playfair Display', serif;
            font-size: .95rem;
            color: var(--navy);
            line-height: 1.35;
            margin-bottom: .4rem;
        }

        .list-card-desc {
            font-size: .8rem;
            color: var(--muted);
            margin-bottom: .6rem;
            line-height: 1.5;
        }

        .list-card-meta {
            display: flex;
            align-items: center;
            gap: .8rem;
            flex-wrap: wrap;
        }

            .list-card-meta span {
                font-size: .73rem;
                color: var(--muted);
            }

        /* ─── PAGINATION ─── */
        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            margin: 2rem 0;
        }

        .page-btn {
            width: 38px;
            height: 38px;
            border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--white);
            display: grid;
            place-items: center;
            font-size: .85rem;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            transition: .2s;
            font-family: inherit;
        }

            .page-btn:hover {
                border-color: var(--teal);
                color: var(--teal);
            }

            .page-btn.active {
                background: var(--teal);
                border-color: var(--teal);
                color: white;
            }

            .page-btn.wide {
                width: auto;
                padding: 0 .9rem;
            }

        /* ─── SIDEBAR ─── */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .side-widget {
            background: var(--white);
            border-radius: 14px;
            padding: 1.4rem;
            box-shadow: var(--shadow);
        }

        .widget-title {
            font-size: .73rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .09em;
            color: var(--teal);
            margin-bottom: 1.1rem;
            padding-bottom: .7rem;
            border-bottom: 2px solid var(--teal-lt);
        }

        /* newsletter */
        .newsletter-widget {
            background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 100%);
            border-radius: 14px;
            padding: 1.6rem;
            color: white;
            box-shadow: var(--shadow);
        }

            .newsletter-widget h3 {
                font-family: 'Playfair Display', serif;
                font-size: 1.15rem;
                margin-bottom: .5rem;
            }

            .newsletter-widget p {
                color: #90b4d4;
                font-size: .83rem;
                margin-bottom: 1.1rem;
                line-height: 1.55;
            }

        .nl-input {
            width: 100%;
            background: rgba(255,255,255,.08);
            border: 1.5px solid rgba(255,255,255,.15);
            border-radius: 8px;
            padding: .6rem .85rem;
            font-family: inherit;
            font-size: .85rem;
            color: white;
            margin-bottom: .7rem;
            outline: none;
            transition: border-color .2s;
        }

            .nl-input::placeholder {
                color: #6a8fad;
            }

            .nl-input:focus {
                border-color: var(--teal);
            }

        .nl-btn {
            width: 100%;
            background: var(--teal);
            color: white;
            border: none;
            padding: .65rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: .88rem;
            cursor: pointer;
            font-family: inherit;
            transition: background .2s;
        }

            .nl-btn:hover {
                background: var(--teal-d);
            }

        .nl-note {
            color: #6a8fad;
            font-size: .7rem;
            margin-top: .6rem;
            text-align: center;
        }

        /* popular posts */
        .popular-item {
            display: flex;
            gap: .85rem;
            padding: .8rem 0;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            color: inherit;
            transition: .2s;
        }

            .popular-item:last-child {
                border: none;
                padding-bottom: 0;
            }

            .popular-item:hover .popular-title {
                color: var(--teal);
            }

        .popular-num {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--border);
            line-height: 1;
            flex-shrink: 0;
            width: 24px;
        }

        .popular-title {
            font-size: .85rem;
            font-weight: 500;
            color: var(--navy);
            line-height: 1.35;
            margin-bottom: .25rem;
            transition: color .2s;
        }

        .popular-meta {
            font-size: .73rem;
            color: var(--muted);
        }

        /* tag cloud */
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            background: var(--bg);
            border: 1.5px solid var(--border);
            color: var(--muted);
            border-radius: 100px;
            padding: .3rem .8rem;
            font-size: .76rem;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            transition: .2s;
        }

            .tag:hover {
                background: var(--teal-lt);
                border-color: var(--teal);
                color: var(--teal);
            }

        /* categories list */
        .cat-list {
            display: flex;
            flex-direction: column;
        }

        .cat-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .6rem 0;
            border-bottom: 1px solid var(--border);
            text-decoration: none;
            color: var(--text);
            font-size: .87rem;
            transition: color .2s;
        }

            .cat-list-item:last-child {
                border: none;
            }

            .cat-list-item:hover {
                color: var(--teal);
            }

                .cat-list-item:hover .cat-count {
                    background: var(--teal-lt);
                    color: var(--teal);
                }

        .cat-count {
            background: var(--bg);
            color: var(--muted);
            font-size: .72rem;
            font-weight: 600;
            border-radius: 100px;
            padding: .15rem .55rem;
            transition: .2s;
        }

        .cat-list-left {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        /* consult */
        .consult-widget {
            background: linear-gradient(135deg, #0f4c75 0%, var(--navy) 100%);
            border-radius: 14px;
            padding: 1.5rem;
            text-align: center;
            color: white;
            box-shadow: var(--shadow);
        }

            .consult-widget h3 {
                font-family: 'Playfair Display', serif;
                font-size: 1.1rem;
                margin-bottom: .4rem;
            }

            .consult-widget p {
                color: #90b4d4;
                font-size: .82rem;
                margin-bottom: 1rem;
            }

            .consult-widget .phone {
                font-size: 1.05rem;
                font-weight: 700;
                color: var(--gold);
                margin-bottom: .8rem;
            }

        .cw-btn {
            display: block;
            background: var(--teal);
            color: white;
            padding: .65rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: .87rem;
            transition: background .2s;
            margin-bottom: .6rem;
        }

            .cw-btn:hover {
                background: var(--teal-d);
            }

        .wa-btn {
            display: block;
            background: #25D366;
            color: white;
            padding: .6rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: .85rem;
            transition: background .2s;
        }

            .wa-btn:hover {
                background: #1db155;
            }

        /* ─── TOPIC CARDS ─── */
        .topic-strip {
            background: var(--navy);
            padding: 3rem 1.5rem;
        }

        .topic-inner {
            max-width: 1260px;
            margin: auto;
        }

        .topic-head {
            text-align: center;
            margin-bottom: 2rem;
        }

            .topic-head h2 {
                font-family: 'Playfair Display', serif;
                font-size: 1.8rem;
                color: white;
                margin-bottom: .4rem;
            }

            .topic-head p {
                color: #7ea8c8;
                font-size: .9rem;
            }

        .topic-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
        }

        .topic-card {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 12px;
            padding: 1.2rem 1rem;
            text-align: center;
            text-decoration: none;
            transition: .25s;
            cursor: pointer;
        }

            .topic-card:hover {
                background: rgba(0,168,150,.15);
                border-color: rgba(0,168,150,.4);
                transform: translateY(-3px);
            }

        .topic-icon {
            font-size: 1.8rem;
            margin-bottom: .5rem;
            display: block;
        }

        .topic-name {
            font-size: .8rem;
            font-weight: 600;
            color: #c8ddf0;
        }

        .topic-cnt {
            font-size: .7rem;
            color: #5a8fb5;
            margin-top: .2rem;
        }

        /* ─── FOOTER ─── */
        footer {
            background: var(--navy);
            color: #7ea0bf;
            padding: 3rem 1.5rem 1.5rem;
            margin-top: 0;
        }

        .footer-grid {
            max-width: 1260px;
            margin: auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2.5rem;
        }

        .footer-brand .brand-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.3rem;
            color: white;
            margin-bottom: .7rem;
        }

            .footer-brand .brand-name span {
                color: var(--teal);
            }

        .footer-brand p {
            font-size: .83rem;
            line-height: 1.65;
            margin-bottom: 1rem;
        }

        .footer-contact div {
            font-size: .82rem;
            margin-bottom: .35rem;
        }

        .footer-contact a {
            color: var(--teal);
            text-decoration: none;
        }

        .f-social {
            display: flex;
            gap: .6rem;
            margin-top: 1rem;
        }

            .f-social a {
                width: 34px;
                height: 34px;
                background: rgba(255,255,255,.07);
                border-radius: 8px;
                display: grid;
                place-items: center;
                color: #7ea0bf;
                text-decoration: none;
                font-size: .85rem;
                transition: .2s;
            }

                .f-social a:hover {
                    background: var(--teal);
                    color: white;
                }

        footer h4 {
            color: white;
            font-size: .82rem;
            font-weight: 700;
            margin-bottom: .9rem;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        footer ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .45rem;
        }

            footer ul a {
                color: #7ea0bf;
                text-decoration: none;
                font-size: .82rem;
                transition: color .2s;
            }

                footer ul a:hover {
                    color: var(--teal);
                }

        .footer-bottom {
            max-width: 1260px;
            margin: 1.8rem auto 0;
            padding-top: 1.2rem;
            border-top: 1px solid rgba(255,255,255,.08);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .5rem;
            font-size: .75rem;
        }

            .footer-bottom a {
                color: #7ea0bf;
                text-decoration: none;
            }

                .footer-bottom a:hover {
                    color: var(--teal);
                }

        /* ─── BG COLORS for cards ─── */
        .bg1 {
            background: linear-gradient(135deg, #0B3D6E 0%, #1565C0 100%);
        }

        .bg2 {
            background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
        }

        .bg3 {
            background: linear-gradient(135deg, #4A148C 0%, #7B1FA2 100%);
        }

        .bg4 {
            background: linear-gradient(135deg, #BF360C 0%, #E64A19 100%);
        }

        .bg5 {
            background: linear-gradient(135deg, #006064 0%, var(--teal) 100%);
        }

        .bg6 {
            background: linear-gradient(135deg, #880E4F 0%, #C2185B 100%);
        }

        .bg7 {
            background: linear-gradient(135deg, #1A237E 0%, #283593 100%);
        }

        .bg8 {
            background: linear-gradient(135deg, var(--navy) 0%, #0f4c75 100%);
        }

        /* ─── ANIMATIONS ─── */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        .animate {
            animation: fadeUp .55s ease both;
        }

        .delay1 {
            animation-delay: .08s;
        }

        .delay2 {
            animation-delay: .16s;
        }

        .delay3 {
            animation-delay: .24s;
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 1100px) {
            .main-wrap {
                grid-template-columns: 1fr;
            }

            .sidebar {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .newsletter-widget, .consult-widget {
                grid-column: 1 / -1;
            }

            .topic-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .topbar {
                flex-direction: column;
                gap: .3rem;
                font-size: .72rem;
            }

            .nav-menu, .nav-search, .nav-cta {
                display: none;
            }

            .hamburger {
                display: flex;
            }

            .featured-card {
                grid-template-columns: 1fr;
            }

            .featured-img {
                min-height: 200px;
            }

            .posts-grid {
                grid-template-columns: 1fr 1fr;
            }

            .posts-grid-2 {
                grid-template-columns: 1fr;
            }

            .sidebar {
                grid-template-columns: 1fr;
            }

            .topic-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .hero-stats {
                gap: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .blog-hero {
                padding: 2.5rem 1rem 0;
            }

            .posts-grid {
                grid-template-columns: 1fr;
            }

            .list-card {
                grid-template-columns: 90px 1fr;
            }

            .hero-stat-val {
                font-size: 1.4rem;
            }

            .pagination {
                flex-wrap: wrap;
            }
        }
    
/* ══ ENHANCED MOBILE RESPONSIVE ══════════════════════════════════════════ */
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.menu-btn span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s;}
.mobile-nav{display:none;position:fixed;inset:0;top:66px;background:var(--brand,#0e3269);z-index:299;padding:24px 28px;flex-direction:column;gap:4px;overflow-y:auto;}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:1rem;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.mobile-nav a:last-child{border-bottom:none;}
.mobile-nav a.mn-cta{color:#f59e0b;}
@media(max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:flex;}
}
@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr!important;}
  .list-section .list-cards{grid-template-columns:1fr!important;}
  .featured-card{flex-direction:column!important;}
  .featured-card .fc-img{width:100%!important;height:200px!important;}
  .sidebar-widgets{display:none;}
  .page-layout{grid-template-columns:1fr!important;}
  .filter-bar{overflow-x:auto;white-space:nowrap;padding-bottom:8px;}
}
@media(max-width:480px){
  .hero-content h1{font-size:1.6rem!important;}
  .post-card{font-size:.85rem;}
  .nav{padding:0 16px;}
  .page-wrap,.blog-container{padding:14px 16px 50px!important;}
}