/*
 * Rizve OS — Service Pages CSS
 * Styles for: archive-service.php, single-service.php, and all
 * template-parts/sections/service-*.php sections.
 */

/* ============================================================
   ARCHIVE — Hero
   ============================================================ */

.rj-service-archive-hero {
	padding-block: clamp(60px, 8vw, 120px) clamp(40px, 5vw, 64px);
	text-align: center;
}

.rj-service-archive-hero__inner {
	max-width: 720px;
	margin-inline: auto;
}

.rj-service-archive-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin-block: 12px 16px;
	color: var(--rj-text-primary);
}

.rj-service-archive-hero__sub {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	color: var(--rj-text-secondary);
	line-height: 1.7;
	margin-bottom: 32px;
}

.rj-service-archive-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ============================================================
   ARCHIVE — Services Grid
   ============================================================ */

.rj-archive-services-section {
	padding-block-start: 0;
}

.rj-archive-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.5vw, 20px);
}

/* ============================================================
   SERVICE CARD (archive)
   ============================================================ */

.rj-service-card-full {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	padding: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}

.rj-service-card-full__thumb {
	position: relative;
	height: 180px;
	overflow: hidden;
	background: var(--rj-bg-2);
}

.rj-service-card-full__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.rj-service-card-full:hover .rj-service-card-full__thumb-img {
	transform: scale(1.04);
}

.rj-service-card-full__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	margin: 24px 24px 0;
	background: rgba(var(--rj-lime-rgb, 200, 255, 61), 0.12);
	color: var(--rj-lime);
	flex-shrink: 0;
}

.rj-service-card-full__icon--cyan {
	background: rgba(var(--rj-cyan-rgb, 46, 230, 224), 0.12);
	color: var(--rj-cyan);
}

.rj-service-card-full__icon--violet {
	background: rgba(167, 139, 250, 0.12);
	color: var(--rj-violet);
}

.rj-service-card-full__body {
	padding: 20px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rj-service-card-full__title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--rj-text-primary);
	line-height: 1.35;
	margin: 0;
}

.rj-service-card-full__excerpt {
	font-size: 0.875rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

.rj-service-card-full__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
}

.rj-service-card-full__cta {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 24px;
	border-top: 1px solid var(--rj-border, rgba(255,255,255,0.06));
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rj-lime);
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
}

.rj-service-card-full__cta svg {
	transition: transform 0.2s ease;
}

.rj-service-card-full:hover .rj-service-card-full__cta {
	color: var(--rj-lime);
}

.rj-service-card-full:hover .rj-service-card-full__cta svg {
	transform: translateX(3px);
}

/* ============================================================
   ARCHIVE — Bottom CTA
   ============================================================ */

.rj-archive-cta-section {
	padding-block-start: 0;
}

.rj-archive-cta {
	position: relative;
	text-align: center;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px);
	border-radius: 24px;
	overflow: hidden;
}

.rj-archive-cta__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(200,255,61,0.1) 0%, transparent 70%);
	pointer-events: none;
}

.rj-archive-cta__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin-bottom: 12px;
	color: var(--rj-text-primary);
}

.rj-archive-cta__sub {
	font-size: 1rem;
	color: var(--rj-text-secondary);
	line-height: 1.7;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 28px;
}

.rj-archive-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 16px;
}

.rj-archive-cta__note {
	font-size: 0.8125rem;
	color: var(--rj-text-muted, rgba(255,255,255,0.4));
}

/* ============================================================
   SINGLE — SERVICE HERO
   ============================================================ */

.rj-service-hero {
	padding-block: clamp(60px, 8vw, 100px) clamp(40px, 5vw, 60px);
}

.rj-service-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
	margin-bottom: 48px;
}

.rj-service-hero__title {
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin-block: 12px 16px;
	color: var(--rj-text-primary);
}

.rj-service-hero__tagline {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	color: var(--rj-text-secondary);
	line-height: 1.65;
	margin-bottom: 20px;
}

.rj-service-hero__chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.rj-service-hero__chips .rj-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.rj-service-hero__best-for {
	font-size: 0.875rem;
	color: var(--rj-text-secondary);
	margin-bottom: 28px;
	line-height: 1.6;
}

.rj-service-hero__best-for strong {
	color: var(--rj-text-primary);
}

.rj-service-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Visual column */
.rj-service-hero__img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	object-fit: cover;
	display: block;
}

.rj-service-hero__mockup {
	position: relative;
	border-radius: 20px;
	padding: clamp(24px, 3vw, 36px);
	overflow: hidden;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

.rj-service-hero__mockup-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(200,255,61,0.12) 0%, transparent 70%);
	pointer-events: none;
}

.rj-service-hero__mockup-icon {
	color: var(--rj-lime);
	opacity: 0.85;
}

.rj-service-hero__mockup-stats {
	display: flex;
	gap: 32px;
	justify-content: center;
}

.rj-service-hero__mockup-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rj-service-hero__mockup-val {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rj-lime);
	line-height: 1;
}

.rj-service-hero__mockup-label {
	font-size: 0.75rem;
	color: var(--rj-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rj-service-hero__mockup-lines {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rj-service-hero__mockup-line {
	height: 8px;
	border-radius: 4px;
	background: var(--rj-border, rgba(255,255,255,0.08));
	animation: rj-shimmer 2s ease-in-out infinite;
}

.rj-service-hero__mockup-line--w80 { width: 80%; }
.rj-service-hero__mockup-line--w60 { width: 60%; }
.rj-service-hero__mockup-line--w40 { width: 40%; }

@keyframes rj-shimmer {
	0%, 100% { opacity: 0.4; }
	50%       { opacity: 0.8; }
}

/* Who This Is For */
.rj-service-who {
	border-top: 1px solid var(--rj-border, rgba(255,255,255,0.06));
	padding-top: 36px;
}

.rj-service-who__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rj-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.rj-service-who__label svg {
	color: var(--rj-lime);
}

.rj-service-who__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.rj-service-who__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 0.875rem;
	color: var(--rj-text-secondary);
	line-height: 1.5;
}

.rj-service-who__check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(200,255,61,0.12);
	color: var(--rj-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

/* ============================================================
   SINGLE — PROBLEMS
   ============================================================ */

.rj-service-problems {
	background: var(--rj-bg-1);
}

.rj-problems-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.5vw, 16px);
	margin-bottom: 36px;
}

.rj-problem-item {
	display: flex;
	gap: 14px;
	padding: 20px;
	border-radius: 14px;
}

.rj-problem-item__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(248,113,113,0.12);
	color: #f87171;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rj-problem-item__content {
	flex: 1;
}

.rj-problem-item__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rj-text-primary);
	margin: 0 0 6px;
	line-height: 1.35;
}

.rj-problem-item__desc {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	margin: 0;
}

.rj-problems-footer {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 16px;
}

.rj-problems-footer p {
	font-size: 0.9375rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	flex: 1;
	margin: 0;
}

/* ============================================================
   SINGLE — DELIVERABLES
   ============================================================ */

.rj-deliverables-inner {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.rj-deliverables-list-wrap .rj-kicker {
	display: block;
	margin-bottom: 8px;
}

.rj-deliverables-list-wrap h2 {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin-block: 0 28px;
	color: var(--rj-text-primary);
}

.rj-deliverables-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rj-deliverable-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	color: var(--rj-text-secondary);
	line-height: 1.5;
}

.rj-deliverable-item__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(200,255,61,0.12);
	color: var(--rj-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

/* Sticky summary card */
.rj-deliverables-summary {
	position: sticky;
	top: 100px;
	border-radius: 20px;
	padding: clamp(24px, 3vw, 32px);
	overflow: hidden;
}

.rj-deliverables-summary__glow {
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(200,255,61,0.15), transparent 70%);
	pointer-events: none;
}

.rj-deliverables-summary__head {
	margin-bottom: 20px;
}

.rj-deliverables-summary__stats {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
	padding: 16px 0;
	border-block: 1px solid var(--rj-border, rgba(255,255,255,0.06));
}

.rj-deliverables-summary__stat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.rj-deliverables-summary__stat-label {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
}

.rj-deliverables-summary__stat-val {
	font-size: 1rem;
	font-weight: 700;
	color: var(--rj-text-primary);
}

.rj-btn--full {
	width: 100%;
	justify-content: center;
}

.rj-deliverables-summary__note {
	font-size: 0.75rem;
	color: var(--rj-text-muted, rgba(255,255,255,0.35));
	text-align: center;
	margin: 12px 0 0;
}

/* ============================================================
   SINGLE — TOOLS
   ============================================================ */

.rj-service-tools {
	background: var(--rj-bg-1);
}

.rj-section-head--center {
	text-align: center;
}

.rj-section-head--center h2 {
	max-width: 600px;
	margin-inline: auto;
}

.rj-section-head--center .rj-section-head__sub {
	max-width: 560px;
	margin-inline: auto;
}

.rj-tools-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 36px;
}

.rj-tool-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 40px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--rj-text-secondary);
	transition: color 0.2s ease, background 0.2s ease;
}

.rj-tool-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rj-cyan);
	flex-shrink: 0;
}

.rj-tool-chip:hover {
	color: var(--rj-text-primary);
}

/* ============================================================
   SINGLE — SERVICE PROCESS
   ============================================================ */

.rj-service-process-steps {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(12px, 1.5vw, 20px);
	margin-bottom: 40px;
}

.rj-service-process-step {
	display: flex;
	gap: 16px;
	padding: clamp(20px, 2.5vw, 28px);
	border-radius: 16px;
}

.rj-service-process-step__num {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(200,255,61,0.12);
	color: var(--rj-lime);
}

.rj-service-process-step__num--cyan {
	background: rgba(34,211,238,0.12);
	color: var(--rj-cyan);
}

.rj-service-process-step__body h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--rj-text-primary);
	margin: 0 0 8px;
	line-height: 1.35;
}

.rj-service-process-step__body p {
	font-size: 0.875rem;
	color: var(--rj-text-secondary);
	line-height: 1.65;
	margin: 0;
}

.rj-service-process__cta {
	text-align: center;
}

/* ============================================================
   SINGLE — RELATED CASE STUDIES (proof board)
   ============================================================ */

.rj-related-cases,
.rj-svc-proof {
	background: transparent;
}

.rj-svc-proof-board {
	display: grid;
	grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 3.5vw, 2.25rem);
	align-items: start;
	padding: clamp(1.15rem, 2.5vw, 1.65rem);
	border-radius: 22px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background:
		linear-gradient(160deg, rgba(12, 18, 32, 0.94), rgba(20, 28, 48, 0.78)),
		radial-gradient(ellipse 50% 42% at 0% 100%, rgba(34, 211, 238, 0.08), transparent 70%);
	box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.55);
}

.rj-svc-proof-intro {
	position: sticky;
	top: clamp(5rem, 12vh, 6.5rem);
}

.rj-svc-proof-intro h2 {
	margin: 0.35rem 0 0.55rem;
	font-family: "Space Grotesk", var(--rj-f-body);
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.rj-svc-proof-intro__sub {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--rj-text-muted);
}

