:root {
			--ga: #7C3DAF;
			--gb: #0F5DB8;
			--grad: linear-gradient(90deg, var(--ga), var(--gb));
			--logo-grad: linear-gradient(90deg, #0099F6, #3A49BC, #9C41CC);
			--navy: #0A1C30;
			--ink: #16213A;
			--muted: #69708A;
			--muted2: #9AA5C4;
			--bg: #F4F6FB;
			--paper: #fff;
			--bd: #E7EAF2;
			--green: #1A8A4B;
			--orange: #F4805A;
			--gold: #FEC107;
			--wa: #25D366;
			--r: 10px;
			--rl: 16px;
			--rp: 999px;
			--sh: 0 1px 3px rgba(22, 33, 58, .06), 0 6px 20px -8px rgba(22, 33, 58, .12);
			--sh2: 0 4px 8px rgba(22, 33, 58, .08), 0 16px 32px -12px rgba(60, 40, 140, .18);
		}

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

		html {
			scroll-behavior: smooth;
		}

		body {
			font-family: 'Inter', system-ui, sans-serif;
			color: var(--ink);
			background: var(--bg);
			-webkit-font-smoothing: antialiased;
			font-size: 14px;
			line-height: 1.55;
		}

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

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

		ul {
			list-style: none;
		}

		h1,
		h2,
		h3,
		h4 {
			line-height: 1.2;
			font-weight: 800;
			letter-spacing: -.02em;
		}

		svg {
			display: block;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		/* ===== BUTTONS ===== */
		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			font-family: inherit;
			font-weight: 700;
			font-size: 13.5px;
			border-radius: var(--rp);
			padding: 10px 20px;
			white-space: nowrap;
			cursor: pointer;
			transition: transform .15s, box-shadow .15s;
			border: none;
		}

		.btn:hover {
			transform: translateY(-1px);
		}

		.btn-grad {
			background: var(--grad);
			color: #fff;
			box-shadow: 0 6px 16px -4px rgba(124, 61, 175, .4);
		}

		.btn-grad:hover {
			box-shadow: 0 8px 20px -4px rgba(124, 61, 175, .5);
		}

		.btn-outline {
			background: #fff;
			border: 1.5px solid var(--bd);
			color: var(--ink);
		}

		.btn-outline:hover {
			border-color: var(--ga);
			color: var(--ga);
		}

		.btn-sm {
			padding: 8px 14px;
			font-size: 12.5px;
		}

		.btn-white {
			background: #fff;
			color: var(--ga);
		}

		.btn-ghost-w {
			background: transparent;
			border: 2px solid rgba(255, 255, 255, .45);
			color: #fff;
		}

		.btn-ghost-w:hover {
			background: rgba(255, 255, 255, .12);
		}

		/* ===== HEADER ===== */
		.site-header {
			position: sticky;
			top: 0;
			z-index: 60;
			background: #fff;
			border-bottom: 1px solid var(--bd);
			box-shadow: 0 2px 12px -4px rgba(22, 33, 58, .08);
		}

		.header-row {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px 20px;
			flex-wrap: wrap;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 9px;
			flex-shrink: 0;
		}

		.wordmark {
			font-size: 19px;
			font-weight: 800;
			letter-spacing: -.02em;
			background: var(--logo-grad);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.hdr-search {
			flex: 1 1 320px;
			display: flex;
			align-items: center;
			background: var(--bg);
			border: 1.5px solid var(--bd);
			border-radius: var(--rp);
			padding: 4px 4px 4px 14px;
			min-width: 0;
			transition: border-color .15s;
		}

		.hdr-search:focus-within {
			border-color: var(--ga);
		}

		.hdr-search input {
			flex: 1;
			border: none;
			background: transparent;
			font-family: inherit;
			font-size: 13.5px;
			padding: 8px 4px;
			color: var(--ink);
		}

		.hdr-search input::placeholder {
			color: var(--muted2);
		}

		.hdr-search .sep {
			width: 1px;
			height: 18px;
			background: var(--bd);
			margin: 0 6px;
			flex-shrink: 0;
		}

		.hdr-search select {
			border: none;
			background: transparent;
			font-family: inherit;
			font-size: 13px;
			font-weight: 600;
			color: var(--ink);
			padding: 8px 4px;
		}

		.hdr-actions {
			display: flex;
			gap: 8px;
			align-items: center;
			flex-shrink: 0;
		}

		.hdr-link {
			font-size: 13px;
			font-weight: 600;
			color: var(--muted);
			padding: 4px;
		}

		.hdr-link:hover {
			color: var(--ga);
		}

		.hdr-link.accent {
			color: var(--ga);
		}

		.hamburger {
			display: none;
			width: 38px;
			height: 38px;
			border-radius: 8px;
			border: 1.5px solid var(--bd);
			background: #fff;
			align-items: center;
			justify-content: center;
		}

		.nav-strip {
			border-top: 1px solid var(--bd);
			display: flex;
			overflow-x: auto;
			scrollbar-width: none;
		}

		.nav-strip::-webkit-scrollbar {
			display: none;
		}

		.nav-strip a,
		.nav-strip button {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 10px 18px;
			font-size: 13.5px;
			font-weight: 600;
			color: var(--muted);
			background: transparent;
			border: none;
			border-bottom: 2.5px solid transparent;
			margin-bottom: -1px;
			white-space: nowrap;
			cursor: pointer;
		}

		.nav-strip a:hover {
			color: var(--ink);
		}

		.nav-strip a.active {
			color: var(--ga);
			border-bottom-color: var(--ga);
		}

		@media(max-width:560px) {
			.hamburger {
				display: flex;
			}
		}

		/* ===== HERO ===== */
		.hero {
			background: linear-gradient(120deg, #F2EEF9 0%, #ECF1FB 55%, #F0EDF8 100%);
			border-bottom: 1px solid var(--bd);
			padding: 30px 20px;
			position: relative;
			overflow: hidden;
		}

		.hero .orb {
			position: absolute;
			border-radius: 50%;
			pointer-events: none;
		}

		.hero .orb-a {
			width: 280px;
			height: 280px;
			background: radial-gradient(circle, rgba(124, 61, 175, .12), transparent 70%);
			top: -110px;
			right: -30px;
		}

		.hero .orb-b {
			width: 180px;
			height: 180px;
			background: radial-gradient(circle, rgba(15, 93, 184, .1), transparent 70%);
			bottom: -90px;
			left: 50px;
		}

		.hero-inner {
			position: relative;
			z-index: 1;
			max-width: 1300px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20px;
			flex-wrap: wrap;
		}

		.hero-copy h1 {
			font-size: clamp(22px, 2.8vw, 30px);
		}

		.hero-copy h1 .acc {
			background: var(--logo-grad);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.hero-copy p {
			color: var(--muted);
			margin-top: 6px;
			font-size: 14.5px;
			max-width: 460px;
		}

		.stat-pills {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			margin-top: 14px;
		}

		.stat-pill {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			background: #fff;
			border: 1px solid var(--bd);
			border-radius: var(--rp);
			padding: 7px 13px;
			font-size: 12.5px;
			font-weight: 600;
		}

		.stat-pill svg {
			width: 13px;
			height: 13px;
			color: var(--ga);
		}

		.hero-ctas {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

		/* ===== QUICK FILTER BAR (CHIPS) ===== */
		.qbar {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 12px 20px;
			background: #fff;
			border-bottom: 1px solid var(--bd);
			overflow-x: auto;
			scrollbar-width: none;
			width: 100%;
			margin: 0 auto;
		}

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

		.chip {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: 5px;
			padding: 7px 13px;
			border-radius: var(--rp);
			border: 1.5px solid var(--bd);
			background: #fff;
			font-size: 12.5px;
			font-weight: 600;
			color: var(--muted);
			cursor: pointer;
			transition: border-color .15s, background .15s, color .15s;
		}

		.chip:hover {
			border-color: var(--ga);
			color: var(--ga);
		}

		.chip.on {
			background: var(--ink);
			border-color: var(--ink);
			color: #fff;
		}

		.chip svg {
			width: 12px;
			height: 12px;
		}

		.qbar .sp {
			flex: 1;
		}

		.sort-sel {
			border: 1.5px solid var(--bd);
			background: #fff;
			border-radius: var(--rp);
			padding: 7px 12px;
			font-family: inherit;
			font-size: 12.5px;
			font-weight: 600;
			color: var(--ink);
			cursor: pointer;
		}

		/* ===== PAGE WRAP ===== */
		.page-wrap {
			max-width: 1300px;
			margin: 0 auto;
			padding: 20px 16px;
			display: grid;
			grid-template-columns: 280px 1fr;
			gap: 20px;
			align-items: start;
		}

		@media(max-width:992px) {
			.page-wrap {
				grid-template-columns: 1fr;
			}
		}

		/* ===== SIDEBAR ===== */
		.sidebar {
			display: flex;
			flex-direction: column;
			gap: 14px;
			position: sticky;
			top: 120px;
		}

		.scard {
			background: #fff;
			border: 1px solid var(--bd);
			border-radius: var(--rl);
			overflow: hidden;
		}

		.scard-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 13px 16px;
			border-bottom: 1px solid var(--bd);
		}

		.scard-head h3 {
			font-size: 13.5px;
			font-weight: 700;
		}

		.scard-head button {
			font-size: 12px;
			font-weight: 600;
			color: var(--ga);
		}

		.fgrp {
			padding: 14px 16px;
			display: flex;
			flex-direction: column;
			gap: 9px;
			border-bottom: 1px solid var(--bd);
		}

		.fgrp:last-child {
			border-bottom: none;
		}

		.fgrp-lbl {
			font-size: 11.5px;
			font-weight: 700;
			letter-spacing: .06em;
			text-transform: uppercase;
			color: var(--muted);
			margin-bottom: 4px;
			display: block;
		}

		.fopt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			cursor: pointer;
		}

		.fopt input[type=checkbox] {
			accent-color: var(--ga);
			width: 15px;
			height: 15px;
			flex-shrink: 0;
		}

		.fopt span.lab {
			font-size: 13px;
			flex: 1;
		}

		.fopt .cnt {
			font-size: 11.5px;
			color: var(--muted2);
			font-weight: 600;
			background: var(--bg);
			padding: 2px 7px;
			border-radius: 20px;
		}

		.fopt:hover .lab {
			color: var(--ga);
		}

		/* Salary Range */
		.salary-rng {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.salary-rng input[type=range] {
			width: 100%;
			accent-color: var(--ga);
		}

		.salary-lbls {
			display: flex;
			justify-content: space-between;
			font-size: 11.5px;
			color: var(--muted2);
			font-weight: 600;
		}

		.sidebar-cta {
			background: linear-gradient(135deg, var(--ga), var(--gb));
			border-radius: var(--rl);
			padding: 20px;
			text-align: center;
			color: #fff;
		}

		.sidebar-cta h4 {
			font-size: 14px;
			font-weight: 700;
		}

		.sidebar-cta p {
			font-size: 12.5px;
			opacity: .85;
			margin-top: 5px;
		}

		.sidebar-cta .btn {
			background: #fff;
			color: var(--ga);
			margin-top: 12px;
			width: 100%;
		}

		.trend-cloud {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.trend-cloud a {
			font-size: 11.5px;
			padding: 5px 10px;
			border-radius: var(--rp);
			border: 1.5px solid var(--bd);
			background: #fff;
			color: var(--muted);
			font-weight: 600;
		}

		.trend-cloud a:hover {
			border-color: var(--ga);
			color: var(--ga);
		}

		/* ===== JOB CARDS ===== */
		.res-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 14px;
			flex-wrap: wrap;
			gap: 8px;
		}

		.res-head h2 {
			font-size: 16px;
			font-weight: 700;
		}

		.res-head .sub {
			font-size: 13px;
			color: var(--muted);
		}

		.view-tabs {
			display: flex;
			gap: 6px;
		}

		.vtab {
			padding: 7px 14px;
			border-radius: var(--rp);
			border: 1.5px solid var(--bd);
			background: #fff;
			font-size: 12.5px;
			font-weight: 600;
			color: var(--muted);
		}

		.vtab.on {
			background: var(--ink);
			border-color: var(--ink);
			color: #fff;
		}

		.jlist {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.jcard {
			background: #fff;
			border: 1.5px solid var(--bd);
			border-radius: var(--rl);
			padding: 18px 20px;
			display: flex;
			gap: 14px;
			transition: border-color .18s, box-shadow .18s, transform .18s;
			cursor: pointer;
			position: relative;
		}

		.jcard:hover {
			border-color: rgba(124, 61, 175, .3);
			box-shadow: var(--sh2);
			transform: translateY(-2px);
		}

		.jcard.feat {
			border-color: rgba(124, 61, 175, .25);
			background: linear-gradient(135deg, rgba(124, 61, 175, .03), rgba(15, 93, 184, .02));
		}

		.jcard.feat::before {
			content: "Featured";
			position: absolute;
			top: 12px;
			right: 14px;
			background: var(--grad);
			color: #fff;
			font-size: 10.5px;
			font-weight: 700;
			letter-spacing: .05em;
			padding: 3px 9px;
			border-radius: var(--rp);
		}

		/* ===== JOB LOGO IMAGE FIX ===== */
.jlogo {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--bd);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Important: crops the image to fit */
}

.jlogo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* This makes the image cover the container properly */
    display: block;
}

/* For fallback when image doesn't load */
.jlogo .ini {
    font-size: 16px;
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

		

		.jmain {
			flex: 1;
			min-width: 0;
		}

		.jtitle {
			font-size: 15px;
			font-weight: 700;
			color: var(--ink);
			margin-bottom: 3px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.jco {
			font-size: 13px;
			font-weight: 600;
			color: var(--ga);
			display: flex;
			align-items: center;
			gap: 5px;
			margin-bottom: 8px;
		}

		.jco svg {
			width: 13px;
			height: 13px;
			stroke: var(--ga);
			fill: none;
		}

		.jmeta {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
		}

		.jtag {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 12px;
			color: var(--muted);
		}

		.jtag svg {
			width: 12px;
			height: 12px;
			color: var(--muted2);
			stroke: currentColor;
			fill: none;
		}

		.jsal {
			font-size: 13px;
			font-weight: 700;
			color: var(--green);
		}

		.jact {
			display: flex;
			gap: 7px;
			margin-top: 12px;
		}

		.jside {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;
			gap: 8px;
			flex-shrink: 0;
		}

		.jdate {
			font-size: 11.5px;
			color: var(--muted2);
		}


		.jlist.grid-view {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			gap: 14px;
		}

		.jlist.grid-view .jcard {
			flex-direction: column;
		}

		.jlist.grid-view .jside {
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin-top: 10px;
		}

		.badge {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 11.5px;
			font-weight: 700;
			padding: 4px 9px;
			border-radius: var(--rp);
		}

		.b-new {
			background: #E4F9ED;
			color: var(--green);
		}

		.b-hot {
			background: #FFF0E6;
			color: var(--orange);
		}

		.b-ft {
			background: #EEF1FA;
			color: var(--indigo);
		}

		.save-btn {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			border: 1.5px solid var(--bd);
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			flex-shrink: 0;
		}

		.save-btn:hover {
			border-color: var(--ga);
		}

		.save-btn svg {
			width: 15px;
			height: 15px;
			stroke: var(--muted);
			fill: none;
		}

		.save-btn.saved svg {
			fill: #7c3aed;
			stroke: #7c3aed;
		}

		/* ===== PAGINATION ===== */
		.pages {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 6px;
			margin-top: 24px;
		}

		/* ===== SECTIONS ===== */
		.section {
			max-width: 1300px;
			margin: 0 auto;
			padding: 32px 16px;
		}

		.sec-head {
			margin-bottom: 18px;
		}

		.sec-head h2 {
			font-size: 20px;
			font-weight: 800;
		}

		.sec-head p {
			color: var(--muted);
			margin-top: 5px;
			font-size: 14px;
		}

		.sec-row {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 18px;
			flex-wrap: wrap;
			gap: 10px;
		}

		/* ===== COMPANY ROW ===== */
		.co-row {
			display: flex;
			gap: 12px;
			overflow-x: auto;
			padding: 4px 0;
			scrollbar-width: none;
			max-width: 1300px;
			margin: 0 auto;
		}

		.co-row::-webkit-scrollbar {
			display: none;
		}

		.co-card {
			flex-shrink: 0;
			width: 84px;
			height: 58px;
			background: #fff;
			border: 1px solid var(--bd);
			border-radius: var(--r);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 8px;
			transition: border-color .15s, box-shadow .15s;
		}

		.co-card:hover {
			border-color: rgba(124, 61, 175, .3);
			box-shadow: var(--sh);
		}

		.co-card img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		.co-card .ini {
			font-size: 11px;
			font-weight: 700;
			color: var(--ga);
		}

		/* ===== CITY GRID ===== */
		.city-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
			gap: 10px;
			margin-top: 14px;
		}

		.city-card {
			background: #fff;
			border: 1px solid var(--bd);
			border-radius: var(--r);
			padding: 14px;
			text-align: center;
			transition: border-color .15s, box-shadow .15s;
			cursor: pointer;
		}

		.city-card:hover {
			border-color: rgba(124, 61, 175, .3);
			box-shadow: var(--sh);
		}

		.city-card svg {
			width: 22px;
			height: 22px;
			stroke: var(--ga);
			fill: none;
			margin: 0 auto 7px;
		}

		.city-card .cn {
			font-size: 13px;
			font-weight: 700;
		}

		.city-card .cc {
			font-size: 11.5px;
			color: var(--muted2);
			margin-top: 2px;
		}

		/* ===== CATEGORY PILLS ===== */
		.cat-pills {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-top: 14px;
		}

		.cat-pill {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 8px 14px;
			border-radius: var(--rp);
			border: 1.5px solid var(--bd);
			background: #fff;
			font-size: 13px;
			font-weight: 600;
			transition: all .15s;
			cursor: pointer;
		}

		.cat-pill:hover {
			border-color: rgba(124, 61, 175, .4);
			background: rgba(124, 61, 175, .04);
			color: var(--ga);
		}

		.cat-pill .n {
			font-size: 11.5px;
			color: var(--muted2);
		}

		/* ===== CTA BAND ===== */
		.cta-band {
			background: var(--grad);
			border-radius: var(--rl);
			padding: 36px 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 24px;
			flex-wrap: wrap;
			position: relative;
			overflow: hidden;
			margin: 0 16px 32px;
			max-width: 1268px;
			margin-left: auto;
			margin-right: auto;
		}

		.cta-band .ob {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, .08);
			pointer-events: none;
		}

		.cta-band .ob1 {
			width: 220px;
			height: 220px;
			top: -80px;
			right: 80px;
		}

		.cta-band .ob2 {
			width: 160px;
			height: 160px;
			bottom: -80px;
			right: -30px;
		}

		.cta-band .cp {
			position: relative;
			z-index: 1;
		}

		.cta-band h3 {
			color: #fff;
			font-size: 22px;
		}

		.cta-band p {
			color: rgba(255, 255, 255, .82);
			margin-top: 6px;
			font-size: 14px;
			max-width: 420px;
		}

		.cta-band .acts {
			position: relative;
			z-index: 1;
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

		/* ===== FAQ ===== */
		.faq-list {
			display: flex;
			flex-direction: column;
			gap: 8px;
			max-width: 800px;
			margin: 0 auto;
		}

		.faq-item {
			background: #fff;
			border: 1px solid var(--bd);
			border-radius: var(--r);
		}

		.faq-q {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 12px;
			padding: 15px 18px;
			background: none;
			border: none;
			text-align: left;
			font-size: 14px;
			font-weight: 600;
			color: var(--ga);
			cursor: pointer;
		}

		.faq-q svg {
			width: 17px;
			height: 17px;
			stroke: var(--muted);
			fill: none;
			flex-shrink: 0;
			transition: transform .25s;
		}

		.faq-item.open .faq-q svg {
			transform: rotate(180deg);
		}

		.faq-a {
			max-height: 0;
			overflow: hidden;
			transition: max-height .3s ease;
		}

		.faq-a p {
			padding: 0 18px 16px;
			font-size: 13.5px;
			color: var(--muted);
			line-height: 1.65;
		}

		/* ===== BLOG ===== */
		.blog-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
			gap: 14px;
			margin-top: 14px;
		}

		.bcard {
			background: #fff;
			border: 1px solid var(--bd);
			border-radius: var(--rl);
			overflow: hidden;
			transition: box-shadow .18s, transform .18s;
			display: block;
		}

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

		.bthumb {
			aspect-ratio: 16/9;
			overflow: hidden;
			background: var(--bg);
		}

		.bthumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform .3s;
		}

		.bcard:hover .bthumb img {
			transform: scale(1.04);
		}

		.bbody {
			padding: 14px 16px;
		}

		.bcat {
			font-size: 11px;
			font-weight: 700;
			letter-spacing: .06em;
			text-transform: uppercase;
			color: var(--ga);
			margin-bottom: 6px;
		}

		.bbody h4 {
			font-size: 14px;
			font-weight: 700;
			line-height: 1.4;
		}

		.bbody p {
			font-size: 12.5px;
			color: var(--muted);
			margin-top: 5px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.bfoot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;
			padding-top: 10px;
			border-top: 1px solid var(--bd);
			font-size: 11.5px;
			color: var(--muted2);
		}

		.bfoot .rd {
			color: var(--ga);
			font-weight: 700;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		/* ===== FOOTER ===== */
		.site-footer {
			background: var(--navy);
		}

		.ft-line {
			height: 3px;
			background: var(--grad);
		}

		.ft-main {
			max-width: 1300px;
			margin: 0 auto;
			padding: 40px 20px 24px;
			display: grid;
			grid-template-columns: 1.5fr 1fr 1fr 1fr;
			gap: 28px;
		}

		.ft-brand p {
			color: #9AA5C4;
			font-size: 13px;
			margin-top: 10px;
			max-width: 260px;
		}

		.ft-brand address {
			font-style: normal;
			font-size: 12.5px;
			color: #9AA5C4;
			margin-top: 8px;
		}

		.ft-social {
			display: flex;
			gap: 8px;
			margin-top: 14px;
		}

		.ft-social a {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, .18);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background .15s;
		}

		.ft-social a:hover {
			background: rgba(255, 255, 255, .1);
		}

		.ft-social svg {
			width: 14px;
			height: 14px;
			stroke: #fff;
			fill: none;
		}

		.ft-col h5 {
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .05em;
			text-transform: uppercase;
			color: #fff;
			margin-bottom: 12px;
		}

		.ft-links {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.ft-links a {
			font-size: 13px;
			color: #9AA5C4;
			transition: color .15s;
		}

		.ft-links a:hover {
			color: #fff;
		}

		.ft-apps {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			margin-top: 10px;
		}

		.ft-app {
			display: flex;
			align-items: center;
			gap: 7px;
			background: rgba(255, 255, 255, .07);
			border: 1px solid rgba(255, 255, 255, .14);
			border-radius: 8px;
			padding: 8px 12px;
			font-size: 12px;
			color: #fff;
			font-weight: 600;
		}

		.ft-bottom {
			border-top: 1px solid rgba(255, 255, 255, .1);
			padding: 18px 20px;
			max-width: 1300px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12.5px;
			color: #9AA5C4;
			flex-wrap: wrap;
			gap: 8px;
		}

		.ft-blinks {
			display: flex;
			gap: 16px;
		}

		.ft-blinks a:hover {
			color: #fff;
		}

		@media(max-width:900px) {
			.ft-main {
				grid-template-columns: 1fr 1fr;
			}
		}

		@media(max-width:520px) {
			.ft-main {
				grid-template-columns: 1fr;
			}
		}

		/* ===== TOAST ===== */
		.toast {
			position: fixed;
			bottom: 28px;
			left: 50%;
			transform: translateX(-50%) translateY(16px);
			background: var(--ink);
			color: #fff;
			padding: 12px 20px;
			border-radius: var(--rp);
			font-size: 13px;
			font-weight: 500;
			z-index: 100;
			opacity: 0;
			visibility: hidden;
			transition: opacity .2s, transform .2s;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.toast.show {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
		}

		/* ===== BACK TO TOP ===== */
		.float-top {
			position: fixed;
			bottom: 22px;
			right: 22px;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background: var(--grad);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 6px 16px rgba(124, 61, 175, .4);
			z-index: 70;
			border: none;
			opacity: 0;
			visibility: hidden;
			transition: opacity .25s, visibility .25s;
		}

		.float-top.show {
			opacity: 1;
			visibility: visible;
		}

		.float-top svg {
			width: 18px;
			height: 18px;
			stroke: #fff;
			fill: none;
		}

		/* ===== REVEAL ===== */
		.reveal {
			transform: translateY(14px);
			transition: opacity .5s, transform .5s;
		}

		.reveal.vis {
			opacity: 1;
			transform: translateY(0);
		}

		@media(prefers-reduced-motion:reduce) {
			* {
				transition-duration: .001ms !important;
			}
		}
	</style>

	<style>
		/* Container ko flexbox banana taaki saare chips ek line mein aayein aur horizontal scroll ho sakein */
		.qbar {
			display: flex;
			align-items: center;
			gap: 12px;
			/* Chips ke darmiyan gap */
			overflow-x: auto;
			/* Agar screen se bahar jayein to scroll ho sakein */
			white-space: nowrap;
			padding: 10px 5px;
			-ms-overflow-style: none;
			/* IE aur Edge ke liye scrollbar chupane ke liye */
			scrollbar-width: none;
			/* Firefox ke liye */
		}

		/* Chrome, Safari aur Opera ke liye scrollbar chupane ke liye */
		.qbar::-webkit-scrollbar {
			display: none;
		}

		/* Links (a) aur Buttons (button) dono ko design karne ke liye */
		.qbar a,
		.qbar button.chip {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 10px 24px;
			/* Chip ke andar ki space (top-bottom, left-right) */
			border-radius: 50px;
			/* Poora rounded border (Pill shape) */
			border: 1px solid #e2e8f0;
			/* Light grey border jaisa image mein hai */
			background-color: #ffffff;
			/* White background */
			color: #5c6b80;
			/* Blue-grey text color */
			font-size: 14px;
			font-family: inherit;
			text-decoration: none;
			/* Link ke neeche se line hatane ke liye */
			cursor: pointer;
			transition: all 0.2s ease-in-out;
			outline: none;
			white-space: nowrap;
		}

		/* Hover aur Active effects (jab mouse upar jaye) */
		.qbar a:hover,
		.qbar button.chip:hover,
		.qbar button.chip.on {
			border-color: #cbd5e1;
			background-color: #f8fafc;
			color: #1e293b;
		}

		/* Agar koi active class (on class) ho to uska style (Optional) */
		.qbar button.chip.on {
			background-color: #f1f5f9;
			border-color: #94a3b8;
			font-weight: 500;
		}

		/* Sort dropdown aur spacer ke liye minor adjustment */
		.sort-sel {
			padding: 8px 12px;
			border-radius: 50px;
			border: 1px solid #e2e8f0;
			background-color: #fff;
			color: #5c6b80;
			cursor: pointer;
		}

		.sp {
			flex-grow: 1;
			/* Space bar dropdown ko right side pe push kar dega */
		}