/* Security Biz – Thank You screen */
.sb-ty { --ty-main: var(--sb-green-light); }

/* staggered entrance */
.sb-ty__a { opacity: 0; transform: translateY(22px); animation: sbTyUp .8s var(--pg-ease) forwards; animation-delay: calc(.55s + var(--i, 0) * .12s); }
@keyframes sbTyUp { to { opacity: 1; transform: none; } }

/* ---------- Badge ---------- */
.sb-ty__badge { position: relative; width: clamp(150px, 26vh, 230px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: clamp(18px, 3.5vh, 36px); }
.sb-ty__tick {
	position: relative; z-index: 3; width: 62%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
	background: radial-gradient(circle at 35% 28%, #6cc576, var(--ty-main) 45%, #278c33 100%);
	box-shadow: 0 18px 40px rgba(39, 140, 51, .35), inset 0 -6px 14px rgba(0, 0, 0, .1);
	transform: scale(0); animation: sbTyPop .7s cubic-bezier(.34, 1.56, .64, 1) .1s forwards;
}
.sb-ty__tick svg { width: 62%; height: 62%; }
.sb-ty__tick path { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: sbTyDraw .6s ease-out .65s forwards; }
@keyframes sbTyPop { to { transform: scale(1); } }
@keyframes sbTyDraw { to { stroke-dashoffset: 0; } }

.sb-ty__halo, .sb-ty__orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.sb-ty__halo { inset: 12%; z-index: 2; background: rgba(63, 174, 73, .1); box-shadow: 0 0 0 10px rgba(255, 255, 255, .85); opacity: 0; animation: sbTyHalo 3.2s ease-in-out .8s infinite; }
.sb-ty__halo--2 { inset: 2%; z-index: 1; background: rgba(63, 174, 73, .07); box-shadow: none; animation-delay: 1.3s; }
.sb-ty__orbit { inset: -14%; border: 1px solid rgba(63, 174, 73, .18); animation: sbPgSpin 22s linear infinite; }
.sb-ty__orbit::after { content: ""; position: absolute; top: 4%; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--sb-green-light); }
@keyframes sbTyHalo { 0% { transform: scale(.82); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }

/* ---------- Confetti ---------- */
.sb-ty__confetti { position: absolute; inset: -30%; pointer-events: none; z-index: 4; }
.sb-ty__confetti .c { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--sb-green-light); opacity: 0; --x: 0px; --y: 0px; --r: 0deg;
	animation: sbTyBurst 1s var(--pg-ease) forwards, sbTyFloat 4s ease-in-out 1.2s infinite; animation-delay: calc(.6s + var(--k, 0) * .03s), calc(1.6s + var(--k, 0) * .15s); }
.sb-ty__confetti .c.t { border-radius: 0; width: 0; height: 0; background: none; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid var(--sb-orange); }
.sb-ty__confetti .c.s { width: 6px; height: 6px; }
.sb-ty__confetti .c.p { background: rgba(63, 174, 73, .3); width: 13px; height: 13px; }
.sb-ty__confetti .c.o { background: var(--sb-orange); width: 5px; height: 5px; }
.sb-ty__confetti .c1  { --x: -50%; --y: -22%; --k: 1; }
.sb-ty__confetti .c2  { --x: -39%;  --y: -4%; --k: 2; }
.sb-ty__confetti .c3  { --x: -54%; --y: 3%;   --k: 3; }
.sb-ty__confetti .c4  { --x: -36%;  --y: 19%;  --k: 4; }
.sb-ty__confetti .c5  { --x: -13%;  --y: -40%; --k: 5; }
.sb-ty__confetti .c6  { --x: 17%;   --y: -38%; --k: 6; }
.sb-ty__confetti .c7  { --x: 39%;   --y: -27%; --k: 7; }
.sb-ty__confetti .c8  { --x: 51%;  --y: -3%;  --k: 8; }
.sb-ty__confetti .c9  { --x: 40%;   --y: 17%;  --k: 9; }
.sb-ty__confetti .c10 { --x: 29%;   --y: 34%;  --k: 10; }
.sb-ty__confetti .c11 { --x: -22%;  --y: 34%;  --k: 11; }
.sb-ty__confetti .c12 { --x: 3%;    --y: 40%;  --k: 12; }
.sb-ty__confetti .c13 { --x: 51%;  --y: -17%; --k: 13; }
.sb-ty__confetti .c14 { --x: -45%; --y: -40%; --k: 14; }
/* shape assignment */
.sb-ty__confetti .c1, .sb-ty__confetti .c7, .sb-ty__confetti .c10, .sb-ty__confetti .c4 { border-radius: 0; width: 0; height: 0; background: none; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid var(--sb-orange); }
.sb-ty__confetti .c3, .sb-ty__confetti .c9 { background: rgba(63, 174, 73, .3); width: 13px; height: 13px; }
.sb-ty__confetti .c2, .sb-ty__confetti .c12 { background: var(--sb-orange); width: 5px; height: 5px; }
.sb-ty__confetti .c5, .sb-ty__confetti .c11, .sb-ty__confetti .c14 { width: 6px; height: 6px; }
@keyframes sbTyBurst { 0% { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0) rotate(0); } 100% { opacity: 1; left: calc(50% + var(--x)); top: calc(50% + var(--y)); transform: translate(-50%, -50%) scale(1) rotate(160deg); } }
@keyframes sbTyFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

/* ---------- Text ---------- */
.sb-ty__title { margin: 0; font-size: clamp(38px, 7vh, 66px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--sb-heading); }
.sb-ty__sub { margin: clamp(8px, 1.6vh, 14px) 0 0; font-size: clamp(20px, 3.4vh, 32px); line-height: 1.2; font-weight: 700; color: var(--sb-green); }
.sb-ty__text { margin: clamp(10px, 2vh, 18px) 0 0; max-width: 600px; font-size: clamp(15px, 2.1vh, 18.5px); line-height: 1.65; color: var(--sb-text); }

/* ---------- Progress bar ---------- */
.sb-ty__bar { display: block; width: 130px; height: 7px; margin-top: clamp(18px, 3vh, 30px); border-radius: 99px; background: rgba(63, 174, 73, .22); overflow: hidden; }
.sb-ty__bar i { display: block; height: 100%; width: 56%; border-radius: inherit; background: linear-gradient(90deg, var(--sb-green), var(--sb-green-light)); transform-origin: left; animation: sbTyBar 2.4s var(--pg-ease) 1.1s both; }
.sb-ty__bar.is-timed i { width: 100%; animation: sbTyBarFill var(--ty-dur, 6s) linear 1s both; }
@keyframes sbTyBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sbTyBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 767px) {
	.sb-ty__confetti { inset: -22%; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-ty__a, .sb-ty__tick, .sb-ty__tick path, .sb-ty__confetti .c, .sb-ty__bar i { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
	.sb-ty__confetti .c { left: calc(50% + var(--x)); top: calc(50% + var(--y)); transform: translate(-50%, -50%) !important; }
	.sb-ty__halo, .sb-ty__orbit { animation: none !important; }
}