.ssgp-orbital { padding: 80px 6%; background: radial-gradient(120% 100% at 50% 0%, var(--sgp-black-soft) 0%, var(--sgp-black) 55%); }
.ssgp-orbital-head { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.ssgp-orbital-sub { margin-top: 14px; color: var(--sgp-text-muted); font-size: 15px; line-height: 1.9; }

.ssgp-orbital-stage {
	--orbit-radius: 210px; --spot-size: 260px; --thumb-size: 74px;
	position: relative;
	width: calc(var(--orbit-radius) * 2 + var(--thumb-size) + 20px);
	height: calc(var(--orbit-radius) * 2 + var(--thumb-size) + 20px);
	max-width: 100%;
	margin: 0 auto;
	display: flex; align-items: center; justify-content: center;
}

.ssgp-orbit-ring { position: absolute; inset: 0; animation-name: ssgp-orbit-spin; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes ssgp-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ssgp-orbit-item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.ssgp-orbit-thumb-wrap {
	all: unset; position: absolute; top: 0; left: 0; transform: translate(-50%,-50%);
	width: var(--thumb-size); height: var(--thumb-size); cursor: pointer;
	border-radius: 50%; overflow: hidden;
	box-shadow: 0 10px 22px rgba(0,0,0,0.4);
	border: 2px solid rgba(255,255,255,0.12);
	transition: border-color .25s ease, transform .25s ease;
}
.ssgp-orbit-thumb-wrap:hover { transform: translate(-50%,-50%) scale(1.08); border-color: var(--sgp-gold); }
.ssgp-orbit-thumb-wrap.ssgp-orbit-thumb-active { border-color: var(--sgp-gold); box-shadow: 0 0 0 3px rgba(201,162,75,0.3), 0 10px 22px rgba(0,0,0,0.4); }

.ssgp-orbit-thumb-counter {
	display: block; width: 100%; height: 100%;
	animation-name: ssgp-orbit-spin-reverse; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes ssgp-orbit-spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.ssgp-orbit-thumb-counter img { width: 100%; height: 100%; object-fit: cover; }

.ssgp-orbit-ring:hover, .ssgp-orbit-ring:hover .ssgp-orbit-thumb-counter { animation-play-state: paused; }

.ssgp-orbit-center {
	position: relative; z-index: 2;
	width: var(--spot-size); height: var(--spot-size);
	border-radius: 50%; overflow: hidden;
	border: 4px solid var(--sgp-gold);
	box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.ssgp-orbit-spot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.ssgp-orbit-spot.ssgp-orbit-spot-active { opacity: 1; }
.ssgp-orbit-spot img { width: 100%; height: 100%; object-fit: cover; }
.ssgp-orbit-spot-caption {
	position: absolute; right: 0; bottom: 0; left: 0; padding: 16px 18px;
	background: linear-gradient(0deg, rgba(10,9,11,0.92), transparent);
	color: var(--sgp-white); text-align: center;
}
.ssgp-orbit-tag { display: inline-block; font-size: 10.5px; color: var(--sgp-gold); letter-spacing: 1px; margin-bottom: 4px; }
.ssgp-orbit-spot-caption strong { display: block; font-size: 13.5px; }

.ssgp-orbit-mobile-strip { display: none; }

@media (max-width: 780px) {
	.ssgp-orbit-ring, .ssgp-orbital-stage > .ssgp-orbit-ring { display: none; }
	.ssgp-orbital-stage { width: auto; height: auto; display: block; }
	.ssgp-orbit-center { margin: 0 auto; }
	.ssgp-orbit-mobile-strip { display: flex; gap: 12px; overflow-x: auto; padding: 18px 4px 4px; justify-content: flex-start; }
	.ssgp-orbit-mobile-thumb {
		all: unset; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; cursor: pointer;
		border: 2px solid rgba(255,255,255,0.15); transition: border-color .2s ease;
	}
	.ssgp-orbit-mobile-thumb img { width: 100%; height: 100%; object-fit: cover; }
	.ssgp-orbit-mobile-thumb.ssgp-orbit-thumb-active { border-color: var(--sgp-gold); }
}

@media (prefers-reduced-motion: reduce) {
	.ssgp-orbit-ring, .ssgp-orbit-thumb-counter { animation: none !important; }
}