/* Service Detail template */
.svc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding: 90px 0;
	background: #000;
	overflow: hidden;
}
.svc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hero-img) no-repeat right center / cover;
	animation: svcBgIn 1.4s ease-out both, svcDrift 24s ease-in-out 1.4s infinite alternate;
}
.svc-hero .container { position: relative; z-index: 2; }
.svc-hero .svc-eyebrow, .svc-hero .svc-headline, .svc-hero .svc-sub, .svc-hero .svc-btn {
	animation: svcUp .8s cubic-bezier(.2,.7,.2,1) both;
}
.svc-hero .svc-eyebrow { animation-delay: .15s; }
.svc-hero .svc-headline { animation-delay: .3s; }
.svc-hero .svc-sub { animation-delay: .45s; }
.svc-hero .svc-btn { animation-delay: .6s; }
@keyframes svcUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes svcBgIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes svcDrift { from { transform: scale(1); } to { transform: scale(1.06) translateX(-1.5%); } }
@media (prefers-reduced-motion: reduce) {
	.svc-hero::before, .svc-hero .svc-eyebrow, .svc-hero .svc-headline, .svc-hero .svc-sub, .svc-hero .svc-btn { animation: none; }
}
.svc-eyebrow, .svc-label {
	color: #ffc107;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.svc-headline { font-size: 2.6rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.2rem; }
.svc-sub { color: #b4b9c4; font-size: 1.15rem; line-height: 1.6; margin-bottom: 2rem; }
.svc-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .9rem 1.8rem;
	background: #ffc107;
	color: #111;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: background .25s, gap .25s, box-shadow .25s;
}
.svc-btn:hover { background: #fff; color: #111; gap: 1rem; box-shadow: 0 0 24px rgba(255, 161, 1, .4); }

.svc-section { padding: 80px 0; background: #000; }
.svc-section-alt { background: #000; }
.svc-title { font-size: 2rem; font-weight: 800; margin-bottom: 3rem; }
.svc-label { text-align: center; margin-bottom: .6rem; }

.svc-card {
	height: 100%;
	padding: 2rem 1.8rem;
	background: linear-gradient(180deg, #101217, #08090c);
	border: 1px solid #2a2e36;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
	transition: border-color .3s, transform .3s;
}
.svc-card:hover { border-color: #ffa101; transform: translateY(-4px); }
.svc-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .7rem; color: #fff; }
.svc-card p { color: #a3a8b3; line-height: 1.65; margin: 0; }
.svc-num { font-weight: 800; font-size: 1.6rem; line-height: 1; color: #ffa101; margin-bottom: 1rem; }

.svc-tech { max-width: 820px; margin: 0 auto; display: grid; gap: 1.2rem; }
.svc-tech-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.3rem 1.5rem;
	background: #101217;
	border: 1px solid #2a2e36;
	border-left: 3px solid #ffa101;
	border-radius: 12px;
	color: #c9cdd6;
	line-height: 1.6;
}
.svc-tech-item i { color: #ffc107; margin-top: .3rem; }
.svc-tech-item strong { color: #fff; }

.svc-cta {
	padding: 90px 0;
	background: #000;
}
.svc-cta h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; }
.svc-cta p { color: #b4b9c4; font-size: 1.1rem; max-width: 640px; margin: 0 auto 2rem; }

@media (max-width: 767px) {
	.svc-headline { font-size: 2rem; }
	.svc-hero { padding: 60px 0; min-height: 520px; }
	.svc-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .65); z-index: 1; }
	.svc-section { padding: 56px 0; }
}