/* ==========================================================================
   About: Our purpose
   The Mission / Vision / Promise switcher. HTML: template-parts/about/our-purpose.php
   ========================================================================== */

.spot__wrap { --sc: #a78bfa; position: relative; max-width: 980px; margin: 0 auto; text-align: center; isolation: isolate; }
.spot__orb { position: absolute; z-index: -1; left: 50%; top: 58%; width: min(620px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sc) 38%, transparent), transparent 62%); filter: blur(30px); transition: background .8s; animation: spot-breathe 7s ease-in-out infinite; }
.spot__tabs { display: inline-flex; gap: 6px; padding: 6px; margin-bottom: clamp(30px, 4vw, 48px); border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); }
.spot__tab { --tc: #a78bfa; display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 1rem; transition: color .3s, background .4s, box-shadow .4s; }
.spot__tab .std-icon { color: var(--tc); transition: color .3s; }
.spot__tab:hover { color: #fff; }
.spot__tab.is-active { color: #0b0620; background: var(--tc); box-shadow: 0 10px 30px -10px var(--tc); }
.spot__tab.is-active .std-icon { color: #0b0620; }
.spot__panel[hidden] { display: none; }
.spot__panel.is-active { animation: step-in .6s var(--ease) both; }
.spot__label { display: inline-block; margin-bottom: 14px; font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pc); }
.spot__statement { margin: 0 auto 18px; max-width: 860px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -.03em; color: #fff; }
.spot__text { max-width: 600px; margin: 0 auto 26px; color: #cfc9ea; font-size: 1.08rem; }
.spot__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.spot__points li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 12%, rgba(7, 4, 26, .5)); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); color: #fff; font-size: .92rem; font-weight: 500; backdrop-filter: blur(8px); }
.spot__points .std-icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--pc); color: #0b0620; stroke-width: 2.8; }

@media (max-width: 560px) {
	.spot__tabs { display: flex; width: 100%; }
	.spot__tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: .86rem; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.spot__orb { animation: none; }
}