.rj-svc-proof-intro__stat {
	margin: 0 0 0.85rem;
	font-family: var(--rj-f-mono);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rj-cyan);
}

.rj-svc-proof-trust {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.rj-svc-proof-trust li {
	font-size: 11px;
	color: var(--rj-text-dim);
	padding-left: 14px;
	position: relative;
	line-height: 1.4;
}

.rj-svc-proof-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rj-lime-soft, #d4ff7a);
	opacity: 0.75;
}

.rj-svc-proof-intro__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--rj-cyan);
	text-decoration: none;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.rj-svc-proof-intro__all:hover {
	gap: 0.5rem;
	opacity: 0.9;
}

.rj-svc-proof-reel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.rj-svc-proof-card {
	--card-accent: var(--rj-lime);
	--card-glow: rgba(184, 255, 59, 0.14);
	min-width: 0;
}

.rj-svc-proof-card--cyan   { --card-accent: #22d3ee; --card-glow: rgba(34, 211, 238, 0.16); }
.rj-svc-proof-card--violet { --card-accent: #a78bfa; --card-glow: rgba(167, 139, 250, 0.18); }
.rj-svc-proof-card--lime   { --card-accent: #b8ff3b; --card-glow: rgba(184, 255, 59, 0.14); }

.rj-svc-proof-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background: rgba(2, 6, 23, 0.48);
	overflow: hidden;
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.rj-svc-proof-card__link:hover {
	border-color: color-mix(in srgb, var(--card-accent) 35%, rgba(148, 163, 184, 0.16));
	box-shadow: 0 18px 44px -28px var(--card-glow);
	transform: translateY(-3px);
}

.rj-svc-proof-card--featured {
	grid-column: 1 / -1;
}

.rj-svc-proof-card--featured .rj-svc-proof-card__link {
	flex-direction: row;
	align-items: stretch;
	border-color: color-mix(in srgb, var(--card-accent) 30%, rgba(148, 163, 184, 0.16));
	background: linear-gradient(125deg, color-mix(in srgb, var(--card-accent) 6%, rgba(15, 23, 42, 0.92)), rgba(2, 6, 23, 0.55));
}

.rj-svc-proof-card__media {
	flex: 0 0 min(38%, 13rem);
	min-height: 8.5rem;
	border-right: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(2, 6, 23, 0.35);
	overflow: hidden;
}

.rj-svc-proof-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.rj-svc-proof-card__link:hover .rj-svc-proof-card__img {
	transform: scale(1.04);
}

.rj-svc-proof-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	min-width: 0;
	padding: 0.9rem 0.95rem 0.95rem;
}

.rj-svc-proof-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.55rem;
}

.rj-svc-proof-card__code {
	font-family: var(--rj-f-mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	color: var(--rj-text-dim);
}

.rj-svc-proof-card__cat {
	font-family: var(--rj-f-mono);
	font-size: 0.56rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--card-accent);
	padding: 0.18rem 0.45rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
	background: color-mix(in srgb, var(--card-accent) 8%, transparent);
}

.rj-svc-proof-card__metric {
	margin-left: auto;
	font-family: var(--rj-f-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--card-accent);
	padding: 0.2rem 0.5rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--card-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
}

.rj-svc-proof-card__type {
	margin: 0;
	font-family: var(--rj-f-mono);
	font-size: 0.56rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rj-text-dim);
}

.rj-svc-proof-card__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--rj-text-primary);
}

.rj-svc-proof-card--featured .rj-svc-proof-card__title {
	font-size: clamp(1rem, 1.8vw, 1.12rem);
}

.rj-svc-proof-card__meta {
	margin: 0;
	font-size: 0.72rem;
	color: var(--rj-text-dim);
}

.rj-svc-proof-card__result {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0;
	padding: 0.45rem 0.55rem;
	border-radius: 10px;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--rj-text-muted);
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid rgba(148, 163, 184, 0.1);
}

.rj-svc-proof-card__result svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--card-accent);
}

.rj-svc-proof-card__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rj-svc-proof-card__tools li {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.45rem;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	color: var(--rj-text-dim);
	background: rgba(8, 12, 22, 0.55);
}

.rj-svc-proof-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.45rem;
}

.rj-svc-proof-card__timeline {
	font-family: var(--rj-f-mono);
	font-size: 0.58rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rj-text-dim);
}

.rj-svc-proof-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--card-accent);
	transition: gap 0.2s ease;
}

.rj-svc-proof-card__link:hover .rj-svc-proof-card__cta {
	gap: 0.45rem;
}

.rj-svc-proof-card__cta svg {
	transition: transform 0.2s ease;
}

.rj-svc-proof-card__link:hover .rj-svc-proof-card__cta svg {
	transform: translateX(3px);
}

.rj-svc-proof-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: clamp(20px, 3vw, 28px);
	padding-top: 16px;
	border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.rj-svc-proof-foot p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rj-text-dim);
	max-width: 48ch;
}

@media (max-width: 900px) {
	.rj-svc-proof-board {
		grid-template-columns: 1fr;
	}

	.rj-svc-proof-intro {
		position: static;
	}

	.rj-svc-proof-card--featured .rj-svc-proof-card__link {
		flex-direction: column;
	}

	.rj-svc-proof-card__media {
		flex: none;
		width: 100%;
		min-height: 10rem;
		border-right: none;
		border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	}
}

