.site-back-to-top {
	--back-to-top-size: 56px;
	position: fixed;
	right: clamp(18px, 2.4vw, 36px);
	bottom: clamp(18px, 2.4vw, 34px);
	z-index: 900;
	display: grid;
	width: var(--back-to-top-size);
	height: var(--back-to-top-size);
	padding: 0;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 18px;
	background:
		linear-gradient(145deg, #07315d 0%, #041f3b 100%) padding-box,
		linear-gradient(145deg, #e7bc68 0%, #936814 100%) border-box;
	box-shadow:
		0 15px 34px rgba(4, 31, 59, 0.28),
		0 4px 10px rgba(185, 133, 32, 0.16);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(14px) scale(0.88);
	visibility: hidden;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s ease,
		box-shadow 0.25s ease;
}

.site-back-to-top::before {
	position: absolute;
	inset: 4px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	content: "";
	pointer-events: none;
}

.site-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	visibility: visible;
}

.site-back-to-top:hover {
	box-shadow:
		0 18px 38px rgba(4, 31, 59, 0.34),
		0 6px 14px rgba(185, 133, 32, 0.22);
	transform: translateY(-3px) scale(1);
}

.site-back-to-top:active {
	transform: translateY(-1px) scale(0.96);
}

.site-back-to-top:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow:
		0 0 0 6px #07315d,
		0 18px 38px rgba(4, 31, 59, 0.34);
}

.site-back-to-top__arrow {
	position: relative;
	display: block;
	width: 20px;
	height: 22px;
}

.site-back-to-top__arrow::before,
.site-back-to-top__arrow::after {
	position: absolute;
	left: 50%;
	content: "";
	transform: translateX(-50%);
}

.site-back-to-top__arrow::before {
	top: 3px;
	width: 11px;
	height: 11px;
	border-top: 2px solid #e7bc68;
	border-left: 2px solid #e7bc68;
	transform: translateX(-50%) rotate(45deg);
}

.site-back-to-top__arrow::after {
	top: 5px;
	width: 2px;
	height: 15px;
	border-radius: 2px;
	background: #e7bc68;
}

.site-back-to-top__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 680px) {
	.site-back-to-top {
		--back-to-top-size: 49px;
		right: 15px;
		bottom: 15px;
		border-radius: 16px;
	}

	.site-back-to-top::before {
		border-radius: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-back-to-top {
		transition: none;
	}
}