/* ============================================
   SERVICES PAGE - CLEAN MODERN DESIGN
   ============================================ */

/* --- HERO --- */
.garage-services-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: max(var(--space-2xl), 10vh);
	overflow: hidden;
	isolation: isolate;
}

.garage-services-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.garage-services-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	pointer-events: none;
}

.garage-services-hero__orb--1 {
	width: 50vw;
	height: 50vw;
	max-width: 600px;
	max-height: 600px;
	top: -15%;
	right: -12%;
	background: var(--clr-primary-400, #ff4d57);
	opacity: 0.1;
	animation: orbFloat 12s ease-in-out infinite;
}

.garage-services-hero__orb--2 {
	width: 35vw;
	height: 35vw;
	max-width: 400px;
	max-height: 400px;
	bottom: -10%;
	left: -8%;
	background: var(--clr-accent-400, #f5f5f5);
	opacity: 0.08;
	animation: orbFloat 16s ease-in-out infinite reverse;
}

.garage-services-hero__grid {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse at 70% 40%, black 30%, transparent 70%);
}

.garage-services-hero__layout {
	display: grid;
	gap: var(--space-2xl);
	align-items: center;
}

.garage-services-hero__content {
	display: grid;
	gap: var(--space-lg);
	max-width: 42rem;
}

.garage-services-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.45rem 1rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 999px;
	font-size: var(--fs-200);
	color: var(--text-muted);
	width: fit-content;
}

.garage-pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--clr-primary-400);
	box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.5);
	animation: pulse 2s ease-in-out infinite;
}

.garage-services-hero__title {
	margin: 0;
	font-family: var(--ff-heading);
	font-size: clamp(2.4rem, 5.5vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--text-strong);
}

.garage-services-hero__text {
	font-size: var(--fs-500);
	line-height: 1.6;
	color: var(--text-muted);
	max-width: 38rem;
}

.garage-services-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.garage-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 999px;
	font-size: var(--fs-200);
	color: var(--text-soft);
}

.garage-tag svg {
	color: var(--clr-primary-400);
	flex-shrink: 0;
}

.garage-services-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	padding-block-start: var(--space-sm);
}

/* Hero Visual Card */
.garage-services-hero__visual {
	display: flex;
	justify-content: center;
}

.garage-services-hero__card {
	position: relative;
	width: 100%;
	max-width: 24rem;
	padding: var(--space-2xl);
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius-xl);
	backdrop-filter: blur(12px);
}

.garage-services-hero__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, rgba(76,201,240,0.15), rgba(255,60,138,0.1));
	border-radius: var(--radius-md);
	color: var(--clr-primary-400);
	margin-block-end: var(--space-lg);
}

.garage-services-hero__card h3 {
	margin: 0 0 var(--space-lg);
	font-size: var(--fs-400);
	color: var(--text-strong);
}

.garage-services-hero__card ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-md);
}

.garage-services-hero__card li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: var(--fs-300);
	color: var(--text-soft);
	line-height: 1.5;
}

.garage-services-hero__card li svg {
	flex-shrink: 0;
	color: var(--clr-primary-400);
	margin-block-start: 3px;
}

/* --- SERVICES GRID --- */
.garage-services-grid {
	display: grid;
	gap: var(--space-lg);
}

.garage-service-item {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.garage-service-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.garage-service-item:nth-child(1).is-visible { transition-delay: 0s; }
.garage-service-item:nth-child(2).is-visible { transition-delay: 0.1s; }
.garage-service-item:nth-child(3).is-visible { transition-delay: 0.2s; }
.garage-service-item:nth-child(4).is-visible { transition-delay: 0.3s; }

.garage-service-item__inner {
	padding: var(--space-2xl);
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: var(--radius-xl);
	transition: all 0.35s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.garage-service-item__inner:hover {
	background: rgba(255,255,255,0.04);
	border-color: rgba(76,201,240,0.25);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.garage-service-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(193, 18, 31, 0.12);
	border-radius: var(--radius-md);
	color: var(--clr-primary-400);
	margin-block-end: var(--space-lg);
	transition: all 0.35s ease;
}

.garage-service-item__inner:hover .garage-service-item__icon {
	background: var(--clr-primary-400);
	color: var(--clr-accent-400);
	box-shadow: 0 8px 24px rgba(193, 18, 31, 0.35);
}

.garage-service-item__title {
	margin: 0 0 var(--space-sm);
	font-size: var(--fs-500);
	color: var(--text-strong);
}

.garage-service-item__desc {
	font-size: var(--fs-300);
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0 0 var(--space-lg);
}

.garage-service-item__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
	display: grid;
	gap: var(--space-sm);
	flex: 1;
}

.garage-service-item__list li {
	position: relative;
	padding-left: 1.4rem;
	font-size: var(--fs-200);
	color: var(--text-soft);
	line-height: 1.5;
}

.garage-service-item__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--clr-primary-400);
}