@media (max-width: 640px) {
	.rj-svc-proof-reel {
		grid-template-columns: 1fr;
	}

	.rj-svc-proof-card--featured {
		grid-column: auto;
	}

	.rj-svc-proof-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.rj-svc-proof-foot .rj-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   SHARED — section-head sub text
   ============================================================ */

.rj-section-head__sub {
	font-size: 1rem;
	color: var(--rj-text-secondary);
	line-height: 1.7;
	margin-top: 8px;
}

/* ============================================================
   RESPONSIVE — 1200px (legacy grid)
   ============================================================ */

@media (max-width: 1200px) {
	.rj-archive-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.rj-deliverables-inner {
		grid-template-columns: 1fr 300px;
	}
}

/* ============================================================
   ARCHIVE — NEW PREMIUM SECTIONS
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

.rj-svc-hero {
	padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px);
	text-align: center;
}

.rj-svc-hero__inner {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.rj-svc-hero__title {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.12;
	margin-block: 14px 20px;
	color: var(--rj-text-primary);
}

.rj-svc-hero__lede {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	color: var(--rj-text-secondary);
	line-height: 1.7;
	margin-bottom: 32px;
}

.rj-svc-hero__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

/* gradient text variants */
.rj-gradient-text--lime {
	background: linear-gradient(90deg, var(--rj-lime), #a8f054);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.rj-gradient-text--cyan {
	background: linear-gradient(90deg, var(--rj-cyan), #67e8f9);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ── Category cards row ───────────────────────────────────── */

.rj-svc-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.rj-svc-cat {
	padding: 22px 20px;
	border-radius: 18px;
	background: rgba(13, 20, 36, 0.55);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.rj-svc-cat:hover {
	border-color: rgba(46, 230, 224, 0.30);
	transform: translateY(-2px);
}

.rj-svc-cat__num {
	font-family: var(--rj-f-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	color: var(--rj-lime);
}

.rj-svc-cat__title {
	font-size: 17px;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.2;
	margin: 4px 0 0;
}

.rj-svc-cat__count {
	font-family: var(--rj-f-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--rj-cyan);
	margin-top: 6px;
}

/* ── Service group section ────────────────────────────────── */

.rj-svc-group {
	padding-block: clamp(40px, 5vw, 64px);
}

.rj-svc-group + .rj-svc-group {
	padding-block-start: 0;
}

.rj-svc-group__head {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	margin-bottom: 26px;
}

.rj-svc-group__num {
	font-family: var(--rj-f-mono);
	font-size: 12px;
	padding: 4px 10px;
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	border-radius: 99px;
	color: var(--rj-text-muted, rgba(255,255,255,0.4));
	letter-spacing: 0.1em;
	flex-shrink: 0;
}

.rj-svc-group__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--rj-text-primary);
	margin: 0;
}

/* ── Service card rows ────────────────────────────────────── */

.rj-svc-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.rj-svc-row--two {
	grid-template-columns: repeat(2, 1fr);
}

/* ── Premium service card (rj-scard) ─────────────────────── */

.rj-scard {
	border-radius: 18px;
	overflow: hidden;
	background: rgba(13, 20, 36, 0.50);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.rj-scard:hover {
	border-color: rgba(46, 230, 224, 0.25);
	transform: translateY(-2px);
}

/* Visual/mockup zone */
.rj-scard__vz {
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--hairline, rgba(148,173,220,0.07));
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
}

.rj-scard__vz--lime   { background: linear-gradient(135deg, #0a1230, #0a1a35); }
.rj-scard__vz--cyan   { background: linear-gradient(135deg, #0c2030, #0a1428); }
.rj-scard__vz--violet { background: linear-gradient(135deg, #150c30, #0a1430); }

.rj-scard__vz-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rj-scard__vz--lime   .rj-scard__vz-glow { background: radial-gradient(60% 60% at 50% 30%, rgba(200,255,61,0.14), transparent 70%); }
.rj-scard__vz--cyan   .rj-scard__vz-glow { background: radial-gradient(60% 60% at 50% 30%, rgba(46,230,224,0.14), transparent 70%); }
.rj-scard__vz--violet .rj-scard__vz-glow { background: radial-gradient(60% 60% at 50% 30%, rgba(139,92,246,0.14), transparent 70%); }

.rj-scard__vz-icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.rj-scard__vz--lime   .rj-scard__vz-icon { background: rgba(200,255,61,0.12);  border: 1px solid rgba(200,255,61,0.25);  color: var(--rj-lime); }
.rj-scard__vz--cyan   .rj-scard__vz-icon { background: rgba(46,230,224,0.12);  border: 1px solid rgba(46,230,224,0.25);  color: var(--rj-cyan); }
.rj-scard__vz--violet .rj-scard__vz-icon { background: rgba(139,92,246,0.12);  border: 1px solid rgba(139,92,246,0.25);  color: var(--magenta); }

.rj-scard:hover .rj-scard__vz-icon {
	transform: scale(1.05);
	transition: transform 0.2s ease;
}

.rj-scard__vz-tag {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--rj-f-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.45);
	white-space: nowrap;
	z-index: 1;
}

/* Card body */
.rj-scard__body {
	padding: 18px 20px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.rj-scard__chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 99px;
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	width: fit-content;
}

.rj-scard__chip--lime   { background: rgba(200,255,61,0.12);  color: var(--rj-lime); border: 1px solid rgba(200,255,61,0.25);  }
.rj-scard__chip--cyan   { background: rgba(46,230,224,0.12);  color: var(--rj-cyan); border: 1px solid rgba(46,230,224,0.25);  }
.rj-scard__chip--violet { background: rgba(139,92,246,0.12);  color: var(--magenta);        border: 1px solid rgba(139,92,246,0.25);  }

.rj-scard__title {
	font-size: 17px;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.25;
	margin: 2px 0 0;
}

.rj-scard__desc {
	font-size: 13.5px;
	color: var(--rj-text-secondary);
	line-height: 1.55;
	margin: 0;
}

.rj-scard__ms {
	font-family: var(--rj-f-mono);
	font-size: 10.5px;
	letter-spacing: 0.07em;
	color: var(--rj-text-muted, rgba(255,255,255,0.35));
	text-transform: uppercase;
}

.rj-scard__list {
	list-style: none;
	padding: 0;
	margin: 2px 0 0;
	display: grid;
	gap: 5px;
}

.rj-scard__list li {
	font-size: 12.5px;
	color: var(--rj-text-secondary, #c2cbdc);
	display: flex;
	gap: 8px;
	align-items: flex-start;
	line-height: 1.45;
}

.rj-scard__list li::before {
	content: "✓";
	color: var(--rj-lime);
	font-size: 11px;
	margin-top: 1px;
	flex-shrink: 0;
}

/* Card footer */
.rj-scard__foot {
	border-top: 1px solid var(--hairline, rgba(148,173,220,0.07));
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.rj-scard__price {
	font-family: var(--rj-f-mono);
	font-size: 12px;
	color: var(--rj-text-secondary);
	white-space: nowrap;
}

.rj-scard__price strong {
	color: var(--rj-lime);
	font-weight: 600;
}

.rj-scard__time {
	color: var(--rj-text-secondary);
}

.rj-scard__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rj-cyan);
	flex-shrink: 0;
	transition: gap 0.2s ease;
}

.rj-scard:hover .rj-scard__cta-link {
	gap: 7px;
}

.rj-scard__cta-link svg {
	transition: transform 0.2s ease;
}

.rj-scard:hover .rj-scard__cta-link svg {
	transform: translateX(2px);
}

/* ── Section heading (compare / process / faq) ────────────── */

.rj-svc-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.rj-svc-sec-head h2 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--rj-text-primary);
	margin: 12px 0 0;
}

.rj-svc-sec-head p {
	color: var(--rj-text-secondary);
	max-width: 42ch;
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

/* ── Comparison table ─────────────────────────────────────── */

.rj-compare-section {
	padding-block-start: 0;
}

.rj-compare {
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	border-radius: 18px;
	overflow: hidden;
	background: rgba(11, 17, 32, 0.50);
	overflow-x: auto;
}

.rj-compare table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}

.rj-compare th,
.rj-compare td {
	text-align: left;
	padding: 14px 18px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--hairline, rgba(148,173,220,0.07));
	vertical-align: top;
}

.rj-compare th {
	font-family: var(--rj-f-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rj-text-muted, rgba(255,255,255,0.4));
	font-weight: 500;
	background: rgba(13, 20, 36, 0.70);
}

.rj-compare tr:last-child td {
	border-bottom: none;
}

.rj-compare tr:hover td {
	background: rgba(46, 230, 224, 0.03);
}

.rj-compare td strong {
	color: var(--rj-text-primary);
	font-weight: 500;
}

.rj-compare__price {
	color: var(--rj-lime);
	font-family: var(--rj-f-mono);
	white-space: nowrap;
}

.rj-compare__time {
	color: var(--rj-text-secondary);
	font-family: var(--rj-f-mono);
	font-size: 12.5px;
	white-space: nowrap;
}

.rj-compare__link {
	color: var(--rj-cyan);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.rj-compare__link:hover {
	color: var(--rj-text-primary);
}

/* ── Engagement process grid ──────────────────────────────── */

.rj-proc-section {
	padding-block-start: 0;
}

.rj-proc-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.rj-proc-step {
	padding: 18px;
	border-radius: 14px;
}

.rj-proc-step__num {
	display: block;
	font-family: var(--rj-f-mono);
	font-size: 11px;
	color: var(--rj-lime);
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.rj-proc-step__title {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--rj-text-primary);
	margin: 0 0 4px;
}

.rj-proc-step__desc {
	font-size: 12.5px;
	color: var(--rj-text-secondary);
	line-height: 1.55;
	margin: 0;
}

/* ── FAQ (native details/summary) ────────────────────────── */

.rj-svc-faq-section {
	padding-block-start: 0;
}

.rj-svc-faqs {
	max-width: 880px;
	display: grid;
	gap: 8px;
}

.rj-svc-faq-item {
	padding: 18px 22px;
	border-radius: 14px;
	background: rgba(13, 20, 36, 0.50);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
}

.rj-svc-faq-item[open] {
	border-color: rgba(200,255,61,0.20);
}

.rj-svc-faq-item__q {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.4;
}

.rj-svc-faq-item__q::-webkit-details-marker {
	display: none;
}

.rj-svc-faq-item__icon {
	flex-shrink: 0;
	color: var(--rj-text-muted, rgba(255,255,255,0.35));
	transition: transform 0.15s ease, color 0.15s ease;
	line-height: 0;
}

.rj-svc-faq-item[open] .rj-svc-faq-item__icon {
	transform: rotate(45deg);
	color: var(--rj-lime);
}

.rj-svc-faq-item__a {
	font-size: 13.5px;
	color: var(--rj-text-secondary);
	line-height: 1.65;
	margin: 12px 0 0;
}

/* ── Final CTA ────────────────────────────────────────────── */

.rj-svc-final-cta-section {
	padding-block-start: 0;
}

.rj-svc-final-cta {
	position: relative;
	text-align: center;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px);
	border-radius: 28px;
	overflow: hidden;
	background:
		radial-gradient(500px 280px at 50% 0%,   rgba(46, 230, 224, 0.10), transparent 60%),
		radial-gradient(600px 320px at 50% 100%, rgba(139, 92, 246, 0.15), transparent 60%),
		rgba(11, 17, 32, 0.60);
}

.rj-svc-final-cta__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(200,255,61,0.08), transparent 70%);
	pointer-events: none;
}

.rj-svc-final-cta__title {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--rj-text-primary);
	max-width: 720px;
	margin: 14px auto 0;
}

.rj-svc-final-cta__sub {
	font-size: 1rem;
	color: var(--rj-text-secondary);
	line-height: 1.7;
	max-width: 520px;
	margin: 14px auto 28px;
}

.rj-svc-final-cta__actions {
	display: inline-flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.rj-svc-final-cta__note {
	font-size: 0.8125rem;
	color: var(--rj-text-muted, rgba(255,255,255,0.35));
	margin: 16px 0 0;
}

/* ============================================================
   RESPONSIVE — New archive sections
   ============================================================ */

@media (max-width: 1200px) {
	.rj-svc-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.rj-proc-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1024px) {
	.rj-svc-cats {
		grid-template-columns: repeat(2, 1fr);
	}
	.rj-svc-sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 768px) {
	.rj-svc-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.rj-svc-hero__actions .rj-btn {
		justify-content: center;
	}
	.rj-svc-row,
	.rj-svc-row--two {
		grid-template-columns: 1fr;
	}
	.rj-svc-group__title {
		font-size: 1.5rem;
	}
}

@media (max-width: 640px) {
	.rj-svc-cats {
		grid-template-columns: 1fr;
	}
	.rj-proc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.rj-svc-final-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.rj-svc-final-cta__actions .rj-btn {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.rj-proc-grid {
		grid-template-columns: 1fr;
	}
	.rj-compare table {
		font-size: 12px;
	}
	.rj-compare th,
	.rj-compare td {
		padding: 10px 12px;
	}
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */

@media (max-width: 1024px) {
	.rj-service-hero__inner {
		grid-template-columns: 1fr;
	}

	.rj-service-hero__visual {
		display: none;
	}

	.rj-service-who__grid {
		grid-template-columns: 1fr;
	}

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

	.rj-deliverables-inner {
		grid-template-columns: 1fr;
	}

	.rj-deliverables-summary {
		position: static;
	}

	.rj-service-process-steps {
		grid-template-columns: 1fr;
	}

	.rj-svc-proof-reel {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */

@media (max-width: 768px) {
	.rj-archive-services-grid {
		grid-template-columns: 1fr;
	}

	.rj-service-archive-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rj-service-archive-hero__actions .rj-btn {
		justify-content: center;
	}

	.rj-problems-grid {
		grid-template-columns: 1fr;
	}

	.rj-problems-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.rj-service-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rj-service-hero__actions .rj-btn {
		justify-content: center;
	}

	.rj-svc-proof-reel {
		grid-template-columns: 1fr;
	}

	.rj-archive-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rj-archive-cta__actions .rj-btn {
		justify-content: center;
	}
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */

@media (max-width: 480px) {
	.rj-service-hero__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.rj-service-hero__chips::-webkit-scrollbar {
		display: none;
	}

	.rj-tools-grid {
		justify-content: flex-start;
	}
}

/* ============================================================
   PHASE 4B — SINGLE SERVICE PAGE
   ============================================================ */

/* ── Section head split (left title / right note) ───────── */

.rj-section-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.rj-section-head--split h2 {
	margin-bottom: 0;
}

.rj-section-head__side-note {
	max-width: 42ch;
	font-size: 0.9375rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	flex-shrink: 0;
}

/* ── Kicker color variants ──────────────────────────────── */

.rj-kicker--lime {
	color: var(--rj-lime);
}

.rj-kicker--cyan {
	color: var(--rj-cyan);
}

/* ── Hero: meta pills row ────────────────────────────────── */

.rj-service-hero__meta-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.rj-svc-meta-pill {
	display: inline-flex;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 99px;
	background: rgba(13, 20, 36, 0.60);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	font-family: var(--rj-f-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	color: var(--rj-text-secondary);
}

.rj-svc-meta-pill strong {
	color: var(--rj-lime);
	font-weight: 600;
}

/* ── Hero: browser chrome mockup ────────────────────────── */

.rj-service-hero__browser {
	border-radius: 16px;
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	background: linear-gradient(180deg, #0e1830, #0a0f20);
	overflow: hidden;
	box-shadow:
		0 30px 80px -20px rgba(0,0,0,0.70),
		0 0 0 1px rgba(46,230,224,0.06);
}

.rj-service-hero__browser--lime {
	box-shadow:
		0 30px 80px -20px rgba(0,0,0,0.70),
		0 0 0 1px rgba(200,255,61,0.08);
}

.rj-service-hero__browser-bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--hairline, rgba(148,173,220,0.07));
	background: rgba(15, 23, 43, 0.70);
}

.rj-shb-dot {
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: rgba(148,173,220,0.25);
	flex-shrink: 0;
}

.rj-shb-url {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	color: rgba(148,173,220,0.50);
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 99px;
	background: rgba(0,0,0,0.30);
	border: 1px solid var(--hairline, rgba(148,173,220,0.07));
}

.rj-service-hero__browser-body {
	padding: 20px;
	min-height: 260px;
}

.rj-shb-row {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 14px;
	align-items: start;
}

.rj-shb-h1 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--rj-text-primary);
}

.rj-shb-sub {
	font-size: 10px;
	color: rgba(148,173,220,0.60);
	margin-top: 6px;
	line-height: 1.5;
}

.rj-shb-cta {
	display: inline-block;
	margin-top: 12px;
	padding: 6px 12px;
	border-radius: 99px;
	background: var(--rj-lime);
	color: #0a1408;
	font-family: var(--rj-f-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.rj-shb-stats {
	display: flex;
	gap: 6px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.rj-shb-stat {
	padding: 6px 8px;
	border-radius: 8px;
	background: rgba(13, 20, 36, 0.60);
	border: 1px solid var(--hairline, rgba(148,173,220,0.07));
	flex: 1;
	min-width: 44px;
}

.rj-shb-stat__val {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--rj-text-primary);
}

.rj-shb-stat__lbl {
	font-family: var(--rj-f-mono);
	font-size: 7.5px;
	color: rgba(148,173,220,0.50);
	letter-spacing: 0.08em;
	margin-top: 3px;
}

/* Side notification card */
.rj-shb-side {
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(46,230,224,0.12), rgba(139,92,246,0.08));
	border: 1px solid rgba(46,230,224,0.22);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rj-shb-side--lime {
	background: linear-gradient(135deg, rgba(200,255,61,0.12), rgba(46,230,224,0.06));
	border-color: rgba(200,255,61,0.22);
}

.rj-shb-side__label {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	color: var(--rj-cyan);
	letter-spacing: 0.1em;
}

.rj-shb-side--lime .rj-shb-side__label {
	color: var(--rj-lime);
}

.rj-shb-side__icon {
	color: var(--rj-cyan);
	opacity: 0.8;
}

.rj-shb-side--lime .rj-shb-side__icon {
	color: var(--rj-lime);
}

.rj-shb-side__text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--rj-text-primary);
}

.rj-shb-side__status {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--rj-f-mono);
	font-size: 7.5px;
	color: rgba(148,173,220,0.50);
	letter-spacing: 0.08em;
}

.rj-shb-side__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rj-cyan);
	box-shadow: 0 0 6px var(--rj-cyan);
	flex-shrink: 0;
}

.rj-shb-side--lime .rj-shb-side__dot {
	background: var(--rj-lime);
	box-shadow: 0 0 6px var(--rj-lime);
}

/* ── Who this is for: upgraded cards ────────────────────── */

.rj-service-who__ico {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(200,255,61,0.10);
	color: var(--rj-lime);
	border: 1px solid rgba(200,255,61,0.22);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rj-service-who__ico--cyan {
	background: rgba(46,230,224,0.10);
	color: var(--rj-cyan);
	border-color: rgba(46,230,224,0.22);
}

.rj-service-who__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rj-service-who__label-text {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.35;
}

.rj-service-who__desc {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	line-height: 1.5;
}

/* Override default who__item to use row layout with icon */
.rj-service-who__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 14px;
}

/* ── Problems: numbered card style ──────────────────────── */

.rj-problems-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 36px;
}

.rj-problem-item {
	padding: 20px;
	border-radius: 14px;
	background: rgba(13, 20, 36, 0.50);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: border-color 0.15s ease;
}

.rj-problem-item:hover {
	border-color: rgba(148,173,220,0.20);
}

.rj-problem-item__num {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	color: rgba(148,173,220,0.45);
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}

.rj-problem-item__title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.35;
	margin: 0 0 6px;
}

.rj-problem-item__desc {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* ── Service problems — professional showcase ─────────────── */

.rj-svc-problems-pro {
	position: relative;
}

.rj-svc-problems-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 40px);
	flex-wrap: wrap;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.rj-svc-problems-head__main {
	max-width: 54ch;
}

.rj-svc-problems-head h2 {
	margin: 0 0 10px;
	font-size: clamp(1.65rem, 3vw, 2.15rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.rj-svc-problems-head__accent {
	color: var(--rj-text-muted);
	font-weight: 600;
}

.rj-svc-problems-head__lede {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rj-text-muted);
}

.rj-svc-problems-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rj-svc-problems-pills li {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(248, 113, 113, 0.2);
	background: rgba(127, 29, 29, 0.18);
	color: #fca5a5;
}

.rj-svc-problems-showcase {
	position: relative;
	border-radius: 22px;
	border: 1px solid rgba(248, 113, 113, 0.14);
	background:
		radial-gradient(ellipse 70% 55% at 0% 0%, rgba(248, 113, 113, 0.06), transparent 55%),
		radial-gradient(ellipse 60% 50% at 100% 100%, rgba(251, 191, 36, 0.04), transparent 55%),
		rgba(8, 12, 22, 0.72);
	padding: clamp(16px, 2.5vw, 22px);
	box-shadow:
		0 24px 48px -28px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rj-svc-problems-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.rj-svc-problem-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 16px 16px 18px;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(5, 9, 18, 0.9);
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.rj-svc-problem-card:hover {
	border-color: rgba(248, 113, 113, 0.28);
	box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.55);
	transform: translateY(-2px);
}

.rj-svc-problem-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.rj-svc-problem-card__code {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(148, 163, 184, 0.55);
}

.rj-svc-problem-card__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(248, 113, 113, 0.12);
	border: 1px solid rgba(248, 113, 113, 0.22);
	color: #f87171;
	flex-shrink: 0;
}

.rj-svc-problem-card__title {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rj-text-primary);
	letter-spacing: -0.02em;
}

.rj-svc-problem-card__desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--rj-text-secondary);
	flex: 1;
}

