/* === from template-parts/sections/testimonials.php === */
/* Wrapper */
.cs-testimonial-slider .cs-slider-wrapper {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 50px; /* Space for navigation arrows */
}

/* Smoke / Fade Effect */
.cs-testimonial-slider .cs-smoke {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
	/* Note: Agar aapka section background white nahi hai, toh #fff ko apne bg color se change kar dein */
}
.cs-testimonial-slider .cs-smoke--left {
	left: 0;
	background: linear-gradient(to right, #ffffff 20%, transparent 100%);
}
.cs-testimonial-slider .cs-smoke--right {
	right: 0;
	background: linear-gradient(to left, #ffffff 20%, transparent 100%);
}

/* Track */
.cs-testimonial-slider .cs-slider__track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	gap: 24px; /* Cards ke beech ka gap */
}

/* Individual Card */
.cs-testimonial-slider .cs-quote {
	/* Mobile Default: 1 card */
	flex: 0 0 calc(100% - 0px); 
	box-sizing: border-box;
	padding: 32px 24px;
	background: #f8f9fa; /* Card background */
	border-radius: 12px;
	text-align: center;
	border: 1px solid #e5e7eb;
}

.cs-testimonial-slider .cs-quote__stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 16px;
	color: #fbbf24;
}
.cs-testimonial-slider .cs-quote__stars svg {
	width: 18px;
	height: 18px;
}
.cs-testimonial-slider .cs-quote p {
	font-size: 15px;
	line-height: 1.6;
	color: #4b5563;
	margin-bottom: 20px;
}
.cs-testimonial-slider .cs-quote__who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.cs-testimonial-slider .cs-quote__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 4px;
}
.cs-testimonial-slider .cs-quote__who strong {
	font-size: 16px;
	color: #111827;
}
.cs-testimonial-slider .cs-quote__who div {
	font-size: 13px;
	color: #6b7280;
}

/* Navigation Buttons */
.cs-testimonial-slider .cs-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #ffffff;
	border: 1px solid #e5e7eb;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 3;
	color: #374151;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.cs-testimonial-slider .cs-slider__btn:hover {
	background: #111827;
	color: #ffffff;
	border-color: #111827;
}
.cs-testimonial-slider .cs-slider__btn--prev { left: 0; }
.cs-testimonial-slider .cs-slider__btn--next { right: 0; }

/* Dots */
.cs-testimonial-slider .cs-slider__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}
.cs-testimonial-slider .cs-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d1d5db;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}
.cs-testimonial-slider .cs-slider__dot.is-active {
	background: #111827;
	width: 24px;
	border-radius: 4px;
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

/* Tablet: 2 Cards */
@media (min-width: 768px) {
	.cs-testimonial-slider .cs-quote {
		flex: 0 0 calc(50% - 12px); /* 50% minus half of gap */
	}
}

/* Desktop: 4 Cards */
@media (min-width: 1024px) {
	.cs-testimonial-slider .cs-quote {
		flex: 0 0 calc(25% - 18px); /* 25% minus proportional gap */
	}
}

/* Mobile Adjustments */
@media (max-width: 767px) {
	.cs-testimonial-slider .cs-slider-wrapper {
		padding: 0 40px;
	}
	.cs-testimonial-slider .cs-smoke {
		width: 40px;
	}
	.cs-testimonial-slider .cs-slider__btn {
		width: 36px;
		height: 36px;
	}
	.cs-testimonial-slider .cs-slider__btn svg {
		width: 18px;
		height: 18px;
	}
}

/* === from template-parts/sections/contact-block.php === */
/* ============================================
   CONTACT SECTION - USING --color-secondary
   ============================================ */

/* Fallback: Agar --color-secondary define nahi hai toh yeh use hoga */
.cs-contact-section {
	--cs-secondary: var(--color-secondary, #0f766e);
	--cs-secondary-dark: color-mix(in srgb, var(--cs-secondary) 85%, #000);
	--cs-secondary-light: color-mix(in srgb, var(--cs-secondary) 15%, #fff);
	--cs-secondary-glow: color-mix(in srgb, var(--cs-secondary) 15%, transparent);
}

.cs-contact-section {
	background: #f8fafc;
}
.cs-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width: 900px) {
	.cs-contact-grid {
		grid-template-columns: 1fr 1.2fr;
		align-items: start;
	}
}

/* Left Panel - Uses --color-secondary */
.cs-connect {
	background: linear-gradient(135deg, var(--cs-secondary) 0%, var(--cs-secondary-dark) 100%);
	color: #ffffff;
	padding: 40px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}
.cs-connect::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
	pointer-events: none;
}
.cs-connect .cs-kicker {
	color: var(--cs-secondary-light);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 12px;
	position: relative;
}
.cs-connect h2 {
	font-size: 32px;
	margin-bottom: 16px;
	color: #ffffff;
	position: relative;
}
.cs-connect > p {
	color: color-mix(in srgb, #fff 80%, var(--cs-secondary));
	line-height: 1.6;
	margin-bottom: 32px;
	position: relative;
}
.cs-connect__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}
.cs-connect__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}
.cs-connect__list .cs-icon {
	font-size: 18px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	flex-shrink: 0;
}
.cs-connect__list a {
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.3s;
	word-break: break-word;
}
.cs-connect__list a:hover {
	opacity: 0.85;
	text-decoration: underline;
}

/* Right Form Panel (Light Theme) */
.cs-form {
	background: #ffffff;
	padding: 40px;
	border-radius: 16px;
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
	border: 1px solid #e2e8f0;
}
.cs-form__note {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 8px;
}
.cs-form h3 {
	font-size: 24px;
	color: #0f172a;
	margin-bottom: 24px;
}
.cs-form__group {
	margin-bottom: 20px;
}
.cs-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 600px) {
	.cs-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Inputs & Labels */
.cs-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}
.cs-form input,
.cs-form select,
.cs-form textarea {
	width: 100%;
	padding: 12px 16px;
	font-size: 15px;
	color: #0f172a;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	transition: all 0.3s ease;
	font-family: inherit;
}
.cs-form input:focus,
.cs-form select:focus,
.cs-form textarea:focus {
	outline: none;
	border-color: var(--cs-secondary);
	background: #ffffff;
	box-shadow: 0 0 0 3px var(--cs-secondary-glow);
}

/* Validation States */
.cs-form input.is-invalid,
.cs-form textarea.is-invalid {
	border-color: #ef4444;
	background: #fef2f2;
}
.cs-form input.is-invalid:focus,
.cs-form textarea.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.cs-form__error {
	display: block;
	font-size: 12px;
	color: #ef4444;
	margin-top: 6px;
	min-height: 18px;
	opacity: 0;
	transform: translateY(-5px);
	transition: all 0.3s ease;
}
.cs-form__error.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Status Messages */
.cs-form__status {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	display: none;
}
.cs-form__status.is-success {
	display: block;
	background: color-mix(in srgb, var(--cs-secondary) 10%, #f0fdf4);
	color: var(--cs-secondary-dark);
	border: 1px solid color-mix(in srgb, var(--cs-secondary) 25%, #bbf7d0);
}
.cs-form__status.is-error {
	display: block;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* Submit Button - Uses --color-secondary */
.cs-btn--primary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
} 
.cs-btn--primary:active:not(:disabled) {
	transform: translateY(0);
}
.cs-btn--primary:disabled {
	background: #94a3b8;
	cursor: not-allowed;
}
.spinner {
	animation: spin 1s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Mobile Adjustments */
@media (max-width: 600px) {
	.cs-connect, .cs-form {
		padding: 28px 20px;
	}
	.cs-connect h2 {
		font-size: 26px;
	}
	.cs-form h3 {
		font-size: 20px;
	}
}

/* === from template-parts/sections/services.php === */
/* Grid Layout */
.cs-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 40px;
}
@media (min-width: 640px) {
	.cs-services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.cs-services { grid-template-columns: repeat(4, 1fr); }
}

/* Card Base (Original Clean Style) */
.cs-service {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #f8fafc; /* Light blue/white background */
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 28px 24px;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.4s ease;
	min-height: 220px;
}
.cs-service:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
	border-color: #cbd5e1;
}

/* 1. Background Image Layer */
.cs-service__bg {
	position: absolute;
	inset: 0;
	background-image: var(--service-img);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
}
.cs-service__bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.4) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 2;
}
.cs-service:hover .cs-service__bg,
.cs-service:hover .cs-service__bg-overlay {
	opacity: 1;
}

