:root {
  --purple: #9b1faf;
  --magenta: #be00fe;
  --green: #b6f783;
  --green-dark: #9aeb5b;
  --orange: #e8761a;
  --cream: #f9f4ec;
  --grey-light: #f2f2f2;
  --text: #333;
  --text-muted: #666;
}



	/* ============ APARTMENT GALLERY CONTAINER ============ */
	.gal-desk {
		max-width: 1680px;
		margin: 2rem auto;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.gal-cont {
		background: #ffffff;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.03);
		border: 1px solid #eaeef2;
	}

	.bor-bor {
		border: 1px solid #eaeef2;
	}

	.paddtt {
		padding: 40px 36px 42px;
	}

	/* ============ TAB BAR (SLEEK URBAN) ============ */
	.tabs {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 38px;
		padding-bottom: 0;
		border-bottom: none;
		position: relative;
	}

	.tabs center {
		display: contents;
		width: 100%;
	}

	.tablinks {
		position: relative;
		padding: 14px 32px;
		font-size: 0.9rem;
		font-weight: 500;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: #5b6b7c;
		background: #f5f7fa;
		border: 1px solid #e2e7ed;
		border-radius: 40px;
		cursor: pointer;
		transition: all 0.25s ease;
		outline: none;
		font-family: 'Inter', 'Helvetica Neue', sans-serif;
		user-select: none;
		white-space: nowrap;
	}

	.tablinks:hover {
		color: #1a2533;
		background: #edf1f5;
		border-color: #cbd5e1;
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
	}

	/* Active state – dark accent with subtle gold indicator */
	.tablinks.active,
	.tablinks[aria-selected="true"] {
		color: #ffffff;
		background: var(--magenta);
		border-color: var(--magenta);
		box-shadow: 0 8px 22px rgba(30, 44, 60, 0.25);
	}

	.tablinks.active::after,
	.tablinks[aria-selected="true"]::after {
		content: '';
		position: absolute;
		bottom: -4px;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 3px;
		background: #c9a45e;
		border-radius: 10px;
		opacity: 1;
		transition: opacity 0.2s;
	}

	.tablinks:not(.active)::after,
	.tablinks:not([aria-selected="true"])::after {
		opacity: 0;
	}

	/* ============ TAB CONTENT ============ */
	.tabcontent {
		display: none;
		animation: elegantReveal 0.4s ease;
	}

	.tabcontent.active {
		display: block;
	}

	@keyframes elegantReveal {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ============ IMAGE GRID (LUXE LISTING CARDS) ============ */
	.lightgallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: 10px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.lightgallery li {
		position: relative;
		border-radius: 16px;
		overflow: hidden;
		background: #f8f9fb;
		aspect-ratio: 4 / 3;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
		transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #eef1f5;
	}

	.lightgallery li:hover {
		transform: translateY(-6px);
		box-shadow: 0 26px 48px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.05);
		border-color: #d0d8e2;
		background: #ffffff;
	}

	/* Elegant "view" overlay icon on hover */
	.lightgallery li::before {
		content: 'View';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.9);
		font-size: 0.8rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		color: #ffffff;
		background: var(--magenta);
		padding: 8px 20px;
		border-radius: 30px;
		z-index: 3;
		opacity: 0;
		transition: all 0.3s ease;
		pointer-events: none;
		backdrop-filter: blur(6px);
	}

	.lightgallery li:hover::before {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	/* Soft dark gradient for depth */
	.lightgallery li::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
		z-index: 1;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.lightgallery li:hover::after {
		opacity: 1;
	}

	.lightgallery li a {
		display: block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		z-index: 0;
	}

	.lightgallery li img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 16px;
		transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
		filter: brightness(0.95);
	}

	.lightgallery li:hover img {
		transform: scale(1.06);
		filter: brightness(1.02) contrast(1.05);
	}

	/* ============ RESPONSIVE DESIGN ============ */
	@media (max-width: 860px) {
		.paddtt {
			padding: 28px 18px 30px;
		}

		.tabs {
			gap: 8px;
			margin-bottom: 30px;
		}

		.tablinks {
			padding: 12px 24px;
			font-size: 0.8rem;
		}

		.lightgallery {
			grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
			gap: 16px;
		}

		.lightgallery li {
			border-radius: 14px;
		}
		.lightgallery li img {
			border-radius: 14px;
		}
	}

	@media (max-width: 500px) {
		.gal-desk {
			padding: 0 10px;
			margin: 1.5rem auto;
		}

		.paddtt {
			padding: 20px 12px 24px;
		}

		.tablinks {
			padding: 10px 18px;
			font-size: 0.7rem;
			letter-spacing: 0.3px;
		}

		.lightgallery {
			grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
			gap: 10px;
		}

		.lightgallery li {
			aspect-ratio: 1 / 1; /* square for tight mobile screens */
			border-radius: 12px;
		}
		.lightgallery li img {
			border-radius: 12px;
		}

		.lightgallery li::before {
			font-size: 0.65rem;
			padding: 6px 14px;
		}
	}

	/* ============ DARK MODE (EXECUTIVE) ============ */
	@media (prefers-color-scheme: dark) {
		.gal-cont {
			background: #181d24;
			border-color: #2a303a;
			box-shadow: 0 18px 40px rgba(0,0,0,0.3);
		}
		.bor-bor {
			border-color: #2a303a;
		}
		.tablinks {
			color: #9aa9bb;
			background: #1f252e;
			border-color: #2a323d;
		}
		.tablinks:hover {
			color: #eef2f6;
			background: #272f3a;
			border-color: #3b4555;
		}
		.tablinks.active,
		.tablinks[aria-selected="true"] {
			color: #fff;
			background: #2c3a4a;
			border-color: #3f5268;
			box-shadow: 0 8px 22px rgba(44,58,74,0.5);
		}
		.tablinks.active::after,
		.tablinks[aria-selected="true"]::after {
			background: #d4b56c;
		}
		.lightgallery li {
			background: #1e242c;
			border-color: #2b323c;
			box-shadow: 0 10px 24px rgba(0,0,0,0.25);
		}
		.lightgallery li:hover {
			background: #232a33;
			border-color: #455569;
			box-shadow: 0 26px 48px rgba(0,0,0,0.4);
		}
		.lightgallery li img {
			filter: brightness(0.8);
		}
		.lightgallery li:hover img {
			filter: brightness(0.9) contrast(1.05);
		}
		.lightgallery li::before {
			background: rgba(44,58,74,0.9);
		}
	}

	/* ============ ACCESSIBILITY ============ */
	.tablinks:focus-visible {
		outline: 2px solid #c9a45e;
		outline-offset: 3px;
		border-radius: 40px;
	}
	.lightgallery li a:focus-visible {
		outline: 2px solid #c9a45e;
		outline-offset: 3px;
		border-radius: 16px;
	}
	@media (prefers-reduced-motion: reduce) {
		.tablinks,
		.lightgallery li,
		.lightgallery li img,
		.tabcontent {
			transition: none !important;
			animation: none !important;
		}
	}