.rj-svc-problems-foot {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px 20px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.rj-svc-problems-foot p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rj-text-dim);
	max-width: 52ch;
}

.rj-svc-problems-foot__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.rj-svc-problems-foot__meta {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rj-text-muted);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(248, 113, 113, 0.18);
	background: rgba(127, 29, 29, 0.14);
	flex-shrink: 0;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.rj-svc-problems-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.rj-svc-problems-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.rj-svc-problems-foot {
		grid-template-columns: 1fr;
	}

	.rj-svc-problems-foot__actions {
		width: 100%;
	}

	.rj-svc-problems-foot__actions .rj-btn {
		flex: 1;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.rj-svc-problems-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Service tools — professional showcase ────────────────── */

.rj-svc-tools-pro {
	position: relative;
}

.rj-svc-tools-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 40px);
	flex-wrap: wrap;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.rj-svc-tools-head__main {
	max-width: 54ch;
}

.rj-svc-tools-head h2 {
	margin: 0 0 10px;
	font-size: clamp(1.65rem, 3vw, 2.15rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.rj-svc-tools-head__accent {
	color: var(--rj-text-muted);
	font-weight: 600;
}

.rj-svc-tools-head__lede {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rj-text-muted);
}

.rj-svc-tools-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rj-svc-tools-pills li {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.2);
	background: rgba(8, 47, 73, 0.35);
	color: #67e8f9;
}

.rj-svc-tools-showcase {
	position: relative;
	border-radius: 22px;
	border: 1px solid rgba(34, 211, 238, 0.14);
	background:
		radial-gradient(ellipse 70% 55% at 0% 0%, rgba(34, 211, 238, 0.06), transparent 55%),
		radial-gradient(ellipse 60% 50% at 100% 100%, rgba(184, 255, 59, 0.04), transparent 55%),
		rgba(8, 12, 22, 0.72);
	padding: clamp(16px, 2.5vw, 22px);
	box-shadow:
		0 24px 48px -28px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rj-svc-tools-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.rj-svc-tool-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 100%;
	padding: 13px 14px;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(5, 9, 18, 0.9);
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.rj-svc-tool-chip:hover {
	border-color: rgba(34, 211, 238, 0.28);
	box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.55);
	transform: translateY(-2px);
}

.rj-svc-tool-chip--lime:hover {
	border-color: rgba(184, 255, 59, 0.28);
}

.rj-svc-tool-chip--violet:hover {
	border-color: rgba(167, 139, 250, 0.28);
}

.rj-svc-tool-chip__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(34, 211, 238, 0.1);
	border: 1px solid rgba(34, 211, 238, 0.2);
	color: #22d3ee;
	flex-shrink: 0;
}

.rj-svc-tool-chip--lime .rj-svc-tool-chip__icon {
	background: rgba(184, 255, 59, 0.1);
	border-color: rgba(184, 255, 59, 0.2);
	color: var(--rj-lime);
}

.rj-svc-tool-chip--violet .rj-svc-tool-chip__icon {
	background: rgba(167, 139, 250, 0.1);
	border-color: rgba(167, 139, 250, 0.2);
	color: #a78bfa;
}

.rj-svc-tool-chip__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.rj-svc-tool-chip__code {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(148, 163, 184, 0.5);
}

.rj-svc-tool-chip__name {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rj-text-primary);
	letter-spacing: -0.01em;
}

.rj-svc-tool-chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22d3ee;
	flex-shrink: 0;
	box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

.rj-svc-tool-chip--lime .rj-svc-tool-chip__dot {
	background: var(--rj-lime);
	box-shadow: 0 0 10px rgba(184, 255, 59, 0.35);
}

.rj-svc-tool-chip--violet .rj-svc-tool-chip__dot {
	background: #a78bfa;
	box-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}

.rj-svc-tools-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.rj-svc-tools-foot p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rj-text-dim);
	max-width: 52ch;
}

.rj-svc-tools-foot__meta {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rj-text-muted);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.18);
	background: rgba(8, 47, 73, 0.28);
	flex-shrink: 0;
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.rj-svc-tools-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.rj-svc-tools-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.rj-svc-tools-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.rj-svc-tools-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Deliverables: card grid ─────────────────────────────── */

.rj-deliverables-intro {
	font-size: 0.9375rem;
	color: var(--rj-text-secondary);
	margin-block: 0 24px;
	line-height: 1.6;
}

.rj-deliverables-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.rj-deliverable-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(200,255,61,0.05), rgba(46,230,224,0.03));
	border: 1px solid rgba(200,255,61,0.12);
}

.rj-deliverable-card__ico {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: rgba(200,255,61,0.12);
	color: var(--rj-lime);
	border: 1px solid rgba(200,255,61,0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.rj-deliverable-card__text {
	font-size: 0.875rem;
	color: var(--rj-text-secondary);
	line-height: 1.5;
}

/* ── Process: horizontal step strip (legacy) ─────────────── */

.rj-service-steps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 36px;
}

.rj-service-step {
	padding: 18px;
	border-radius: 14px;
	background: rgba(13, 20, 36, 0.50);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	transition: border-color 0.15s ease;
}

.rj-service-step:hover {
	border-color: rgba(148,173,220,0.20);
}

.rj-service-step__num {
	font-family: var(--rj-f-mono);
	font-size: 11px;
	color: var(--rj-lime);
	letter-spacing: 0.10em;
	margin-bottom: 6px;
}

.rj-service-step__title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.3;
	margin: 0 0 6px;
}

.rj-service-step__desc {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	line-height: 1.55;
	margin: 0;
}

/* ── Service process — professional timeline ───────────────── */

.rj-svc-process-pro {
	position: relative;
}