/* 2. Original Content */
.cs-service__content {
	position: relative;
	z-index: 3;
	flex: 1;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.cs-service:hover .cs-service__content {
	opacity: 0;
	transform: translateY(10px);
}

/* Number Badge (Light Blue) */
.cs-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #e0f2fe;
	color: #0369a1;
	font-size: 14px;
	font-weight: 700;
	border-radius: 8px;
	margin-bottom: 16px;
}

/* Title */
.cs-service h3 {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a; /* Dark Navy */
	margin: 0 0 8px;
	line-height: 1.3;
}

/* Excerpt */
.cs-service p {
	font-size: 14px;
	color: #475569; /* Gray */
	line-height: 1.5;
	margin: 0;
}

/* 3. Tooltip Button (Attractive Hover Button) */
.cs-service__tooltip {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(15px);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #0f172a;
	padding: 10px 20px;
	border-radius: 30px; /* Pill shape */
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	white-space: nowrap;
}
.cs-service:hover .cs-service__tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
.cs-service__tooltip svg {
	color: #0ea5e9;
	transition: transform 0.3s ease;
}
.cs-service:hover .cs-service__tooltip svg {
	transform: translateX(4px);
}

/* Responsive Adjustments */
@media (max-width: 639px) {
	.cs-service {
		padding: 24px 20px;
		min-height: 200px;
	}
	.cs-service__tooltip {
		bottom: 20px;
		padding: 8px 16px;
		font-size: 13px;
	}
}

/* 1. Background Image Layer */
.cs-service__bg {
	position: absolute;
	inset: 0;
	background-image: var(--service-img);
	background-size: cover;
	background-position: center;
	opacity: 0.25; /* By default image visible */
	transition: opacity 0.4s ease;
	z-index: 1;
}

.cs-service__bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(15, 23, 42, 0.8) 0%,
		rgba(15, 23, 42, 0.4) 100%
	);
	opacity: 0; /* Hidden by default */
	transition: opacity 0.4s ease;
	z-index: 2;
}

.cs-service:hover .cs-service__bg {
	opacity: 1; /* Full image on hover */
}

.cs-service:hover .cs-service__bg-overlay {
	opacity: 1; /* Dark overlay on hover */
}

/* === from template-parts/sections/pricing.php === */
/* ============================================
   PRICING SECTION - FIXED LAYOUT
   ============================================ */
.cs-pricing-modern {
	padding: 100px 20px;
	background: #f8fafc;
}
.cs-pricing-modern .cs-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header - Fixed & Centered */
.cs-pricing-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 60px;
	padding: 0 20px;
}
.cs-pricing-header .cs-kicker {
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
}
.cs-pricing-header h2 {
	font-size: 40px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 16px;
	line-height: 1.2;
}
.cs-pricing-header .cs-lead {
	font-size: 17px;
	color: #475569;
	line-height: 1.6;
	margin: 0;
}

