/* SWD Sky of sites hero — client sites drifting through a 3D starfield behind the H1. */
.swd.swd-skyhero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; isolation: isolate; z-index: 0; }
.swd-skyhero .hx__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #C9D1E3; margin-bottom: 26px; }
.swd-skyhero .hx__lead { margin-top: 28px; max-width: 34em; margin-left: auto; margin-right: auto; font-size: clamp(17px, 1.45vw, 20px); color: var(--muted); }
.swd-skyhero .hx__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; justify-content: center; }

.swd-skyhero .sky { position: absolute; inset: 0; perspective: 900px; transform-style: preserve-3d; z-index: 0; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent 0, #000 110px); mask: linear-gradient(180deg, transparent 60px, #000 190px); }
.swd-skyhero .sky__stars { position: absolute; inset: -10%; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 62%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 44% 12%, #cfe3ff 50%, transparent 51%), radial-gradient(1px 1px at 58% 83%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 71% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 66%, #cfe3ff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 93% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 84%, #fff 50%, transparent 51%); background-size: 420px 380px; opacity: .55; animation: swd-skyhero-twinkle 6s ease-in-out infinite alternate; }
@keyframes swd-skyhero-twinkle { to { opacity: .3; } }
.swd-skyhero .star { --w: var(--star-w, 230px); position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 16 / 10; margin: calc(var(--w) * -.313) 0 0 calc(var(--w) / -2); border-radius: 10px; background: var(--img) top center / cover no-repeat #1F2740; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 40px -10px rgba(0, 0, 0, .7); will-change: transform, opacity; cursor: pointer; opacity: 0; transition: box-shadow .25s; }
.swd-skyhero .star::after { content: attr(data-name); position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--acc); color: var(--ink); font: 600 13px/1 var(--f); opacity: 0; transition: opacity .2s; pointer-events: none; }
.swd-skyhero .star:hover, .swd-skyhero .star.is-hot { box-shadow: 0 0 0 2px var(--acc), 0 0 40px 6px rgba(92, 200, 255, .45); }
.swd-skyhero .star:hover::after, .swd-skyhero .star.is-hot::after { opacity: 1; }
.swd-skyhero .hx__glow { position: absolute; left: 50%; top: 50%; width: min(1100px, 110vw); height: 640px; margin: -320px 0 0 calc(min(1100px, 110vw) / -2); border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 26, 44, .96) 30%, rgba(20, 26, 44, .75) 60%, rgba(20, 26, 44, 0)); z-index: 1; pointer-events: none; }
.swd-skyhero .hxa__in { position: relative; z-index: 2; display: grid; justify-items: center; padding-top: 110px; padding-bottom: 80px; pointer-events: none; }
.swd-skyhero .hxa__in a { pointer-events: auto; }
.swd-skyhero .hxa__title { font-size: clamp(44px, 6.6vw, 96px); letter-spacing: -.045em; line-height: 1.05; }
.swd-skyhero .hxa__title .grad { background-image: linear-gradient(90deg, var(--g1, #5CC8FF) 0%, var(--g-mid, #7FA8FF) 45%, var(--g2, #B58CFF) 100%); }
.swd-skyhero .hxa__hint { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2; text-align: center; font-size: 14px; color: var(--muted); transition: opacity .4s; }

@media (max-width: 980px) {
	.swd-skyhero .star { --w: var(--star-w, 120px); margin: calc(var(--w) * -.317) 0 0 calc(var(--w) / -2); border-radius: 7px; }
	.swd-skyhero .star::after { display: none; }
	.swd-skyhero .sky { opacity: .55; }
	.swd-skyhero .hx__glow { height: 620px; margin-top: -310px; background: radial-gradient(closest-side, rgba(20, 26, 44, .97) 45%, rgba(20, 26, 44, .8) 70%, rgba(20, 26, 44, 0)); }
	.swd-skyhero .hxa__hint { display: none; }
}
@media (max-width: 640px) {
	.swd-skyhero .btn--lg { height: 54px; font-size: 18px; padding: 0 24px; }
}