.rj-svc-process-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 40px);
	flex-wrap: wrap;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.rj-svc-process-head__main {
	max-width: 54ch;
}

.rj-svc-process-head h2 {
	margin: 0 0 10px;
	font-size: clamp(1.65rem, 3vw, 2.15rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.rj-svc-process-head__accent {
	color: var(--rj-text-muted);
	font-weight: 600;
}

.rj-svc-process-head__lede {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rj-text-muted);
}

.rj-svc-process-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rj-svc-process-pills li {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(184, 255, 59, 0.22);
	background: rgba(22, 78, 28, 0.28);
	color: #bef264;
}

.rj-svc-process-showcase {
	position: relative;
	border-radius: 22px;
	border: 1px solid rgba(184, 255, 59, 0.14);
	background:
		radial-gradient(ellipse 70% 55% at 0% 0%, rgba(184, 255, 59, 0.06), transparent 55%),
		radial-gradient(ellipse 60% 50% at 100% 100%, rgba(167, 139, 250, 0.04), transparent 55%),
		rgba(8, 12, 22, 0.72);
	padding: clamp(16px, 2.5vw, 22px);
	box-shadow:
		0 24px 48px -28px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rj-svc-process-track {
	display: grid;
	grid-template-columns: repeat(var(--step-count, 4), minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.rj-svc-process-track::before {
	content: "";
	position: absolute;
	top: 34px;
	left: calc(100% / (var(--step-count, 4) * 2));
	right: calc(100% / (var(--step-count, 4) * 2));
	height: 2px;
	background: linear-gradient(90deg, rgba(184, 255, 59, 0.08), rgba(184, 255, 59, 0.45), rgba(184, 255, 59, 0.08));
	border-radius: 999px;
	pointer-events: none;
	z-index: 0;
}

.rj-svc-process-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.rj-svc-process-step__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.rj-svc-process-step__code {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(148, 163, 184, 0.55);
}

.rj-svc-process-step__node {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(184, 255, 59, 0.12);
	border: 2px solid rgba(184, 255, 59, 0.35);
	color: var(--rj-lime);
	box-shadow: 0 0 0 6px rgba(184, 255, 59, 0.06);
}

.rj-svc-process-step__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 15px 18px;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(5, 9, 18, 0.9);
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.rj-svc-process-step:hover .rj-svc-process-step__card {
	border-color: rgba(184, 255, 59, 0.28);
	box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.55);
	transform: translateY(-2px);
}

.rj-svc-process-step__title {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rj-text-primary);
	letter-spacing: -0.02em;
}

.rj-svc-process-step__desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--rj-text-secondary);
	flex: 1;
}

.rj-svc-process-foot {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px 20px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.rj-svc-process-foot p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rj-text-dim);
	max-width: 52ch;
}

.rj-svc-process-foot__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.rj-svc-process-foot__meta {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rj-text-muted);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(184, 255, 59, 0.18);
	background: rgba(22, 78, 28, 0.2);
	flex-shrink: 0;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.rj-svc-process-track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rj-svc-process-track::before {
		display: none;
	}

	.rj-svc-process-step__head {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}
}

@media (max-width: 900px) {
	.rj-svc-process-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.rj-svc-process-foot {
		grid-template-columns: 1fr;
	}

	.rj-svc-process-foot__actions {
		width: 100%;
	}

	.rj-svc-process-foot__actions .rj-btn {
		flex: 1;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.rj-svc-process-track {
		grid-template-columns: 1fr;
	}
}

/* ── FAQ single: wrapper ─────────────────────────────────── */

.rj-svc-faq-list {
	display: grid;
	gap: 8px;
}

/* ── Gallery section ─────────────────────────────────────── */

.rj-service-gallery {
	background: var(--rj-bg-1);
}

/* ── Service gallery — professional showcase ─────────────── */

.rj-svc-gallery-pro {
	position: relative;
}

.rj-svc-gallery-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 40px);
	flex-wrap: wrap;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.rj-svc-gallery-head__main {
	max-width: 52ch;
}

.rj-svc-gallery-head h2 {
	margin: 0 0 10px;
	font-size: clamp(1.65rem, 3vw, 2.15rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.rj-svc-gallery-head__accent {
	color: var(--rj-text-muted);
	font-weight: 600;
}

.rj-svc-gallery-head__lede {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--rj-text-muted);
}

.rj-svc-gallery-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rj-svc-gallery-pills li {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(15, 23, 42, 0.55);
	color: var(--rj-text-muted);
}

.rj-svc-gallery-showcase {
	position: relative;
	border-radius: 22px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background:
		radial-gradient(ellipse 70% 55% at 0% 0%, rgba(184, 255, 59, 0.05), transparent 55%),
		radial-gradient(ellipse 60% 50% at 100% 100%, rgba(34, 211, 238, 0.05), transparent 55%),
		rgba(8, 12, 22, 0.72);
	padding: clamp(16px, 2.5vw, 22px);
	box-shadow:
		0 24px 48px -28px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rj-svc-gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}

.rj-svc-gallery-card {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: rgba(5, 9, 18, 0.9);
	overflow: hidden;
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.rj-svc-gallery-card:hover {
	border-color: rgba(184, 255, 59, 0.2);
	box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.55);
	transform: translateY(-2px);
}

.rj-svc-gallery-card--featured { grid-column: span 7; }
.rj-svc-gallery-card--side    { grid-column: span 5; }
.rj-svc-gallery-card--half     { grid-column: span 6; }

.rj-svc-gallery-card__chrome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.1);
	background: rgba(12, 18, 32, 0.85);
}

.rj-svc-gallery-card__device {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rj-lime-soft, #d4ff7a);
	flex-shrink: 0;
}

.rj-svc-gallery-card__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--rj-text-muted);
	text-align: right;
	line-height: 1.3;
}

.rj-svc-gallery-card__viewport {
	position: relative;
	flex: 1;
	min-height: 190px;
	aspect-ratio: 16 / 10;
}

.rj-svc-gallery-card--featured .rj-svc-gallery-card__viewport {
	min-height: 220px;
	aspect-ratio: 16 / 11;
}

.rj-svc-gallery-card__viewport .rj-gallery-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
	border: none;
	border-radius: 0;
	min-height: 0;
}

.rj-svc-gallery-card .rj-gallery-frame__lbl {
	display: none;
}

.rj-svc-gallery-card__viewport .rj-gframe-browser {
	inset: 14px;
	width: auto;
}

.rj-svc-gallery-card__viewport .rj-gframe-dark,
.rj-svc-gallery-card__viewport .rj-gframe-mobile,
.rj-svc-gallery-card__viewport .rj-gframe-chat,
.rj-svc-gallery-card__viewport .rj-gframe-co,
.rj-svc-gallery-card__viewport .rj-gframe-speed,
.rj-svc-gallery-card__viewport .rj-gframe-ais,
.rj-svc-gallery-card__viewport .rj-gframe-confirm,
.rj-svc-gallery-card__viewport .rj-gfl-inner {
	inset: 12px;
}

.rj-svc-gallery-photo {
	display: block;
	position: absolute;
	inset: 0;
	overflow: hidden;
	text-decoration: none;
}

.rj-svc-gallery-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.rj-svc-gallery-photo:hover img {
	transform: scale(1.03);
}

.rj-svc-gallery-photo__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba(5, 9, 18, 0.82);
	border: 1px solid rgba(184, 255, 59, 0.25);
	color: var(--rj-lime-soft);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.rj-svc-gallery-photo:hover .rj-svc-gallery-photo__zoom {
	opacity: 1;
	transform: translateY(0);
}

.rj-svc-gallery-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.rj-svc-gallery-foot p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--rj-text-dim);
	max-width: 52ch;
}

.rj-svc-gallery-foot__meta {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rj-text-muted);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background: rgba(15, 23, 42, 0.45);
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.rj-svc-gallery-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.rj-svc-gallery-card--featured,
	.rj-svc-gallery-card--side,
	.rj-svc-gallery-card--half {
		grid-column: span 12;
	}
}

@media (max-width: 640px) {
	.rj-svc-gallery-showcase {
		padding: 12px;
		border-radius: 18px;
	}

	.rj-svc-gallery-grid {
		gap: 12px;
	}

	.rj-svc-gallery-card__viewport {
		min-height: 170px;
	}
}

.rj-gallery-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.rj-gallery-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.rj-gallery-frame {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	background: #0a0f20;
	position: relative;
	aspect-ratio: 16/10;
}

.rj-gallery-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rj-gallery-frame__lbl {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--rj-f-mono);
	font-size: 9.5px;
	padding: 4px 9px;
	border-radius: 99px;
	background: rgba(0,0,0,0.60);
	color: rgba(148,173,220,0.70);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	z-index: 2;
}

/* CSS mockup base */
.rj-gallery-frame--mock {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rj-gallery-frame--mock-lime {
	background: linear-gradient(180deg, #0e1830, #0a0f20);
}

.rj-gallery-frame--mock-cyan {
	background: linear-gradient(180deg, #091628, #060e1e);
}

/* Browser frame inside gallery */
.rj-gframe-browser {
	width: calc(100% - 40px);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(6, 8, 15, 0.90);
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	position: absolute;
	inset: 20px;
}

.rj-gframe-browser__bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--hairline, rgba(148,173,220,0.07));
	background: rgba(15,23,43,0.80);
}

.rj-gfb-dot {
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: rgba(148,173,220,0.20);
}

.rj-gfb-url {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	color: rgba(148,173,220,0.40);
	margin-left: 8px;
}

.rj-gframe-browser__body {
	padding: 16px;
}

.rj-gfb-hero {
	margin-bottom: 12px;
}

.rj-gfb-h1 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--rj-text-primary);
	line-height: 1.2;
	margin-bottom: 5px;
}

.rj-gfb-sub {
	font-size: 9px;
	color: rgba(148,173,220,0.55);
	line-height: 1.5;
}