/* Grid - Responsive */
.cs-pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-top: 40px;
}
@media (min-width: 768px) {
	.cs-pricing-grid { 
		grid-template-columns: repeat(2, 1fr); 
	}
}
@media (min-width: 1024px) {
	.cs-pricing-grid { 
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

/* Card Base */
.cs-modern-plan {
	background: #ffffff;
	border-radius: 20px;
	border: 1px solid #e2e8f0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
	height: 100%;
	margin: 0;
}
.cs-modern-plan:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

/* Featured Card (Golden) */
.cs-modern-plan.is-featured {
	border: 2px solid var(--plan-color, #D4AF37);
	box-shadow: 0 10px 30px -10px rgba(212, 175, 55, 0.25);
	transform: scale(1.05);
	z-index: 2;
}
@media (min-width: 1024px) {
	.cs-modern-plan.is-featured:hover {
		transform: scale(1.05) translateY(-8px);
		box-shadow: 0 25px 50px -12px rgba(212, 175, 55, 0.4);
	}
}

/* Card Header */
.cs-modern-plan__header {
	padding: 32px 24px 24px;
	text-align: center;
	background: linear-gradient(135deg, var(--plan-color, #1e3a8a) 0%, color-mix(in srgb, var(--plan-color, #1e3a8a) 80%, #000) 100%);
	color: #ffffff;
	position: relative;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Most Popular Badge - CENTERED */
.cs-modern-badge {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	color: #B8860B;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 16px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15);
	white-space: nowrap;
}

.cs-modern-icon {
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 12px auto 16px;
	backdrop-filter: blur(4px);
}
.cs-modern-icon svg {
	width: 28px;
	height: 28px;
	stroke: #ffffff;
}
.cs-modern-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #ffffff;
}
.cs-modern-billing {
	font-size: 14px;
	opacity: 0.9;
	margin: 0;
	font-weight: 500;
}

/* Card Body */
.cs-modern-plan__body {
	padding: 32px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.cs-modern-price {
	text-align: center;
	margin-bottom: 20px;
}
.cs-modern-currency {
	font-size: 30px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -1px;
}
.cs-modern-desc {
	text-align: center;
	font-size: 14px;
	color: #475569;
	line-height: 1.6;
	padding-bottom: 28px;
	border-bottom: 1px dashed #e2e8f0;
}
.cs-modern-features-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #94a3b8;
	margin-bottom: 20px;
}
.cs-modern-features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	flex: 1;
}
.cs-modern-features li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 14px;
	color: #334155;
	line-height: 1.5;
}
.cs-check-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}
.cs-check-icon svg {
	width: 100%;
	height: 100%;
}

/* CTA Button */
.cs-modern-cta {
	margin-top: auto;
}
.cs-btn.cs-btn--primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 24px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.3s ease;
}
.cs-btn.cs-btn--primary.is-outline {
	background: transparent;
	color: var(--color-secondary);
	border: 2px solid var(--color-secondary);
}
.cs-btn.cs-btn--primary.is-outline:hover {
	background: var(--color-secondary);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px var(--color-secondary);
}
.cs-btn.cs-btn--primary.is-filled {
	background: linear-gradient(135deg, var(--plan-color, #D4AF37) 0%, #B8860B 100%);
	color: #ffffff;
	border: 2px solid transparent;
	box-shadow: 0 8px 20px -6px rgba(212, 175, 55, 0.4);
}
.cs-btn.cs-btn--primary.is-filled:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -6px rgba(212, 175, 55, 0.6);
	filter: brightness(1.05);
}

/* Mobile Adjustments */
@media (max-width: 1023px) {
	.cs-modern-plan.is-featured {
		transform: scale(1);
	}
}
@media (max-width: 767px) {
	.cs-pricing-modern {
		padding: 40px 0px;
	}
	.cs-pricing-header {
		margin-bottom: 30px;
		padding: 0 12px;
	}
	.cs-pricing-header .cs-kicker {
		font-size: 11px;
		letter-spacing: 1px;
		margin-bottom: 8px;
	}
	.cs-pricing-header h2 {
		font-size: 22px;
		line-height: 1.3;
		margin-bottom: 10px;
	}
	.cs-pricing-header .cs-lead {
		font-size: 13px;
		line-height: 1.5;
	}
	.cs-pricing-grid {
		gap: 20px;
		margin-top: 24px;
	}
	.cs-modern-plan {
		border-radius: 16px;
	}
	.cs-modern-plan__header {
		padding: 24px 16px 18px;
		min-height: 110px;
	}
	.cs-modern-plan__body {
		padding: 20px 16px;
	}
	.cs-modern-badge {
		font-size: 9px;
		padding: 4px 10px;
		top: 10px;
		border-radius: 14px;
	}
	.cs-modern-badge svg {
		width: 10px;
		height: 10px;
	}
	.cs-modern-icon {
		width: 40px;
		height: 40px;
		margin: 8px auto 10px;
	}
	.cs-modern-icon svg {
		width: 20px;
		height: 20px;
	}
	.cs-modern-title {
		font-size: 17px;
		margin-bottom: 4px;
	}
	.cs-modern-billing {
		font-size: 12px;
	}
	.cs-modern-currency {
		font-size: 22px;
		letter-spacing: -0.5px;
	}
	.cs-modern-currency small {
		font-size: 14px;
	}
	.cs-modern-desc {
		font-size: 12px;
		line-height: 1.5;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}
	.cs-modern-features-title {
		font-size: 10px;
		margin-bottom: 12px;
	}
	.cs-modern-features li {
		font-size: 12px;
		margin-bottom: 10px;
		gap: 8px;
		line-height: 1.4;
	}
	.cs-check-icon {
		width: 16px;
		height: 16px;
		margin-top: 1px;
	}
	.cs-modern-features {
		margin-bottom: 24px;
	}
	.cs-btn.cs-btn--primary {
		padding: 12px 16px;
		font-size: 13px;
		border-radius: 10px;
	}
	.cs-btn.cs-btn--primary svg {
		width: 14px;
		height: 14px;
	}
}

/* Extra small devices */
@media (max-width: 360px) {
	.cs-pricing-header h2 {
		font-size: 20px;
	}
	.cs-pricing-header .cs-lead {
		font-size: 12px;
	}
	.cs-modern-title {
		font-size: 16px;
	}
	.cs-modern-currency {
		font-size: 20px;
	}
	.cs-modern-desc {
		font-size: 11px;
	}
	.cs-modern-features li {
		font-size: 11px;
	}
	.cs-btn.cs-btn--primary {
		font-size: 12px;
		padding: 10px 14px;
	}
}

/* === from templates/template-gallery.php === */
/* Gallery Items */
.cs-gallery-item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cs-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.cs-gallery-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.cs-gallery-item:hover .cs-gallery-img {
    transform: scale(1.05);
}

/* ============================================ */
/* LIGHTBOX - ONLY IMAGE, NO BOX, NO TEXT       */
/* ============================================ */
.cs-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cs-lightbox.cs-active {
    opacity: 1;
    visibility: visible;
}

/* Blur Background - No Box */
.cs-lightbox__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Image - Direct, No Container Box */
.cs-lightbox__img {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    transition: opacity 0.3s ease;
    animation: csLightboxFade 0.3s ease;
}
@keyframes csLightboxFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.cs-lightbox__img.cs-loading {
    opacity: 0.5;
}

/* Close Button */
.cs-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.cs-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
.cs-lightbox__close svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
}

/* Navigation Arrows */
.cs-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.cs-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}
.cs-lightbox__nav svg {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cs-lightbox__prev {
    left: 20px;
}
.cs-lightbox__next {
    right: 20px;
}

/* Hide arrows when only one image */
.cs-lightbox.cs-single .cs-lightbox__nav {
    display: none !important;
}

/* ============================================ */
/* MOBILE RESPONSIVE                            */
/* ============================================ */
@media (max-width: 767px) {
    .cs-lightbox__close {
        top: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }
    .cs-lightbox__close svg {
        width: 20px;
        height: 20px;
    }
    .cs-lightbox__nav {
        width: 45px;
        height: 45px;
    }
    .cs-lightbox__nav svg {
        width: 22px;
        height: 22px;
    }
    .cs-lightbox__prev {
        left: 10px;
    }
    .cs-lightbox__next {
        right: 10px;
    }
    .cs-lightbox__img {
        max-width: 95vw;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .cs-lightbox__close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }
    .cs-lightbox__nav {
        width: 40px;
        height: 40px;
    }
    .cs-lightbox__nav svg {
        width: 20px;
        height: 20px;
    }
    .cs-lightbox__prev {
        left: 5px;
    }
    .cs-lightbox__next {
        right: 5px;
    }
}

/* === from single-cs_service.php === */
:root{
		--csx-teal:#3E9CB3; --csx-teal-2:#2E8CA3; --csx-teal-3:#177089;
		--csx-navy:#173d78; --csx-ink:#0f2540; --csx-text:#5a6b7b; --csx-bg:#f6f9fb;
		--csx-serif:Georgia,'Times New Roman',serif;
		--csx-r:16px; --csx-shadow:0 10px 40px rgba(15,37,64,.10);
	}
	.csx-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

	/* ============ HERO ============ */
	.csx-hero{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#7ec4d8,#4aa3ba)}
	.csx-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
	.csx-hero .tint{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(23,61,120,.82),rgba(46,140,163,.70) 55%,rgba(62,156,179,.60))}
	.csx-hero .glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);top:-160px;right:-120px;z-index:1;filter:blur(10px)}
	.csx-hero .wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(80px,8vw,220px);font-weight:800;letter-spacing:10px;color:rgb(255 255 255 / 51%);text-transform:uppercase;white-space:nowrap;z-index:2;pointer-events:none;font-family: var(--font-heading);user-select:none}
	.csx-hero .inner{position:relative;z-index:3;text-align:center;padding:90px 24px;width:100%}
	.csx-crumb{display:inline-flex;align-items:center;gap:10px;font-size:13px;padding:8px 20px;border-radius:50px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);margin-bottom:18px}
	.csx-crumb a{color:#fff;text-decoration:none}
	.csx-crumb a:hover{text-decoration:underline}
	.csx-crumb span{opacity:.85;color:#fff}
	.csx-crumb .cur{font-weight:600;opacity:1}
	.csx-hero h1{color:#fff;font-size:clamp(38px,6vw,66px);font-weight:700;letter-spacing:.5px;line-height:1.12;margin:0;text-shadow:0 6px 30px rgba(0,0,0,.35);animation:csxUp .8s cubic-bezier(.2,.7,.3,1) both}
	.csx-hero .line{width:86px;height:4px;margin:22px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 20px rgba(255,255,255,.5)}
	.csx-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;opacity:.85;animation:csxBob 1.8s ease-in-out infinite}
	.csx-scroll svg{width:22px;height:22px}
	@keyframes csxUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
	@keyframes csxBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

	/* ============ SHARED ============ */
	.csx-sec{padding:100px 0;position:relative}
	.csx-head{text-align:center;margin-bottom:56px}
	.csx-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--csx-teal-2);background:rgba(62,156,179,.12);padding:7px 16px;border-radius:50px;margin-bottom:14px}
	.csx-head h2{font-family:var(--csx-serif);color:var(--csx-teal-3);font-size:clamp(28px,4vw,38px);font-weight:600;margin:0 0 14px;line-height:1.25}
	.csx-head p{color:var(--csx-text);font-size:15.5px;max-width:820px;margin:0 auto;line-height:1.85}

	/* ============ INTRO ============ */
	.csx-intro{background:#fff}
	.csx-intro .grid{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;align-items:center}
	.csx-intro .imgbox{position:relative}
	.csx-intro .imgbox::before{content:'';position:absolute;inset:22px -22px -22px 22px;border:3px solid rgba(62,156,179,.35);border-radius:var(--csx-r);z-index:0}
	.csx-intro .imgbox img{position:relative;z-index:1;width:100%;display:block;border-radius:var(--csx-r);box-shadow:var(--csx-shadow)}
	.csx-intro h2{font-family:var(--csx-serif);color:var(--csx-teal-3);font-size:clamp(26px,3.4vw,34px);font-weight:600;margin:0 0 20px;line-height:1.3}
	.csx-intro p{color:var(--csx-text);line-height:1.95;margin:0 0 16px;font-size:15px}
	.csx-intro p:last-child{margin:0}

	/* ============ FEATURES ============ */
	.csx-features{background:var(--csx-bg)}
	.csx-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
	.csx-fcard{position:relative;background:#fff;border-radius:var(--csx-r);padding:42px 30px;text-align:center;box-shadow:var(--csx-shadow);overflow:hidden;transition:transform .35s,box-shadow .35s}
	.csx-fcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--csx-teal),var(--csx-teal-3));transform:scaleX(0);transform-origin:left;transition:transform .35s}
	.csx-fcard:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(15,37,64,.16)}
	.csx-fcard:hover::before{transform:scaleX(1)}
	.csx-ficon{width:70px;height:70px;margin:0 auto 20px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;background:linear-gradient(135deg,var(--csx-teal),var(--csx-teal-3));box-shadow:0 10px 24px rgba(62,156,179,.35);transition:transform .35s}
	.csx-fcard:hover .csx-ficon{transform:scale(1.08) rotate(-4deg)}
	.csx-fcard h3{font-family:var(--csx-serif);color:var(--csx-teal-3);font-size:20px;font-weight:600;margin:0 0 12px}
	.csx-fcard p{color:var(--csx-text);font-size:14px;line-height:1.75;margin:0}

	/* ============ SERVICE CARDS ============ */
	.csx-cards{background:#fff}
	.csx-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
	.csx-card{background:#fff;border-radius:var(--csx-r);overflow:hidden;box-shadow:var(--csx-shadow);transition:transform .35s,box-shadow .35s}
	.csx-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(15,37,64,.16)}
	.csx-card .thumb{position:relative;height:210px;overflow:hidden}
	.csx-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
	.csx-card:hover .thumb img{transform:scale(1.08)}
	.csx-card .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,37,64,.35),transparent 55%);opacity:0;transition:opacity .35s}
	.csx-card:hover .thumb::after{opacity:1}
	.csx-card .body{padding:28px 24px;text-align:center}
	.csx-card .chip{width:46px;height:46px;margin:0 auto 14px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--csx-teal-3);background:rgba(62,156,179,.14)}
	.csx-card h3{font-family:var(--csx-serif);color:var(--csx-teal-3);font-size:20px;font-weight:600;margin:0 0 12px}
	.csx-card p{color:var(--csx-text);font-size:14px;line-height:1.75;margin:0}

	/* ============ KEY POINTS (ZIGZAG) ============ */
	.csx-points{background:var(--csx-bg)}
	.csx-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:42px 56px;align-items:start}
	.csx-pcard{position:relative;border-radius:var(--csx-r);padding:34px 36px}
	.csx-pcard .no{position:absolute;top:-16px;left:26px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--csx-teal),var(--csx-teal-3));box-shadow:0 8px 20px rgba(62,156,179,.4)}
	.csx-pcard h3{font-size:19px;font-weight:700;margin:6px 0 13px;line-height:1.4}
	.csx-pcard p{font-size:14px;line-height:1.85;margin:0 0 10px}
	.csx-pcard ul{margin:0 0 10px;padding:0;list-style:none}
	.csx-pcard li{position:relative;padding-left:24px;margin-bottom:7px;font-size:13.5px;line-height:1.7}
	.csx-pcard li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
	.csx-pcard p:last-child,.csx-pcard ul:last-child{margin-bottom:0}
	.csx-pcard.fill{background:linear-gradient(135deg,var(--csx-teal),var(--csx-teal-3));color:#fff;box-shadow:0 18px 44px rgba(62,156,179,.35)}
	.csx-pcard.fill h3{color:#fff}
	.csx-pcard.plain{background:#fff;box-shadow:var(--csx-shadow)}
	.csx-pcard.plain h3{color:var(--csx-teal-3)}
	.csx-pcard.plain p,.csx-pcard.plain li{color:var(--csx-text)}

	/* ============ WHY CHOOSE ============ */
	.csx-why{background:linear-gradient(135deg,var(--csx-teal),var(--csx-teal-3));color:#fff;text-align:center;position:relative;overflow:hidden}
	.csx-why::before,.csx-why::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
	.csx-why::before{width:420px;height:420px;top:-160px;left:-140px}
	.csx-why::after{width:360px;height:360px;bottom:-140px;right:-120px}
	.csx-why .inner{position:relative;z-index:1}
	.csx-why h2{font-size:clamp(28px,4vw,38px);font-weight:700;margin:0 0 22px;color:#fff}
	.csx-why p{max-width:900px;margin:0 auto 15px;font-size:15.5px;line-height:1.95;color:rgba(255,255,255,.96)}
	.csx-why p:last-child{margin:0}

	/* ============ COMPARISON ============ */
	.csx-compare{background:var(--csx-bg)}
	.csx-cmpwrap{background:#eef2f5;border-radius:20px;padding:32px;max-width:1040px;margin:0 auto}
	.csx-cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
	.csx-cmp{background:#fff;border-radius:var(--csx-r);padding:32px 34px;box-shadow:var(--csx-shadow);border-top:5px solid var(--csx-teal)}
	.csx-cmp:last-child{border-top-color:var(--csx-navy)}
	.csx-cmp h3{color:var(--csx-teal-3);font-size:19px;font-weight:700;margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid #e6ebef}
	.csx-cmp ul{list-style:none;margin:0;padding:0}
	.csx-cmp li{position:relative;padding-left:28px;margin-bottom:11px;font-size:14px;color:var(--csx-text);line-height:1.6}
	.csx-cmp li::before{content:'✓';position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:rgba(62,156,179,.15);color:var(--csx-teal-3);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}

	/* ============ FAQ ============ */
	.csx-faq{background:#fff}
	.csx-faqlist{max-width:1000px;margin:0 auto}
	.csx-fitem{margin-bottom:16px}
	.csx-fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 28px;background:#fff;border:1px solid #e6ebef;border-radius:12px;box-shadow:0 4px 16px rgba(15,37,64,.06);cursor:pointer;text-align:left;font-size:15.5px;font-weight:700;color:var(--csx-ink);font-family:inherit;transition:all .25s}
	.csx-fq:hover{border-color:var(--csx-teal);box-shadow:0 8px 24px rgba(62,156,179,.15)}
	.csx-fico{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:rgba(62,156,179,.12);color:var(--csx-teal-3);display:flex;align-items:center;justify-content:center;transition:transform .3s,background .3s,color .3s}
	.csx-fico svg{width:16px;height:16px}
	.csx-fitem.open .csx-fico{transform:rotate(180deg);background:var(--csx-teal-3);color:#fff}
	.csx-fa{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
	.csx-fa-inner{background:linear-gradient(135deg,var(--csx-teal-3),var(--csx-teal-2));color:#fff;margin:10px 44px 0;padding:26px 38px;border-radius:12px;font-size:14.5px;line-height:1.9;box-shadow:0 12px 30px rgba(23,112,137,.3)}
	.csx-fa-inner p{margin:0 0 10px}
	.csx-fa-inner p:last-child{margin:0}

	/* ============ PRICING ============ */
	.csx-pricing{background:var(--csx-bg);border-top:1px solid #e6ebef}

	/* ============ BAND / CTA ============ */
	.csx-band{background:linear-gradient(135deg,var(--csx-teal),var(--csx-teal-3));color:#fff;position:relative;overflow:hidden}
	.csx-band .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
	.csx-band p{color:rgba(255,255,255,.97);line-height:1.95;margin:0 0 16px;font-size:15px}
	.csx-band p:last-child{margin:0}
	.csx-band img{width:100%;display:block;border-radius:var(--csx-r);box-shadow:0 24px 60px rgba(0,0,0,.3)}
	.csx-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:#fff;color:var(--csx-teal-3);padding:14px 30px;border-radius:50px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:transform .3s,box-shadow .3s}
	.csx-btn svg{width:18px;height:18px;transition:transform .3s}
	.csx-btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
	.csx-btn:hover svg{transform:translateX(4px)}

	/* ============ CONTENT ============ */
	.csx-content{background:#fff}
	.csx-content .entry{color:var(--csx-text);line-height:1.95;font-size:15.5px;max-width:860px;margin:0 auto}
	.csx-content .entry h2,.csx-content .entry h3{font-family:var(--csx-serif);color:var(--csx-teal-3);margin-top:36px}

	/* ============ REVEAL ============ */
	[data-csx]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
	[data-csx].on{opacity:1;transform:translateY(0)}

	/* ============ RESPONSIVE ============ */
	@media(max-width:1024px){
		.csx-fgrid,.csx-cgrid{grid-template-columns:repeat(2,1fr)}
		.csx-pgrid,.csx-cmpgrid,.csx-intro .grid,.csx-band .grid{grid-template-columns:1fr;gap:36px}
		.csx-sec{padding:80px 0}
	}
	@media(max-width:768px){
		.csx-fgrid,.csx-cgrid{grid-template-columns:1fr}
		.csx-hero{min-height:380px}
		.csx-fa-inner{margin:10px 12px 0;padding:20px 22px}
		.csx-cmpwrap{padding:18px}
		.csx-sec{padding:64px 0}
		.csx-intro .imgbox::before{display:none}
		.csx-hero .wm{font-size: clamp(40px, 3vw, 120px)!important;}
	}

/* === from templates/template-casestudies.php === */
/* ===== Intro Section ===== */
.cs-intro-section {
    padding: 60px 0;
    background: var(--color-secondary);
    color: #fff;
}
.cs-intro-content p {
    font-size: 18px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0.95;
}

/* ===== Premium Case Study Layout ===== */
.cs-case-premium {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 10px 40px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

/* Alternating Backgrounds - Only using --color-secondary with opacity */
.cs-case-premium:nth-child(odd) {
    background: #ffffff;
}
.cs-case-premium:nth-child(even) {
    background: rgba(0, 0, 0, 0.03);
}

/* Reverse Layout for Even Rows */
.cs-case--reverse {
    direction: rtl;
}
.cs-case--reverse > * {
    direction: ltr;
}

/* ===== Number Badge ===== */
.cs-case-number {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 80px;
    height: 80px;
    background: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 10;
    animation: pulse 2s infinite;
}
.cs-case--reverse .cs-case-number {
    right: auto;
    left: 40px;
}
.cs-case-number span {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== Media Column ===== */
.cs-case__media {
    position: relative;
}
.cs-media-wrapper {
    position: relative;
    padding: 20px;
}
.cs-media-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--color-secondary);
    border-radius: 20px;
    transform: translate(20px, 20px);
    z-index: 0;
    opacity: 0.3;
}
.cs-case__gallery {
    display: grid;
    gap: 20px;
    position: relative;
    z-index: 1;
}
.cs-case__gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-case__gallery-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.cs-gallery-main {
    grid-column: 1 / -1;
}
.cs-gallery-thumb {
    grid-column: span 1;
}
.cs-case__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s;
}
.cs-case__gallery-item:hover img {
    transform: scale(1.1);
}
.cs-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.cs-case__gallery-item:hover .cs-image-overlay {
    opacity: 1;
}
.cs-case__gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: #fff;
    padding: 15px;
    font-size: 14px;
    font-weight: 500;
    transform: translateY(100%);
    transition: transform 0.3s;
}
.cs-case__gallery-item:hover .cs-case__gallery-caption {
    transform: translateY(0);
}
.cs-case__featured-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.cs-case__featured {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s;
}
.cs-case__featured-wrap:hover .cs-case__featured {
    transform: scale(1.05);
}

/* ===== Content Column ===== */
.cs-case__content {
    position: relative;
    z-index: 2;
}
.cs-content-inner {
    background: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
}

/* ===== Header ===== */
.cs-case__header {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-secondary), transparent) 1;
}
.cs-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-secondary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    animation: slideIn 0.6s ease-out;
}
.cs-badge-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1.5s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cs-case__title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-secondary);
    line-height: 1.1;
}
.cs-case-meta {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}
.cs-meta-item {
    font-size: 15px;
    color: #64748b;
}
.cs-meta-item strong {
    color: #0f172a;
}

/* ===== Body Sections ===== */
.cs-case__body {
    margin-top: 30px;
}
.cs-case__services, .cs-case__challenge, .cs-case__solution, .cs-case__results {
    margin-bottom: 30px;
    padding: 25px;
    background: #f8fafc;
    border-radius: 16px;
    border-left: 4px solid var(--color-secondary);
    transition: all 0.3s;
}
.cs-case__services:hover, .cs-case__challenge:hover, .cs-case__solution:hover, .cs-case__results:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.cs-case__services h3, .cs-case__challenge h3, .cs-case__solution h3, .cs-case__results h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 15px;
}
.cs-case__services p, .cs-case__challenge p, .cs-case__solution p {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
}

/* ===== Results List ===== */
.cs-case__results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-case__results li {
    padding: 15px 0 15px 45px;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.3s;
}
.cs-case__results li:last-child {
    border-bottom: none;
}
.cs-case__results li:hover {
    padding-left: 50px;
    color: #0f172a;
}
.cs-case__results li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    background: var(--color-secondary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ===== Premium CTA Button ===== */
.cs-case__cta {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e2e8f0;
}
.cs-btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    background: var(--color-secondary);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}
.cs-btn-premium:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}
.cs-btn-premium:hover:before {
    left: 100%;
}
.cs-btn-premium:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
.cs-btn-arrow {
    font-size: 20px;
    transition: transform 0.3s;
}
.cs-btn-premium:hover .cs-btn-arrow {
    transform: translateX(5px);
}

/* ===== Scroll Animation ===== */
.cs-case-premium {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.cs-case-premium:nth-child(1) { animation-delay: 0.1s; }
.cs-case-premium:nth-child(2) { animation-delay: 0.2s; }
.cs-case-premium:nth-child(3) { animation-delay: 0.3s; }
.cs-case-premium:nth-child(4) { animation-delay: 0.4s; }
.cs-case-premium:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
    .cs-case-premium {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 20px;
    }
    .cs-case--reverse {
        direction: ltr;
    }
    .cs-case__title {
        font-size: 32px;
    }
    .cs-content-inner {
        padding: 30px;
    }
    .cs-case-number {
        width: 60px;
        height: 60px;
        top: 20px;
        right: 20px;
    }
    .cs-case--reverse .cs-case-number {
        right: auto;
        left: 20px;
    }
    .cs-case-number span {
        font-size: 22px;
    }
}
@media (max-width: 640px) {
    .cs-case-premium {
        padding: 40px 15px;
    }
    .cs-case__title {
        font-size: 26px;
    }
    .cs-content-inner {
        padding: 20px;
    }
    .cs-case__services h3, .cs-case__challenge h3, .cs-case__solution h3, .cs-case__results h3 {
        font-size: 18px;
    }
    .cs-btn-premium {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* === from templates/template-about.php === */
/* ===== SCOPED TO .cs-about-page (header-safe) ===== */
.cs-about-page { font-family: inherit; color: #333; }
.cs-about-page .cs-section-pad { padding: 80px 20px; }
.cs-about-page .cs-container { max-width: 1200px; margin: 0 auto; }

/* Inside Circle Six */
.cs-about-page .cs-inside-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; align-items: start; }
.cs-about-page .cs-inside-main h2 { font-size: 32px; color: #0f172a; margin-bottom: 20px; }
.cs-about-page .cs-inside-main p { font-size: 15px; line-height: 1.7; color: #475569; margin-bottom: 15px; }
.cs-about-page .cs-inside-box { padding: 30px; border-radius: 12px; font-size: 14px; line-height: 1.6; }
.cs-about-page .cs-inside-box.white { background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.cs-about-page .cs-inside-box.teal { background: #3a8ea8; color: #fff; }

/* Our Foundation */
.cs-about-page .cs-foundation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cs-about-page .cs-video-wrap { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.cs-about-page .cs-video-wrap video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cs-about-page .cs-foundation-text h2 { font-size: 36px; color: #0f172a; margin-bottom: 20px; }
.cs-about-page .cs-foundation-text ul { list-style: none; padding: 0; margin: 0; }
.cs-about-page .cs-foundation-text li { font-size: 15px; line-height: 1.7; color: #475569; margin-bottom: 12px; padding-left: 20px; position: relative; }
.cs-about-page .cs-foundation-text li::before { content: '•'; color: #3a8ea8; font-weight: bold; position: absolute; left: 0; }

/* What Sets Us Apart */
.cs-about-page .cs-apart-section { background: #3a8ea8; color: #fff; }
.cs-about-page .cs-apart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.cs-about-page .cs-apart-text h2 { font-size: 32px; margin-bottom: 24px; }
.cs-about-page .cs-apart-text p { font-size: 15px; line-height: 1.7; margin-bottom: 16px; opacity: 0.95; }
.cs-about-page .cs-apart-img img { width: 100%; border-radius: 12px;}

/* Our Philosophy */
.cs-about-page .cs-philo-section { text-align: center; }
.cs-about-page .cs-philo-section h2 { font-size: 36px; color: #0f172a; margin-bottom: 40px; }
.cs-about-page .cs-philo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.cs-about-page .cs-philo-card { background: #3a8ea8; color: #fff; padding: 40px 30px; border-radius: 16px; text-align: center; position: relative; }
.cs-about-page .cs-philo-icon { display: flex; justify-content: center; margin-bottom: 16px; color: #fff; }
.cs-about-page .cs-philo-icon svg { width: 42px; height: 42px; }
.cs-about-page .cs-philo-card h3 { font-size: 22px; margin-bottom: 16px; }
.cs-about-page .cs-philo-card p { font-size: 14px; line-height: 1.6; opacity: 0.9; margin-bottom: 24px; }
.cs-about-page .cs-philo-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; color: #3a8ea8; border-radius: 50%; font-weight: 700; font-size: 18px; }

/* Our Expertise */
.cs-about-page .cs-exp-section { background: #3a8ea8; color: #fff; text-align: center; }
.cs-about-page .cs-exp-section h2 { font-size: 36px; margin-bottom: 10px; }
.cs-about-page .cs-exp-section .sub { font-size: 16px; opacity: 0.9; margin-bottom: 40px; }
.cs-about-page .cs-exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto 30px; }
.cs-about-page .cs-exp-item { background: #fff; color: #0f172a; padding: 24px 15px; border-radius: 10px; text-align: center; transition: transform 0.3s; }
.cs-about-page .cs-exp-item:hover { transform: translateY(-5px); }
.cs-about-page .cs-exp-icon { margin-bottom: 10px; display: flex; justify-content: center; color: #3a8ea8; }
.cs-about-page .cs-exp-icon img { max-width: 48px; max-height: 48px; }
.cs-about-page .cs-exp-icon svg { width: 42px; height: 42px; }
.cs-about-page .cs-exp-name { font-size: 14px; font-weight: 600; }
.cs-about-page .cs-exp-footer { font-size: 14px; opacity: 0.9; max-width: 600px; margin: 0 auto 24px; line-height: 1.6; }
.cs-about-page .cs-exp-btn { display: inline-block; background: #fff; color: #3a8ea8; padding: 12px 32px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background 0.3s; }
.cs-about-page .cs-exp-btn:hover { background: #f1f5f9; }

/* Responsive */
@media (max-width: 991px) {
    .cs-about-page .cs-inside-grid, 
    .cs-about-page .cs-foundation-grid, 
    .cs-about-page .cs-apart-grid, 
    .cs-about-page .cs-philo-grid { grid-template-columns: 1fr; }
    .cs-about-page .cs-exp-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-about-page .cs-section-pad { padding: 60px 20px; }
}
@media (max-width: 767px) {
    .cs-about-page .cs-exp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .cs-about-page .cs-inside-main h2, 
    .cs-about-page .cs-foundation-text h2, 
    .cs-about-page .cs-apart-text h2, 
    .cs-about-page .cs-philo-section h2, 
    .cs-about-page .cs-exp-section h2 { font-size: 28px; }
}

/* === from templates/template-circlestudio.php === */
/* ===== BASE ===== */
    .cs-studio-page { font-family: system-ui, -apple-system, sans-serif; }
    .cs-studio-page .cs-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .cs-studio-page .cs-text-center { text-align: center; }
    .cs-studio-page .cs-mb-large { margin-bottom: 50px; }

    /* ===== HERO SECTION ===== */
    .cs-hero-section {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #000;
        height: 600px;
    }
    .cs-hero-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cs-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.4) 100%);
        pointer-events: none;
    }
    @media (max-width: 768px) {
        .cs-hero-section { height: 350px; }
    }

    /* ===== ABOUT SECTION ===== */
    .cs-about-section {
        padding: 80px 0;
        background: #fff;
    }
    .cs-about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
    }
    .cs-section-title {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--color-secondary, #1e3a8a);
    }
    .cs-about-text {
        font-size: 15px;
        line-height: 1.7;
        color: #475569;
        margin-bottom: 16px;
    }
    .cs-about-video-wrap {
        background: #000;
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 16/9;
    }
    .cs-about-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cs-video-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #fff;
        font-size: 16px;
    }
    @media (max-width: 768px) {
        .cs-about-grid { grid-template-columns: 1fr; gap: 30px; }
        .cs-section-title { font-size: 28px; }
        .cs-about-section { padding: 50px 0; }
    }

    /* ===== CARDS SECTION WITH ICONS ===== */
    .cs-cards-section {
        padding: 80px 0;
        background: var(--color-secondary, #1e3a8a);
    }
    .cs-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .cs-card {
        background: #fff;
        padding: 50px 30px;
        border-radius: 12px;
        text-align: center;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .cs-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }
    .cs-card-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        border-radius: 50%;
        color: #fff;
    }
    .cs-card-icon svg {
        width: 40px;
        height: 40px;
        stroke: currentColor;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .cs-card-title {
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 15px;
    }
    .cs-card-text {
        font-size: 14px;
        line-height: 1.7;
        color: #64748b;
    }
    @media (max-width: 768px) {
        .cs-cards-grid { grid-template-columns: 1fr; }
        .cs-cards-section { padding: 50px 0; }
        .cs-card { padding: 40px 25px; }
        .cs-card-icon {
            width: 70px;
            height: 70px;
        }
        .cs-card-icon svg {
            width: 35px;
            height: 35px;
        }
        .cs-card-title { font-size: 18px; }
    }

    /* ===== BRAND SECTION ===== */
    .cs-brand-section {
        padding: 80px 0;
        background: #fff;
    }
    .cs-brand-content {
        max-width: 900px;
        margin: 0 auto;
        text-align: left;
    }
    .cs-brand-text {
        font-size: 15px;
        line-height: 1.7;
        color: #475569;
        margin-bottom: 20px;
    }
    @media (max-width: 768px) {
        .cs-brand-section { padding: 50px 0; }
    }

    /* ===== MATTERS SECTION ===== */
    .cs-matters-section {
        padding: 60px 0;
        background: var(--color-secondary, #1e3a8a);
        color: #fff;
    }
    .cs-matters-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .cs-matters-text {
        font-size: 15px;
        line-height: 1.7;
        max-width: 900px;
        margin: 0 auto;
        opacity: 0.95;
    }
    @media (max-width: 768px) {
        .cs-matters-section { padding: 40px 0; }
        .cs-matters-title { font-size: 22px; }
    }

    /* ===== CHOOSE SECTION ===== */
    .cs-choose-section {
        padding: 80px 0;
        background: #fff;
    }
    .cs-title-dark { color: #0f172a; }
    .cs-choose-text {
        font-size: 15px;
        line-height: 1.7;
        color: #475569;
        max-width: 900px;
        margin: 0 auto 16px;
    }
    @media (max-width: 768px) {
        .cs-choose-section { padding: 50px 0; }
    }

    /* ===== WORKS CAROUSEL ===== */
    .cs-works-section {
        padding: 80px 0;
        background: #f8fafc;
    }
    .cs-carousel-wrapper {
        width: 100%;
        overflow: hidden;
        position: relative;
        mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
    }
    .cs-carousel-track {
        display: flex;
        gap: 24px;
        animation: cs-scroll 35s linear infinite;
        width: max-content;
    }
    .cs-carousel-track:hover {
        animation-play-state: paused;
    }
    .cs-work-item {
        flex: 0 0 320px;
        transition: transform 0.3s;
    }
    .cs-work-item:hover { transform: scale(1.05); }
    .cs-work-image {
        width: 100%;
        height: 280px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .cs-work-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .cs-work-title {
        margin-top: 12px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
    }
    @keyframes cs-scroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    @media (max-width: 768px) {
        .cs-works-section { padding: 50px 0; }
        .cs-work-item { flex: 0 0 260px; }
        .cs-work-image { height: 200px; }
        .cs-carousel-track { gap: 16px; }
    }

/* === from templates/template-software.php === */
.sw-container{max-width:1200px;margin:0 auto;padding:0 20px}.sw-narrow{max-width:900px}
.sw-page-hero{position:relative;min-height:350px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7dd3fc 0%,#0369a1 100%);overflow:hidden;text-align:center}
.sw-hero-bg-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:180px;font-weight:900;color:rgba(255,255,255,0.15);letter-spacing:10px;z-index:1;pointer-events:none;white-space:nowrap}
.sw-breadcrumb{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;font-size:14px}
.sw-breadcrumb a{color:#0f172a;text-decoration:none}.sw-breadcrumb-separator{color:#64748b}.sw-breadcrumb-current{color:#0f172a;font-weight:600}
.sw-page-title{position:relative;z-index:2;font-size:56px;font-weight:900;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,0.2);margin:0}
.sw-section-title{font-size:32px;font-weight:700;color:var(--color-secondary);margin-bottom:20px;text-align:center}
.sw-why-divider{width:80px;height:4px;background:var(--color-secondary);margin:0 auto 50px;border-radius:2px}
.sw-intro{padding:80px 0;background:#fff}.sw-intro-content p{font-size:16px;line-height:1.8;color:#475569;margin-bottom:20px;text-align:center}
.sw-why{padding:80px 0;background:#f8fafc}
.sw-why-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto}
.sw-why-column{display:flex;flex-direction:column;gap:25px}
.sw-why-item{display:flex;align-items:center;gap:20px;padding:20px 25px;background:#fff;border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,0.05);transition:all 0.3s}
.sw-why-item:hover{transform:translateX(8px);box-shadow:0 8px 25px rgba(0,0,0,0.1)}
.sw-why-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sw-icon-svg{width:32px;height:32px}.sw-icon-svg svg{width:100%;height:100%}
.sw-why-center{display:flex;justify-content:center}.sw-phone{max-width:320px;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.2))}
.sw-benefits{padding:80px 0;background:#fff}.sw-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
.sw-benefit-card{padding:40px 35px;border-radius:20px;color:#fff;transition:all 0.4s;position:relative;overflow:hidden}
.sw-benefit-card:hover{transform:translateY(-15px);box-shadow:0 20px 40px rgba(0,0,0,0.15)}
.sw-benefit-red{background:linear-gradient(135deg,#ef4444 0%,#f87171 100%)}.sw-benefit-purple{background:linear-gradient(135deg,#8b5cf6 0%,#a78bfa 100%)}.sw-benefit-teal{background:linear-gradient(135deg,#14b8a6 0%,#5eead4 100%)}
.sw-benefit-card h3{font-size:22px;font-weight:700;margin-bottom:15px}.sw-benefit-card p{font-size:15px;line-height:1.7;opacity:0.95;margin-bottom:20px}
.sw-benefit-link{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.sw-benefit-link:hover{gap:12px}
.sw-keyfeatures{padding:80px 0;background:#f8fafc}.sw-keyfeatures-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:25px;margin-top:40px}
.sw-keyfeat-card{background:#fff;padding:35px 25px;border-radius:16px;text-align:center;border:2px solid #e2e8f0;transition:all 0.3s;position:relative;overflow:hidden}
.sw-keyfeat-card:hover{border-color:var(--color-secondary);transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,0.1)}
.sw-keyfeat-icon{width:70px;height:70px;margin:0 auto 20px;background:linear-gradient(135deg,#667eea 0%,#163a7a 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:15px}
.sw-keyfeat-icon svg{width:100%;height:100%;stroke:#fff;stroke-width:2}
.sw-keyfeat-card h4{font-size:15px;font-weight:700;color:#0f172a;line-height:1.4}
.sw-conclusion{padding:80px 0;background:var(--color-secondary);color:#fff;text-align:center}
.sw-conclusion-title{font-size:36px;font-weight:800;margin-bottom:30px;color:#fff}
.sw-conclusion-content p{font-size:16px;line-height:1.8;opacity:0.95;margin-bottom:15px;max-width:800px;margin:0 auto}
@media(max-width:968px){.sw-hero-bg-text{font-size:120px}.sw-page-title{font-size:40px}.sw-why-layout{grid-template-columns:1fr}.sw-why-center{order:-1}.sw-benefits-grid,.sw-keyfeatures-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sw-page-hero{min-height:250px}.sw-hero-bg-text{font-size:80px}.sw-page-title{font-size:32px}.sw-keyfeatures-grid{grid-template-columns:1fr}.sw-why-item{padding:15px}}

/* === from home.php === */
:root{--pg-teal:#3E9CB3;--pg-teal2:#2E8CA3;--pg-teal3:#177089;--pg-text:#5a6b7b;--pg-bg:#f6f9fb}
.pg-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pg-hero{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(120deg,#9ad3e0 0%,#57aec4 45%,#2f8ca6 100%)}
.pg-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(70px,13vw,190px);font-weight:800;letter-spacing:8px;color:rgba(23,80,120,.28);text-transform:uppercase;white-space:nowrap;pointer-events:none;user-select:none;line-height:1}
.pg-inner{position:relative;z-index:2;text-align:center;padding:70px 24px;width:100%}
.pg-crumb{display:inline-flex;gap:10px;align-items:center;font-size:14px;margin:0 0 10px}
.pg-crumb a{color:#fff;text-decoration:none}
.pg-crumb a:hover{text-decoration:underline}
.pg-crumb .sep{color:rgba(255,255,255,.75)}
.pg-crumb .cur{color:#12314f;font-weight:600}
.pg-hero h1{color:#fff;font-size:clamp(38px,6vw,64px);font-weight:800;margin:0;letter-spacing:.5px;line-height:1.15;text-shadow:0 3px 18px rgba(0,0,0,.18)}
.pg-hero p.sub{max-width:640px;margin:14px auto 0;font-size:15.5px;color:rgba(255,255,255,.95)}

.pg-list{padding:70px 0 90px;background:var(--pg-bg)}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pg-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(15,37,64,.09);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.pg-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(15,37,64,.15)}
.pg-thumb{position:relative;display:block;height:210px;overflow:hidden;background:#dfe9ee}
.pg-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pg-card:hover .pg-thumb img{transform:scale(1.08)}
.pg-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff;background:linear-gradient(135deg,var(--pg-teal),var(--pg-teal3))}
.pg-cat{position:absolute;top:14px;left:14px;background:var(--pg-teal3);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 14px;border-radius:50px;text-decoration:none}
.pg-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.pg-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#8a97a5;margin-bottom:12px}
.pg-body h3{font-family:Georgia,serif;font-size:20px;line-height:1.35;font-weight:600;color:var(--pg-teal3);margin:0 0 12px}
.pg-body h3 a{color:inherit;text-decoration:none}
.pg-body h3 a:hover{color:var(--pg-teal)}
.pg-body p{color:var(--pg-text);font-size:14px;line-height:1.7;margin:0 0 18px}
.pg-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--pg-teal2);font-weight:700;font-size:14px;text-decoration:none}
.pg-more svg{width:16px;height:16px;transition:transform .3s}
.pg-more:hover svg{transform:translateX(4px)}
.pg-pag{margin-top:50px;text-align:center}
.pg-pag .nav-links{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pg-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:10px;background:#fff;color:var(--pg-teal3);font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(15,37,64,.08)}
.pg-pag .page-numbers.current,.pg-pag .page-numbers:hover{background:var(--pg-teal3);color:#fff}
.pg-empty{text-align:center;padding:70px 20px;background:#fff;border-radius:16px;color:#8a97a5}
@media(max-width:1024px){.pg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.pg-grid{grid-template-columns:1fr}}

/* === from archive-cs_blog.php === */
:root{--bg-teal:#3E9CB3;--bg-teal2:#2E8CA3;--bg-teal3:#177089;--bg-ink:#0f2540;--bg-text:#5a6b7b;--bg-bg:#f6f9fb}
.bgx-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.bgx-hero{position:relative;padding:90px 24px 70px;text-align:center;color:#fff;background:linear-gradient(135deg,#173d78,#2E8CA3 60%,#3E9CB3);overflow:hidden}
.bgx-hero::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.08);top:-160px;right:-120px}
.bgx-hero .crumb{font-size:13px;opacity:.85;margin-bottom:12px}
.bgx-hero .crumb a{color:#fff;text-decoration:none}
.bgx-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;margin:0 0 12px}
.bgx-hero p{max-width:640px;margin:0 auto;font-size:15.5px;opacity:.92}
.bgx-list{padding:70px 0 90px;background:var(--bg-bg)}
.bgx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.bgx-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(15,37,64,.09);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.bgx-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(15,37,64,.15)}
.bgx-thumb{position:relative;display:block;height:210px;overflow:hidden;background:#dfe9ee}
.bgx-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bgx-card:hover .bgx-thumb img{transform:scale(1.08)}
.bgx-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff;background:linear-gradient(135deg,var(--bg-teal),var(--bg-teal3))}
.bgx-badge{position:absolute;top:14px;left:14px;background:var(--bg-teal3);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:6px 14px;border-radius:50px}
.bgx-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.bgx-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#8a97a5;margin-bottom:12px}
.bgx-body h3{font-family:Georgia,serif;font-size:20px;line-height:1.35;font-weight:600;color:var(--bg-teal3);margin:0 0 12px}
.bgx-body h3 a{color:inherit;text-decoration:none}
.bgx-body h3 a:hover{color:var(--bg-teal)}
.bgx-body p{color:var(--bg-text);font-size:14px;line-height:1.7;margin:0 0 18px}
.bgx-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--bg-teal2);font-weight:700;font-size:14px;text-decoration:none}
.bgx-more svg{width:16px;height:16px;transition:transform .3s}
.bgx-more:hover svg{transform:translateX(4px)}
.bgx-pag{margin-top:50px;text-align:center}
.bgx-pag .nav-links{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bgx-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:10px;background:#fff;color:var(--bg-teal3);font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(15,37,64,.08)}
.bgx-pag .page-numbers.current,.bgx-pag .page-numbers:hover{background:var(--bg-teal3);color:#fff}
.bgx-empty{text-align:center;padding:70px 20px;background:#fff;border-radius:16px;color:#8a97a5}
@media(max-width:1024px){.bgx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.bgx-grid{grid-template-columns:1fr}}