/* Security Biz – shared styles for Thank You + 404 screens (decor circles, buttons, motion) */
.sb-ty, .sb-e4 {
	--pg-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(32px, 6vh, 72px) 20px;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	text-align: center;
	background:
		radial-gradient(60% 50% at 50% 40%, #fff 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #fbfdfb 0%, #f4faf5 100%);
	font-family: var(--sb-font);
}
.sb-ty__inner, .sb-e4__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------- Decorative vector circles ---------- */
.sb-pg-deco { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.sb-pg-deco--tl {
	width: clamp(180px, 22vw, 340px); aspect-ratio: 1; top: -9%; left: -6%;
	background: radial-gradient(circle at 60% 60%, rgba(63, 174, 73, .18), rgba(63, 174, 73, .04) 70%);
	box-shadow: inset 0 0 0 clamp(18px, 3vw, 44px) rgba(255, 255, 255, .75);
	animation: sbPgDrift 14s ease-in-out infinite;
}
.sb-pg-deco--tr {
	width: clamp(140px, 18vw, 280px); aspect-ratio: 1; top: -6%; right: -5%;
	background: radial-gradient(circle at 40% 50%, rgba(63, 174, 73, .14), rgba(63, 174, 73, .02) 70%);
	box-shadow: inset 0 0 0 clamp(14px, 2.4vw, 36px) rgba(255, 255, 255, .8);
	animation: sbPgDrift 18s ease-in-out -4s infinite reverse;
}
.sb-pg-deco--bl {
	width: clamp(160px, 20vw, 320px); aspect-ratio: 1; bottom: -12%; left: -5%;
	background: radial-gradient(circle at 60% 40%, rgba(63, 174, 73, .16), rgba(63, 174, 73, .03) 72%);
	animation: sbPgDrift 16s ease-in-out -7s infinite;
}
.sb-pg-deco--br {
	width: clamp(220px, 28vw, 460px); aspect-ratio: 1; bottom: -18%; right: -7%;
	background: radial-gradient(circle at 30% 30%, rgba(106, 196, 112, .55), var(--sb-green-light) 55%, #2f9a3a 100%);
	opacity: .92;
	animation: sbPgDrift 20s ease-in-out -2s infinite;
}
.sb-pg-deco--br::before {
	content: ""; position: absolute; inset: -9%; border-radius: 50%;
	border: 1.5px solid rgba(63, 174, 73, .45); border-right-color: transparent; border-bottom-color: transparent;
	animation: sbPgSpin 24s linear infinite;
}
.sb-pg-deco--br::after {
	content: ""; position: absolute; inset: -16%; border-radius: 50%;
	border: 1.5px solid rgba(247, 147, 30, .55); border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent;
	animation: sbPgSpin 32s linear infinite reverse;
}
@keyframes sbPgDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14px, -18px, 0) scale(1.04); } }
@keyframes sbPgSpin { to { transform: rotate(360deg); } }

/* ---------- Buttons ---------- */
.sb-pg__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(20px, 3.4vh, 34px); }
.sb-pg__btn { padding: 15px 30px; font-size: 15.5px; border-radius: 10px; box-shadow: 0 10px 24px rgba(247, 147, 30, .28); }
.sb-pg__btn:hover, .sb-pg__btn:focus-visible { box-shadow: 0 14px 28px rgba(29, 107, 44, .25); transform: translateY(-3px); }
.sb-pg__btn:active { transform: translateY(-1px) scale(.98); }
.sb-pg__btn i, .sb-pg__btn svg { transition: transform .35s var(--pg-ease); }
.sb-pg__btn:hover .fa-arrow-right { transform: translateX(5px); }
.sb-pg__btn:hover .fa-home, .sb-pg__btn:hover .fa-th-large { transform: scale(1.15); }
.sb-pg__btn--soft {
	background: var(--sb-green-soft); color: var(--sb-green); border-color: rgba(29, 107, 44, .12); box-shadow: none;
}
.sb-pg__btn--soft:hover, .sb-pg__btn--soft:focus-visible {
	background: var(--sb-green); border-color: var(--sb-green); color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.sb-pg__btns { flex-direction: column; width: 100%; max-width: min(360px, 100%); gap: 12px; }
	.sb-pg__btns, .sb-pg__btn { box-sizing: border-box; }
	.sb-pg__btn { width: 100%; padding: 14px 22px; white-space: normal; }
	.sb-pg-deco--br { right: -25%; bottom: -10%; }
}
@media (max-height: 560px) and (orientation: landscape) {
	.sb-ty, .sb-e4 { padding-top: 24px; padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-pg-deco, .sb-pg-deco::before, .sb-pg-deco::after { animation: none !important; }
}