.garage-service-item__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-200);
	font-weight: 600;
	color: var(--clr-primary-400);
	text-decoration: none;
	transition: gap 0.3s ease, color 0.3s ease;
	margin-block-start: auto;
}

.garage-service-item__link:hover {
	gap: 0.7rem;
	color: var(--clr-accent-400);
}

/* --- PROCESS TRACK --- */
.garage-process-track {
	display: grid;
	gap: var(--space-lg);
}

.garage-process-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: var(--space-xl);
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: var(--radius-lg);
	position: relative;
	transition: all 0.4s ease;
	opacity: 0;
	transform: translateX(-30px);
}

.garage-process-item.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.garage-process-item.is-active {
	background: rgba(193, 18, 31, 0.08);
	border-color: rgba(193, 18, 31, 0.25);
}

.garage-process-item__step {
	flex-shrink: 0;
}

.garage-process-item__step span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--radius-md);
	font-family: var(--ff-mono, monospace);
	font-size: var(--fs-400);
	font-weight: 700;
	color: var(--text-muted);
	transition: all 0.4s ease;
}

.garage-process-item.is-active .garage-process-item__step span {
	background: var(--clr-primary-400);
	border-color: var(--clr-primary-400);
	color: var(--clr-accent-400);
	box-shadow: 0 8px 24px rgba(193, 18, 31, 0.3);
}

.garage-process-item p {
	font-size: var(--fs-300);
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
	transition: color 0.4s ease;
}

.garage-process-item.is-active p {
	color: var(--text-strong);
}

.garage-process-item__arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(193, 18, 31, 0.3);
	display: none;
}

/* --- CTA BLOCK --- */
.garage-cta-block {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: linear-gradient(135deg, rgba(193, 18, 31, 0.12), rgba(245, 245, 245, 0.05));
	border: 1px solid rgba(255,255,255,0.08);
}

.garage-cta-block__inner {
	display: grid;
	gap: var(--space-xl);
	padding: var(--space-3xl);
	position: relative;
	z-index: 1;
}

.garage-cta-block__content {
	display: grid;
	gap: var(--space-md);
}

.garage-cta-block__title {
	margin: 0;
	font-family: var(--ff-heading);
	font-size: var(--fs-600);
	line-height: 1.2;
	color: var(--text-strong);
}

.garage-cta-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
}

.garage-btn--outline-light {
	border-color: rgba(255,255,255,0.25);
	color: var(--clr-accent-400);
}

.garage-btn--outline-light:hover {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.5);
}

/* --- ANIMATIONS --- */
@keyframes orbFloat {
	0%, 100% { transform: translate(0,0) scale(1); }
	33% { transform: translate(2%,-3%) scale(1.05); }
	66% { transform: translate(-1%,2%) scale(0.95); }
}

@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.5); }
	50% { box-shadow: 0 0 0 8px rgba(193, 18, 31, 0); }
}

/* --- RESPONSIVE --- */
@media (min-width: 768px) {
	.garage-services-hero__layout {
		grid-template-columns: 1.1fr 0.9fr;
	}

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

	.garage-process-track {
		grid-template-columns: repeat(4, 1fr);
	}

	.garage-process-item {
		flex-direction: column;
		gap: var(--space-md);
	}

	.garage-process-item__arrow {
		display: block;
	}

	.garage-cta-block__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.garage-services-grid {
		gap: var(--space-xl);
	}

	.garage-service-item__inner {
		padding: var(--space-3xl);
	}

	.garage-cta-block__inner {
		padding: var(--space-3xl) var(--space-4xl);
	}
}

@media (max-width: 767px) {
	.garage-services-hero__visual {
		display: none;
	}

	.garage-services-hero__content {
		text-align: center;
	}

	.garage-services-hero__badge,
	.garage-services-hero__tags,
	.garage-services-hero__actions {
		justify-content: center;
		margin-inline: auto;
	}

	.garage-process-item__arrow {
		display: none;
	}

	.garage-cta-block__inner {
		text-align: center;
		padding: var(--space-2xl);
	}

	.garage-cta-block__actions {
		justify-content: center;
	}
}