.rj-gfb-cta {
	display: inline-block;
	margin-top: 10px;
	padding: 5px 10px;
	border-radius: 99px;
	font-family: var(--rj-f-mono);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.rj-gfb-cta--lime {
	background: var(--rj-lime);
	color: #0a1408;
}

.rj-gfb-cta--cyan {
	background: var(--rj-cyan);
	color: #050a15;
}

.rj-gfb-stats {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.rj-gfb-stat {
	flex: 1;
	min-width: 48px;
	padding: 6px 8px;
	border-radius: 7px;
	background: rgba(13,20,36,0.60);
	border: 1px solid var(--hairline, rgba(148,173,220,0.07));
}

.rj-gfb-stat__v {
	font-size: 12px;
	font-weight: 700;
	color: var(--rj-text-primary);
	line-height: 1;
}

.rj-gfb-stat__l {
	font-family: var(--rj-f-mono);
	font-size: 7px;
	color: rgba(148,173,220,0.45);
	letter-spacing: 0.08em;
	margin-top: 2px;
}

/* Dark mockup frame */
.rj-gallery-frame--dark {
	background: linear-gradient(135deg, #0a1228, #15203c);
}

.rj-gframe-dark {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 20px;
	position: absolute;
	inset: 0;
	justify-content: center;
}

.rj-gframe-dark__icon {
	color: var(--rj-lime);
	opacity: 0.80;
}

.rj-gframe-dark__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--rj-text-primary);
	line-height: 1.2;
}

.rj-gframe-dark__sub {
	font-size: 9.5px;
	color: rgba(148,173,220,0.55);
	line-height: 1.5;
}

.rj-gframe-dark__lines {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 4px;
}

.rj-gfd-line {
	height: 5px;
	border-radius: 3px;
	background: rgba(148,173,220,0.08);
}

.rj-gfd-line--80 { width: 80%; }
.rj-gfd-line--60 { width: 60%; }
.rj-gfd-line--40 { width: 40%; }

.rj-gframe-dark__btn {
	margin-top: 8px;
	padding: 5px 12px;
	border-radius: 99px;
	background: var(--rj-lime);
	color: #0a1408;
	font-family: var(--rj-f-mono);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Mobile frame */
.rj-gallery-frame--mobile {
	background: linear-gradient(135deg, #0e1830, #0a0f20);
}

.rj-gframe-mobile {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
}

.rj-gfm-phone {
	width: 90px;
	border-radius: 18px;
	background: #050a15;
	border: 1.5px solid rgba(148,173,220,0.22);
	padding: 6px;
}

.rj-gfm-screen {
	border-radius: 12px;
	background: #0e1830;
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.rj-gfm-url {
	font-family: var(--rj-f-mono);
	font-size: 5.5px;
	color: rgba(148,173,220,0.40);
	text-align: center;
}

.rj-gfm-heading {
	font-size: 8px;
	font-weight: 700;
	color: var(--rj-text-primary);
	text-align: center;
}

.rj-gfm-slot {
	border-radius: 4px;
	padding: 4px 5px;
	font-family: var(--rj-f-mono);
	font-size: 6px;
	letter-spacing: 0.06em;
	text-align: center;
}

.rj-gfm-slot--lime {
	background: rgba(200,255,61,0.14);
	border: 1px solid rgba(200,255,61,0.30);
	color: var(--rj-lime);
}

.rj-gfm-slot--cyan {
	background: rgba(46,230,224,0.10);
	border: 1px solid rgba(46,230,224,0.28);
	color: var(--rj-cyan);
}

.rj-gfm-slot--violet {
	background: rgba(139,92,246,0.10);
	border: 1px solid rgba(139,92,246,0.28);
	color: var(--magenta);
}

.rj-gfm-confirm {
	background: var(--rj-lime);
	color: #0a1408;
	border-radius: 99px;
	font-family: var(--rj-f-mono);
	font-size: 6px;
	font-weight: 700;
	text-align: center;
	padding: 4px 0;
	letter-spacing: 0.06em;
}

/* Local business frame */
.rj-gallery-frame--local {
	background: linear-gradient(135deg, #0e1830, #0a0f20);
}

.rj-gframe-local {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rj-gfl-inner {
	width: 100%;
	max-width: 260px;
	background: #0e1830;
	border: 1px solid rgba(200,255,61,0.25);
	border-radius: 8px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rj-gfl-heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--rj-text-primary);
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: center;
}

.rj-gfl-trust {
	font-family: var(--rj-f-mono);
	font-size: 7px;
	color: rgba(200,255,61,0.75);
	letter-spacing: 0.06em;
	text-align: center;
}

.rj-gfl-btns {
	display: flex;
	gap: 6px;
}

.rj-gfl-btn {
	flex: 1;
	padding: 6px 4px;
	border-radius: 5px;
	font-family: var(--rj-f-mono);
	font-size: 7px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.04em;
}

.rj-gfl-btn--lime {
	background: rgba(200,255,61,0.13);
	border: 1px solid rgba(200,255,61,0.32);
	color: var(--rj-lime);
}

.rj-gfl-btn--cyan {
	background: rgba(46,230,224,0.13);
	border: 1px solid rgba(46,230,224,0.32);
	color: var(--rj-cyan);
}

.rj-gfl-areas {
	font-family: var(--rj-f-mono);
	font-size: 7px;
	color: rgba(148,173,220,0.45);
	letter-spacing: 0.08em;
	text-align: center;
}

/* ── Packages section ────────────────────────────────────── */

.rj-pkgs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.rj-pkg {
	padding: 24px;
	border-radius: 18px;
	background: rgba(13, 20, 36, 0.50);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}

.rj-pkg--featured {
	background:
		radial-gradient(280px 200px at 50% 0%, rgba(200,255,61,0.10), transparent 60%),
		rgba(13, 20, 36, 0.70);
	border-color: rgba(200,255,61,0.28);
	box-shadow:
		0 0 0 1px rgba(200,255,61,0.08),
		0 30px 80px -20px rgba(0,0,0,0.55);
}

.rj-pkg__tag {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 99px;
	font-family: var(--rj-f-mono);
	font-size: 10px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--rj-text-secondary);
	background: rgba(148,173,220,0.05);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
}

.rj-pkg--featured .rj-pkg__tag {
	background: rgba(200,255,61,0.12);
	color: var(--rj-lime);
	border-color: rgba(200,255,61,0.28);
}

.rj-pkg__name {
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--rj-text-primary);
	margin: 0;
}

.rj-pkg__price {
	font-size: 2.125rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--rj-text-primary);
}

.rj-pkg__price small {
	font-family: var(--rj-f-mono);
	font-size: 0.75rem;
	color: var(--rj-text-secondary);
	margin-left: 6px;
	font-weight: 400;
	letter-spacing: 0.04em;
}

.rj-pkg__price--contact {
	font-size: 1rem;
	font-weight: 500;
	color: var(--rj-text-secondary);
	letter-spacing: 0;
}

.rj-pkg__desc {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	margin: 0;
}

.rj-pkg__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.rj-pkg__list li {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.45;
}

.rj-pkg__list li::before {
	content: "✓";
	color: var(--rj-lime);
	flex-shrink: 0;
	margin-top: 1px;
	font-size: 0.8125rem;
}

.rj-pkg__cta {
	margin-top: auto;
}

.rj-pkgs-note {
	text-align: center;
	font-size: 0.875rem;
	color: var(--rj-text-secondary);
	margin-top: 20px;
}

.rj-pkgs-note a {
	color: var(--rj-lime);
	text-decoration: none;
}

.rj-pkgs-note a:hover {
	text-decoration: underline;
}

/* ── Related guides section ──────────────────────────────── */

.rj-guides-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.rj-guide-card {
	border-radius: 16px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rj-guide-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 40px -12px rgba(157, 255, 87, 0.08);
}

/* Thumbnail zone */
.rj-guide-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rj-bg-2);
	border-bottom: 1px solid rgba(148, 173, 220, 0.10);
}

