@media (hover: hover) {
	.btn-primary:hover {
		transform: translateY(-2px);
		box-shadow:
			0 14px 34px rgba(59, 130, 246, .30);
	}
	
	.btn-secondary:hover {
		transform: translateY(-2px);
		background:
			rgba(255, 255, 255, .07);
	}
}

.cta-btn:active {
	transform: scale(0.98);
}

.cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		transform .25s ease,
		background .25s ease,
		border-color .25s ease,
		box-shadow .25s ease;
}

.btn-primary {
	background: linear-gradient(135deg,
			#7dd3fc,
			#60a5fa);
	color: #0f172a;
	box-shadow:
		0 10px 28px rgba(59, 130, 246, .22);
}

.btn-secondary {
	border:
		1px solid rgba(255, 255, 255, .08);
	background:
		rgba(255, 255, 255, .04);
	color: #dbeafe;
}

.ripple-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ripple-btn span {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple .75s ease-out;
	pointer-events: none;
}

.btn-primary span {
	background:
		radial-gradient(circle,
			rgba(15, 23, 42, .22) 0%,
			rgba(15, 23, 42, .12) 45%,
			transparent 65%);
}

.btn-secondary span {
	background:
		radial-gradient(circle,
			rgba(255, 255, 255, .18) 0%,
			rgba(255, 255, 255, .08) 45%,
			transparent 75%);
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}