@keyframes serveeit-glitch {
	0% {
		transform: translate(0);
		text-shadow: 2px 0 rgba(var(--serveeit-violet-rgb), 0.55), -2px 0 rgba(var(--serveeit-cyan-rgb), 0.45),
			var(--serveeit-glitch-shadow);
	}
	20% {
		transform: translate(-1px, 1px);
		text-shadow: -2px 0 rgba(var(--serveeit-violet-rgb), 0.55), 2px 0 rgba(var(--serveeit-cyan-rgb), 0.45),
			var(--serveeit-glitch-shadow);
	}
	40% {
		transform: translate(1px, -1px);
		text-shadow: 3px 0 rgba(var(--serveeit-danger-rgb), 0.35), -3px 0 rgba(var(--serveeit-cyan-rgb), 0.35),
			var(--serveeit-glitch-shadow);
	}
	60% {
		transform: translate(-1px, 0);
		text-shadow: -1px 0 rgba(var(--serveeit-violet-rgb), 0.45), 1px 0 rgba(var(--serveeit-cyan-rgb), 0.45),
			var(--serveeit-glitch-shadow);
	}
	100% {
		transform: translate(0);
		text-shadow: var(--serveeit-glitch-shadow);
	}
}

@keyframes serveeit-neon-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 rgba(var(--serveeit-cyan-rgb), 0), 0 0 0 rgba(var(--serveeit-violet-rgb), 0);
	}
	50% {
		box-shadow: 0 0 22px rgba(var(--serveeit-cyan-rgb), 0.35), 0 0 46px rgba(var(--serveeit-violet-rgb), 0.18);
	}
}

.serveeit-site h1.serveeit-glitch,
h1.serveeit-glitch {
	color: var(--serveeit-glitch-color);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.12;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
}

/**
 * Same turquoise / bold / glow as the hero glitch H1, without the intro glitch animation.
 * Use on other headings (e.g. Services detail rows) or any page — add class to the element.
 */
.serveeit-heading-match-hero {
	color: var(--serveeit-glitch-color);
	font-family: var(--serveeit-font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.12;
	text-transform: uppercase;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
	font-size: clamp(1.05rem, 2.2vw, 1.65rem);
}

/* “How we work” step titles — same accent palette, sized for H3 */
.serveeit-timeline h3 {
	color: var(--serveeit-glitch-color);
	font-family: var(--serveeit-font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
	font-size: clamp(0.88rem, 1.5vw, 1.12rem);
}

/* Front page (and elsewhere) service card titles */
.serveeit-card__title {
	color: var(--serveeit-glitch-color);
	font-weight: 900;
	letter-spacing: 0.06em;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
}

/* Front page bottom CTA headline */
.serveeit-cta-block h2 {
	color: var(--serveeit-glitch-color);
	font-family: var(--serveeit-font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.12;
	text-transform: uppercase;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
}

/* About: founder name (H2) + core value card titles (H3) */
.serveeit-founder__content > h2,
.serveeit-value-card h3 {
	color: var(--serveeit-glitch-color);
	font-family: var(--serveeit-font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
}

.serveeit-founder__content > h2 {
	font-size: clamp(1.05rem, 2.2vw, 1.65rem);
	line-height: 1.12;
}

.serveeit-value-card h3 {
	font-size: clamp(0.88rem, 1.5vw, 1.12rem);
}

/* Web Design template: all H2 / H3 in main */
.serveeit-tpl-web-design .serveeit-main h2,
.serveeit-tpl-web-design .serveeit-main h3 {
	color: var(--serveeit-glitch-color);
	font-family: var(--serveeit-font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
}

.serveeit-tpl-web-design .serveeit-main h2 {
	font-size: clamp(1.05rem, 2.2vw, 1.65rem);
	line-height: 1.12;
}

.serveeit-tpl-web-design .serveeit-main h3 {
	font-size: clamp(0.88rem, 1.5vw, 1.12rem);
}

/* Contact template: hero H1 keeps glitch animation; aside H2 / any H3 match hero accent */
.serveeit-tpl-contact .serveeit-main h1.serveeit-glitch {
	font-family: var(--serveeit-font-heading);
	text-transform: uppercase;
	font-size: clamp(1.65rem, 3.5vw, 2.6rem);
	line-height: 1.12;
}

.serveeit-tpl-contact .serveeit-main h2,
.serveeit-tpl-contact .serveeit-main h3 {
	color: var(--serveeit-glitch-color);
	font-family: var(--serveeit-font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: var(--serveeit-glitch-shadow);
	-webkit-font-smoothing: antialiased;
}

.serveeit-tpl-contact .serveeit-main h2 {
	font-size: clamp(1.05rem, 2.2vw, 1.65rem);
	line-height: 1.12;
}

.serveeit-tpl-contact .serveeit-main h3 {
	font-size: clamp(0.88rem, 1.5vw, 1.12rem);
}

.serveeit-glitch {
	animation: serveeit-glitch 0.85s ease-out 1 both;
}

@media (prefers-reduced-motion: reduce) {
	.serveeit-site h1.serveeit-glitch,
	h1.serveeit-glitch {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-heading-match-hero {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-timeline h3 {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-card__title {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-cta-block h2 {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-founder__content > h2,
	.serveeit-value-card h3 {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-tpl-web-design .serveeit-main h2,
	.serveeit-tpl-web-design .serveeit-main h3 {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-tpl-contact .serveeit-main h2,
	.serveeit-tpl-contact .serveeit-main h3 {
		text-shadow: var(--serveeit-glitch-shadow);
	}

	.serveeit-glitch {
		animation: none;
	}

	.serveeit-btn--pulse {
		animation: none;
	}
}

[data-serveeit-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s ease, transform 0.65s ease;
	will-change: opacity, transform;
}

[data-serveeit-reveal].is-inview {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-serveeit-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.serveeit-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, 0.35), transparent 45%);
	opacity: 0;
	transform: scale(0.2);
	transition: opacity 0.45s ease, transform 0.55s ease;
}

.serveeit-btn.is-rippling::after {
	opacity: 0.35;
	transform: scale(2.2);
}

@media (prefers-reduced-motion: reduce) {
	.serveeit-btn::after {
		display: none;
	}
}