.rj-guide-card__thumb--wordpress  { background: linear-gradient(135deg, #1c3057, #2e4a7a); }
.rj-guide-card__thumb--woocommerce { background: linear-gradient(135deg, #0f2850, #1a4875); }
.rj-guide-card__thumb--booking    { background: linear-gradient(135deg, #1a3d10, #2c5620); }
.rj-guide-card__thumb--ai         { background: linear-gradient(135deg, #2c2850, #3d3068); }
.rj-guide-card__thumb--speed      { background: linear-gradient(135deg, #332500, #524000); }
.rj-guide-card__thumb--local      { background: linear-gradient(135deg, #0f2850, #0c2e22); }

.rj-guide-card__thumb::before {
	content: "● ● ●";
	position: absolute;
	top: 8px;
	left: 10px;
	font-size: 6px;
	letter-spacing: 3px;
	color: rgba(255, 255, 255, 0.18);
	line-height: 1;
	z-index: 2;
	pointer-events: none;
}

.rj-guide-card__thumb::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 36px;
	right: 10px;
	height: 9px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 3px;
	z-index: 2;
	pointer-events: none;
}

.rj-guide-card__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.rj-guide-card:hover .rj-guide-card__thumb-img {
	transform: scale(1.04);
}

/* Category badge */
.rj-guide-card__cat {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-family: var(--rj-f-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 99px;
	background: rgba(2, 8, 20, 0.80);
	color: var(--rj-lime);
	border: 1px solid rgba(157, 255, 87, 0.28);
	z-index: 3;
	backdrop-filter: blur(6px);
}

/* Card body */
.rj-guide-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 18px 20px;
	flex: 1;
}

.rj-guide-card__title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.4;
	margin: 0;
}

.rj-guide-card__excerpt {
	font-size: 0.8125rem;
	color: var(--rj-text-secondary);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

.rj-guide-card__read {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--rj-f-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--rj-lime);
	margin-top: 4px;
}

.rj-guide-card__read svg {
	transition: transform 0.18s ease;
}

.rj-guide-card:hover .rj-guide-card__read svg {
	transform: translateX(3px);
}

/* ============================================================
   PHASE 4B — RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
	.rj-service-hero__browser-body {
		min-height: 220px;
	}

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

	.rj-gallery-top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.rj-service-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.rj-service-hero__browser {
		max-width: 520px;
	}

	.rj-shb-row {
		grid-template-columns: 1.1fr 0.9fr;
	}

	.rj-deliverables-grid {
		grid-template-columns: 1fr;
	}

	.rj-section-head--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.rj-section-head__side-note {
		max-width: 100%;
	}
}

@media (max-width: 900px) {
	.rj-problems-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.rj-pkgs-grid {
		grid-template-columns: 1fr;
	}

	.rj-gallery-pair {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 768px) {
	.rj-service-who__grid {
		grid-template-columns: 1fr;
	}

	.rj-problems-grid {
		grid-template-columns: 1fr;
	}

	.rj-guides-grid {
		grid-template-columns: 1fr;
	}

	.rj-shb-row {
		grid-template-columns: 1fr;
	}

	.rj-shb-side {
		display: none;
	}

	.rj-service-hero__meta-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.rj-service-hero__meta-pills::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 640px) {
	.rj-service-steps {
		grid-template-columns: 1fr;
	}

	.rj-deliverables-inner {
		grid-template-columns: 1fr;
	}

	.rj-deliverables-summary {
		position: static;
	}

	.rj-gallery-top,
	.rj-gallery-pair {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   SERVICES ARCHIVE — PREMIUM POLISH
   ============================================================ */

/* ── How to choose strip ─────────────────────────────────── */

.rj-svc-chooser {
	padding-block: 0 clamp(24px, 3vw, 40px);
}

.rj-svc-chooser__head {
	margin-bottom: 22px;
}

.rj-svc-chooser__head h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 8px 0 0;
	color: var(--rj-text-primary);
}

.rj-svc-chooser__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.rj-choose-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(13, 20, 36, 0.50);
	border: 1px solid var(--rj-border, rgba(148,173,220,0.10));
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.rj-choose-card--lime   { border-top: 2px solid rgba(200,255,61,0.30); }
.rj-choose-card--cyan   { border-top: 2px solid rgba(46,230,224,0.30); }
.rj-choose-card--violet { border-top: 2px solid rgba(139,92,246,0.30); }

.rj-choose-card:hover {
	transform: translateY(-2px);
}

.rj-choose-card--lime:hover   { border-color: rgba(200,255,61,0.20); background: rgba(200,255,61,0.04); }
.rj-choose-card--cyan:hover   { border-color: rgba(46,230,224,0.20); background: rgba(46,230,224,0.04); }
.rj-choose-card--violet:hover { border-color: rgba(139,92,246,0.20); background: rgba(139,92,246,0.04); }

.rj-choose-card__if {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--rj-text-primary);
	line-height: 1.35;
}

.rj-choose-card__arrow {
	font-size: 13px;
	color: var(--rj-text-muted, rgba(255,255,255,0.30));
}

.rj-choose-card__svc {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.45;
}

.rj-choose-card--lime   .rj-choose-card__svc { color: var(--rj-lime); }
.rj-choose-card--cyan   .rj-choose-card__svc { color: var(--rj-cyan); }
.rj-choose-card--violet .rj-choose-card__svc { color: var(--rj-violet, #8b5cf6); }

@media (max-width: 1024px) {
	.rj-svc-chooser__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.rj-svc-chooser__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
	.rj-svc-chooser__grid { grid-template-columns: 1fr; }
}

/* ── Featured service card treatment ─────────────────────── */

.rj-scard--featured {
	box-shadow: 0 0 0 1px rgba(200,255,61,0.08), 0 24px 56px -12px rgba(0,0,0,0.45);
}

.rj-scard--featured.rj-scard--lime {
	border-top: 2px solid rgba(200,255,61,0.45);
}

.rj-scard--featured.rj-scard--cyan {
	border-top: 2px solid rgba(46,230,224,0.45);
	box-shadow: 0 0 0 1px rgba(46,230,224,0.06), 0 24px 56px -12px rgba(0,0,0,0.45);
}

.rj-scard--featured.rj-scard--violet {
	border-top: 2px solid rgba(139,92,246,0.40);
	box-shadow: 0 0 0 1px rgba(139,92,246,0.06), 0 24px 56px -12px rgba(0,0,0,0.45);
}

/* "Most popular" badge inside featured cards */
.rj-scard__badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 2px 9px;
	border-radius: 99px;
	font-family: var(--rj-f-mono);
	font-size: 9px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	font-weight: 600;
}

.rj-scard__badge--lime   { background: rgba(200,255,61,0.10); color: var(--rj-lime);           border: 1px solid rgba(200,255,61,0.25); }
.rj-scard__badge--cyan   { background: rgba(46,230,224,0.10); color: var(--rj-cyan);           border: 1px solid rgba(46,230,224,0.25); }
.rj-scard__badge--violet { background: rgba(139,92,246,0.10); color: var(--rj-violet,#8b5cf6); border: 1px solid rgba(139,92,246,0.25); }

/* ── Process step color variants ─────────────────────────── */

.rj-proc-step {
	border-top: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.rj-proc-step--lime   { border-top-color: rgba(200,255,61,0.25); }
.rj-proc-step--cyan   { border-top-color: rgba(46,230,224,0.25); }
.rj-proc-step--violet { border-top-color: rgba(139,92,246,0.25); }

.rj-proc-step--lime:hover   { border-top-color: rgba(200,255,61,0.50); }
.rj-proc-step--cyan:hover   { border-top-color: rgba(46,230,224,0.50); }
.rj-proc-step--violet:hover { border-top-color: rgba(139,92,246,0.50); }

.rj-proc-step__num--lime   { color: var(--rj-lime); }
.rj-proc-step__num--cyan   { color: var(--rj-cyan); }
.rj-proc-step__num--violet { color: var(--rj-violet, #8b5cf6); }

/* ── Service group section background rhythm ─────────────── */

#booking-ai,
#woo {
	background: rgba(10, 16, 30, 0.30);
}

/* ── Comparison table: problem column primary ────────────── */

.rj-compare td:first-child {
	color: var(--rj-text-secondary);
	font-size: 13px;
	line-height: 1.5;
}

.rj-compare td:nth-child(2) strong {
	color: var(--rj-text-primary);
	font-weight: 500;
}

/* ── Category cards: subtle color top borders ────────────── */

.rj-svc-cat:nth-child(1) { border-top: 2px solid rgba(200,255,61,0.20); }
.rj-svc-cat:nth-child(2) { border-top: 2px solid rgba(139,92,246,0.20); }
.rj-svc-cat:nth-child(3) { border-top: 2px solid rgba(46,230,224,0.20); }
.rj-svc-cat:nth-child(4) { border-top: 2px solid rgba(200,255,61,0.20); }

.rj-svc-cat:hover { background: rgba(13, 20, 36, 0.75); }

/* ── Final CTA: stronger glow ────────────────────────────── */

.rj-svc-final-cta {
	border: 1px solid var(--rj-border-mid, rgba(148,173,220,0.18));
	border-top: 1px solid rgba(200,255,61,0.18);
}

/* ============================================================
   SINGLE SERVICE — WIDGET MOCKUPS (hero + gallery)
   ============================================================ */

/* ── Hero: Booking calendar widget ──────────────────────────── */

.rj-shw-cal {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.rj-shw-cal__days,
.rj-shw-cal__dates {
	display: flex;
	justify-content: space-between;
}

.rj-shw-cal__days span {
	font-family: var(--rj-f-mono);
	font-size: 8px;
	color: var(--rj-text-secondary);
	letter-spacing: 0.06em;
	width: 18px;
	text-align: center;
}

.rj-shw-cal__dates span {
	font-size: 9px;
	font-weight: 500;
	width: 18px;
	text-align: center;
	border-radius: 4px;
	line-height: 18px;
	color: var(--rj-text-secondary);
}

.rj-shw-open {
	color: var(--rj-lime) !important;
	background: rgba(200,255,61,0.10);
}

.rj-shw-taken {
	opacity: 0.35;
	text-decoration: line-through;
}

.rj-shw-slot {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	letter-spacing: 0.05em;
	padding: 4px 7px;
	border-radius: 5px;
	border: 1px solid rgba(148,173,220,0.15);
	color: var(--rj-text-secondary);
}

.rj-shw-slot--active {
	border-color: rgba(200,255,61,0.40);
	color: var(--rj-lime);
	background: rgba(200,255,61,0.08);
}

.rj-shw-confirm {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--rj-lime);
	text-align: center;
	padding: 5px;
	border: 1px solid rgba(200,255,61,0.35);
	border-radius: 5px;
	margin-top: 2px;
}

/* ── Hero: Chat widget ───────────────────────────────────────── */

.rj-shw-chat {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.rj-shw-msg {
	font-size: 9px;
	line-height: 1.4;
	padding: 4px 7px;
	border-radius: 6px;
	max-width: 90%;
}

.rj-shw-msg--user {
	background: rgba(148,173,220,0.12);
	color: var(--rj-text-primary);
	align-self: flex-end;
	border-bottom-right-radius: 2px;
}

.rj-shw-msg--bot {
	background: rgba(46,230,224,0.10);
	border: 1px solid rgba(46,230,224,0.20);
	color: var(--rj-text-primary);
	align-self: flex-start;
	border-bottom-left-radius: 2px;
}

.rj-shw-msg--typing {
	font-size: 8px;
	letter-spacing: 3px;
	color: var(--rj-cyan);
	align-self: flex-start;
	background: none;
	border: none;
	padding: 2px 7px;
}

/* ── Hero: Checkout widget ───────────────────────────────────── */

.rj-shw-cart {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px 0;
	border-top: 1px solid rgba(148,173,220,0.10);
	border-bottom: 1px solid rgba(148,173,220,0.10);
}

.rj-shw-cart__row {
	display: flex;
	justify-content: space-between;
	font-size: 9px;
	color: var(--rj-text-secondary);
}

.rj-shw-cart__row span { color: var(--rj-text-primary); font-weight: 500; }

.rj-shw-cart__free span { color: var(--rj-lime); }

.rj-shw-cart__total {
	display: flex;
	justify-content: space-between;
	font-family: var(--rj-f-mono);
	font-size: 9.5px;
	letter-spacing: 0.06em;
	color: var(--rj-text-secondary);
	padding-top: 3px;
}

.rj-shw-cart__total strong { color: var(--rj-lime); }

.rj-shw-paybtn {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	background: var(--rj-lime);
	color: #0a1408;
	margin-top: 2px;
}

/* ── Hero: Speed widget ──────────────────────────────────────── */

.rj-shw-score {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--rj-lime);
	line-height: 1;
	text-align: center;
}

.rj-shw-cwv {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	border-top: 1px solid rgba(148,173,220,0.10);
	padding-top: 5px;
}

.rj-shw-cwv__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rj-shw-cwv__row span {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	letter-spacing: 0.05em;
	color: var(--rj-text-secondary);
}

.rj-shw-cwv__row em {
	font-style: normal;
	font-size: 9px;
	font-weight: 600;
	color: var(--rj-cyan);
}

/* ── Hero: Lead form widget ──────────────────────────────────── */

.rj-shw-rating {
	font-size: 9px;
	color: var(--rj-lime);
	font-family: var(--rj-f-mono);
	letter-spacing: 0.04em;
}

.rj-shw-field {
	font-size: 9px;
	color: var(--rj-text-secondary);
	padding: 4px 7px;
	border: 1px solid rgba(148,173,220,0.18);
	border-radius: 5px;
	background: rgba(10,16,28,0.40);
}

/* ── Hero: Product widget ────────────────────────────────────── */

.rj-shw-prod__name {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--rj-text-primary);
}

.rj-shw-prod__stars {
	font-size: 9px;
	color: var(--rj-lime);
}

.rj-shw-prod__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--rj-text-primary);
	letter-spacing: -0.01em;
}

.rj-shw-prod__price small {
	font-size: 9px;
	color: var(--rj-text-secondary);
	font-weight: 400;
}

.rj-shw-prod__badge {
	font-size: 8.5px;
	color: var(--rj-cyan);
	font-family: var(--rj-f-mono);
	letter-spacing: 0.04em;
}

/* ── Hero: AI search widget ──────────────────────────────────── */

.rj-shw-ais {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.rj-shw-ais__engine {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	letter-spacing: 0.06em;
	color: var(--rj-violet, #8b5cf6);
}

.rj-shw-ais__answer {
	font-size: 9px;
	line-height: 1.4;
	color: var(--rj-text-primary);
	font-style: italic;
	border-left: 2px solid rgba(139,92,246,0.40);
	padding-left: 6px;
}

.rj-shw-ais__cite {
	font-family: var(--rj-f-mono);
	font-size: 8px;
	color: var(--rj-cyan);
	letter-spacing: 0.04em;
}

/* ── Gallery: Chat frame ─────────────────────────────────────── */

.rj-gframe-chat {
	position: absolute;
	inset: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.rj-gfc-header {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	color: var(--rj-cyan);
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(46,230,224,0.20);
}

.rj-gfc-msg {
	font-size: 10px;
	line-height: 1.4;
	padding: 6px 9px;
	border-radius: 8px;
	max-width: 85%;
}

.rj-gfc-msg--user {
	background: rgba(148,173,220,0.10);
	color: var(--rj-text-primary);
	align-self: flex-end;
	border-bottom-right-radius: 2px;
}

.rj-gfc-msg--bot {
	background: rgba(46,230,224,0.10);
	border: 1px solid rgba(46,230,224,0.20);
	color: var(--rj-text-primary);
	border-bottom-left-radius: 2px;
}

.rj-gfc-input {
	font-size: 9px;
	color: var(--rj-text-secondary);
	padding: 5px 9px;
	border: 1px solid rgba(148,173,220,0.15);
	border-radius: 20px;
	margin-top: 4px;
}

/* ── Gallery: Checkout frame ─────────────────────────────────── */

.rj-gframe-co {
	position: absolute;
	inset: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.rj-gfco-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--rj-text-primary);
	margin-bottom: 4px;
}

.rj-gfco-field {
	font-size: 9.5px;
	color: var(--rj-text-secondary);
	padding: 5px 9px;
	border: 1px solid rgba(148,173,220,0.18);
	border-radius: 6px;
	background: rgba(10,16,28,0.40);
	flex: 1;
}

.rj-gfco-row {
	display: flex;
	gap: 6px;
}

.rj-gfco-btn {
	font-family: var(--rj-f-mono);
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	padding: 7px;
	border-radius: 7px;
	background: var(--rj-lime);
	color: #0a1408;
	letter-spacing: 0.04em;
	margin-top: 4px;
}

.rj-gfco-trust {
	font-size: 9px;
	color: var(--rj-text-secondary);
	text-align: center;
}

/* ── Gallery: Speed frame ────────────────────────────────────── */

.rj-gframe-speed {
	position: absolute;
	inset: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
}

.rj-gfs-label {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	letter-spacing: 0.10em;
	color: var(--rj-text-secondary);
}

.rj-gfs-score {
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--rj-lime);
	line-height: 1;
}

.rj-gfs-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	max-width: 160px;
	border-top: 1px solid rgba(148,173,220,0.10);
	padding-top: 8px;
}

.rj-gfs-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rj-gfs-row span {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	color: var(--rj-text-secondary);
	letter-spacing: 0.04em;
}

.rj-gfs-row em {
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	color: var(--rj-cyan);
}

.rj-gfs-status {
	font-family: var(--rj-f-mono);
	font-size: 8px;
	letter-spacing: 0.08em;
	color: var(--rj-lime);
}

/* ── Gallery: AI Search frame ────────────────────────────────── */

.rj-gframe-ais {
	position: absolute;
	inset: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.rj-gfais-engine {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
	color: var(--rj-violet, #8b5cf6);
}

.rj-gfais-q {
	font-size: 10px;
	color: var(--rj-text-secondary);
	font-style: italic;
}

.rj-gfais-answer {
	font-size: 10px;
	line-height: 1.5;
	color: var(--rj-text-primary);
	border-left: 2px solid rgba(139,92,246,0.40);
	padding-left: 8px;
}

.rj-gfais-cite {
	font-family: var(--rj-f-mono);
	font-size: 8.5px;
	color: var(--rj-cyan);
	letter-spacing: 0.04em;
}

.rj-gfais-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--rj-f-mono);
	font-size: 8px;
	letter-spacing: 0.08em;
	color: var(--rj-lime);
	background: rgba(200,255,61,0.10);
	border: 1px solid rgba(200,255,61,0.25);
	border-radius: 4px;
	padding: 3px 7px;
}

/* ── Gallery: Booking confirm frame ──────────────────────────── */

.rj-gframe-confirm {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 20px;
}

.rj-gfcon-ico {
	font-size: 28px;
	color: var(--rj-lime);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(200,255,61,0.12);
	border: 1px solid rgba(200,255,61,0.30);
}

.rj-gfcon-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--rj-text-primary);
}

.rj-gfcon-detail {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
	color: var(--rj-lime);
}

.rj-gfcon-note {
	font-size: 10px;
	color: var(--rj-text-secondary);
}

.rj-gfcon-sync {
	font-family: var(--rj-f-mono);
	font-size: 9px;
	color: var(--rj-cyan);
	letter-spacing: 0.04em;
}

/* ============================================================
   SERVICE CARD COVER IMAGE (.has-cover-image)
   ============================================================ */

.rj-scard.has-cover-image .rj-scard__vz,
.rj-scard__vz.has-cover-image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	justify-content: flex-end;
}

.rj-scard__vz-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	z-index: 0;
	filter: saturate(0.9) contrast(1.04) brightness(0.88);
}

.rj-scard.has-cover-image .rj-scard__vz::after,
.rj-scard__vz.has-cover-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(6, 10, 18, 0.25) 0%,
		rgba(6, 10, 18, 0.45) 50%,
		rgba(6, 10, 18, 0.9) 100%
	);
	pointer-events: none;
}

.rj-scard.has-cover-image .rj-scard__vz-glow,
.rj-scard__vz.has-cover-image .rj-scard__vz-glow {
	z-index: 2;
	opacity: 0.35;
}

.rj-scard.has-cover-image .rj-scard__vz-icon,
.rj-scard__vz.has-cover-image .rj-scard__vz-icon {
	display: none;
}

.rj-scard.has-cover-image .rj-scard__vz-tag,
.rj-scard__vz.has-cover-image .rj-scard__vz-tag {
	z-index: 3;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(8, 14, 24, 0.72);
	border: 1px solid rgba(148, 163, 184, 0.2);
}

.rj-scard.has-cover-image:hover .rj-scard__vz-img,
.rj-scard__vz.has-cover-image:hover .rj-scard__vz-img {
	transform: scale(1.04);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Service single hero — theme cover */
.rj-service-hero__img {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 25%;
	border-radius: var(--rj-r-xl, 20px);
	border: 1px solid rgba(148, 163, 184, 0.18);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
	filter: saturate(0.92) contrast(1.03) brightness(0.9);
}

/* ============================================================
   CHANGE 2 — PRICING: "From" label treatment + table outline CTAs
   ============================================================ */

/* Card footer: "From" text dimmer/smaller, price stays bold lime */
.rj-scard__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.rj-scard__price strong {
	font-size: 14px;
	font-weight: 700;
	color: var(--rj-lime);
	letter-spacing: -0.01em;
}

/* Comparison table: "from" label above each price cell value */
.rj-scard__quote-link {
	font-family: var(--rj-f-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rj-lime);
	text-decoration: none;
}

.rj-scard__quote-link:hover {
	text-decoration: underline;
}

/* Comparison table: action links styled as outline pill buttons */
.rj-compare__link {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 99px;
	border: 1px solid rgba(157, 255, 87, 0.30);
	background: transparent;
	color: var(--rj-lime);
	font-size: 11.5px;
	font-weight: 600;
	font-family: var(--rj-f-mono);
	letter-spacing: 0.04em;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rj-compare__link:hover {
	background: var(--rj-lime);
	color: #08120b;
	border-color: var(--rj-lime);
}

/* ============================================================
   SINGLE SERVICE PAGE — VISUAL POLISH (Issues 1–6)
   All selectors scoped to body.single-service or .rj-service-single
   so no homepage or archive pages are affected.
   ============================================================ */

/* ── Issue 1: Full-page dark background consistency ─────────── */

body.single-service {
	background-color: var(--rj-bg-0);
}

.rj-service-single {
	background-color: var(--rj-bg-0);
	min-height: 100vh;
}

/* Elementor Pro containers — transparent so the page bg bleeds through.
   Only applies on this post type; other page types are unaffected. */
.single-service .elementor-section,
.single-service .e-con {
	background-color: transparent;
}

/* Gallery section: strip the off-tint bg that breaks continuity */
.single-service .rj-service-gallery,
.single-service .rj-svc-gallery-pro {
	background: transparent;
}

.single-service .rj-svc-gallery-pro .rj-svc-gallery-showcase {
	border-color: rgba(184, 255, 59, 0.12);
}

.single-service .rj-service-problems,
.single-service .rj-svc-problems-pro {
	background: transparent;
}

.single-service .rj-svc-problems-pro .rj-svc-problems-showcase {
	border-color: rgba(248, 113, 113, 0.14);
}

.single-service .rj-service-tools,
.single-service .rj-svc-tools-pro {
	background: transparent;
}

.single-service .rj-svc-tools-pro .rj-svc-tools-showcase {
	border-color: rgba(34, 211, 238, 0.14);
}

.single-service .rj-service-process,
.single-service .rj-svc-process-pro {
	background: transparent;
}

.single-service .rj-svc-process-pro .rj-svc-process-showcase {
	border-color: rgba(184, 255, 59, 0.14);
}

/* ── Issue 3: Gallery frame consistent heights ──────────────── */
/* .rj-gallery-frame already has aspect-ratio:16/10.
   align-items:stretch ensures both columns in a row hit equal height. */

.single-service .rj-gallery-top,
.single-service .rj-gallery-pair {
	align-items: stretch;
}

.single-service .rj-gallery-frame {
	min-height: 180px; /* fallback for browsers without aspect-ratio */
}

/* ── Issue 4: Packages section visual cohesion ──────────────── */

.single-service .rj-service-pkgs {
	background: transparent;
	position: relative;
}

/* Subtle radial wash behind the packages grid */
.single-service .rj-service-pkgs::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 80% 60% at 50% 10%,
		rgba(13, 20, 36, 0.75),
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

.single-service .rj-pkgs-grid {
	position: relative;
	z-index: 1;
}

/* Tighten the card border so they read as a unified group */
.single-service .rj-pkg {
	border-color: var(--rj-border, rgba(148, 173, 220, 0.12));
}

.single-service .rj-pkgs-note {
	position: relative;
	z-index: 1;
}

/* ── Issue 5: Section spacing dividers ──────────────────────── */
/* .rj-section already has padding-block: clamp(64px,8vw,120px).
   Adding hairline dividers between adjacent sections creates
   visual rhythm without changing spacing values. */

.rj-service-single .rj-section + .rj-section {
	border-top: 1px solid var(--rj-border, rgba(148, 173, 220, 0.07));
}

/* ── Issue 6: Bottom CTA — smooth fade into footer ──────────── */

.single-service .rj-final-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	background: transparent;
}

/* Radial lime glow: replicates the homepage glow since home.css
   isn't loaded on service pages */
.single-service .rj-final-cta__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 60% 50% at 50% 100%,
		rgba(157, 255, 87, 0.10) 0%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

/* Gradient veil that blends the section into the footer */
.single-service .rj-final-cta::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--rj-bg-0, #020814)
	);
	pointer-events: none;
	z-index: 0;
}

/* Hairline divider at the base (above the fade) */
.single-service .rj-final-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	height: 1px;
	background: rgba(148, 173, 220, 0.08);
	z-index: 1;
}

.single-service .rj-final-cta__inner {
	position: relative;
	z-index: 1;
}