<div class="ccm-svc">
  <input type="radio" name="ccm-svc" id="ccm-svc-0" class="ccm-svc-r" hidden checked />
  <input type="radio" name="ccm-svc" id="ccm-svc-1" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-2" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-3" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-4" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-5" class="ccm-svc-r" hidden />
  <div class="ccm-svc-orbit" aria-hidden="true"></div>
  <div class="ccm-svc-disc">
    <span class="ccm-svc-title ccm-svc-t-0">Industries</span>
    <span class="ccm-svc-title ccm-svc-t-1">Validation</span>
    <span class="ccm-svc-title ccm-svc-t-2">Engineering</span>
    <span class="ccm-svc-title ccm-svc-t-3">Project Mgmt</span>
    <span class="ccm-svc-title ccm-svc-t-4">Manufacturing</span>
    <span class="ccm-svc-title ccm-svc-t-5">Automation</span>
    <span class="ccm-svc-cta">Learn more →</span>
  </div>
  <div class="ccm-svc-pointer" aria-hidden="true"></div>
  <label for="ccm-svc-0" class="ccm-svc-sat" style="--i: 0" aria-label="Industries"
    ><span>♨</span></label
  >
  <label for="ccm-svc-1" class="ccm-svc-sat" style="--i: 1" aria-label="Validation"
    ><span>✓</span></label
  >
  <label for="ccm-svc-2" class="ccm-svc-sat" style="--i: 2" aria-label="Engineering"
    ><span>⚙</span></label
  >
  <label for="ccm-svc-3" class="ccm-svc-sat" style="--i: 3" aria-label="Project Management"
    ><span>◈</span></label
  >
  <label for="ccm-svc-4" class="ccm-svc-sat" style="--i: 4" aria-label="Manufacturing"
    ><span>⛭</span></label
  >
  <label for="ccm-svc-5" class="ccm-svc-sat" style="--i: 5" aria-label="Automation"
    ><span>⌬</span></label
  >
</div>

.ccm-svc {
  --n: 6;
  --ba: calc(360deg / var(--n));
  --r: 105px;
  --pa: 0deg;
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.ccm-svc-orbit {
  position: absolute;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  border: 1px dashed rgba(124, 108, 255, 0.18);
  background: radial-gradient(circle at center, rgba(124, 108, 255, 0.08), transparent 70%);
}

.ccm-svc-disc {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 24px rgba(124, 108, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.ccm-svc-title {
  display: none;
  font:
    700 14px/1.2 system-ui,
    sans-serif;
  text-align: center;
  padding: 0 12px;
}

.ccm-svc-cta {
  display: block;
  margin-top: 8px;
  padding: 4px 10px;
  font:
    600 10px/1 ui-monospace,
    monospace;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-svc-cta:hover {
  background: #fff;
  color: #7c6cff;
}

.ccm-svc:has(#ccm-svc-0:checked) .ccm-svc-t-0,
.ccm-svc:has(#ccm-svc-1:checked) .ccm-svc-t-1,
.ccm-svc:has(#ccm-svc-2:checked) .ccm-svc-t-2,
.ccm-svc:has(#ccm-svc-3:checked) .ccm-svc-t-3,
.ccm-svc:has(#ccm-svc-4:checked) .ccm-svc-t-4,
.ccm-svc:has(#ccm-svc-5:checked) .ccm-svc-t-5 {
  display: block;
}

.ccm-svc-pointer {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7c6cff;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
  transform: rotate(var(--pa)) translateY(calc(var(--r) * -0.55));
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}

.ccm-svc:has(#ccm-svc-0:checked) {
  --pa: 0deg;
}

.ccm-svc:has(#ccm-svc-1:checked) {
  --pa: 60deg;
}

.ccm-svc:has(#ccm-svc-2:checked) {
  --pa: 120deg;
}

.ccm-svc:has(#ccm-svc-3:checked) {
  --pa: 180deg;
}

.ccm-svc:has(#ccm-svc-4:checked) {
  --pa: 240deg;
}

.ccm-svc:has(#ccm-svc-5:checked) {
  --pa: 300deg;
}

.ccm-svc-sat {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1px solid rgba(124, 108, 255, 0.4);
  color: #c4b5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1));
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s;
  z-index: 4;
}

.ccm-svc-sat span {
  font-size: 18px;
  line-height: 1;
}

.ccm-svc-sat:hover,
.ccm-svc-sat:focus-visible {
  background: #2a2a3e;
  color: #fff;
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}

.ccm-svc:has(#ccm-svc-0:checked) [for="ccm-svc-0"],
.ccm-svc:has(#ccm-svc-1:checked) [for="ccm-svc-1"],
.ccm-svc:has(#ccm-svc-2:checked) [for="ccm-svc-2"],
.ccm-svc:has(#ccm-svc-3:checked) [for="ccm-svc-3"],
.ccm-svc:has(#ccm-svc-4:checked) [for="ccm-svc-4"],
.ccm-svc:has(#ccm-svc-5:checked) [for="ccm-svc-5"] {
  background: #7c6cff;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.3);
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}