<div class="cbgp-quantum" role="group" aria-label="Save options">
  <button type="button" class="cbgp-quantum-main">Deploy</button>
  <details class="cbgp-quantum-menu">
    <summary aria-label="More deploy options">
      <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
    </summary>
    <div class="cbgp-quantum-list">
      <button type="button">Deploy preview</button>
      <button type="button">Deploy and tag</button>
      <button type="button">Deploy and notify</button>
    </div>
  </details>
</div>

.cbgp-quantum {
  display: inline-flex; position: relative;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-quantum-main {
  padding: 11px 22px;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, rgba(0,255,224,0.18) 0%, rgba(255,90,241,0.18) 100%);
  color: #fff;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 10px 0 0 10px;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-shadow: 0 0 8px rgba(0,255,224,0.3);
  transition: filter 0.2s;
}
.cbgp-quantum-main:hover { filter: brightness(1.18); }
.cbgp-quantum-menu summary {
  list-style: none; cursor: pointer;
  padding: 11px 14px;
  display: flex; align-items: center;
  border-radius: 0 10px 10px 0;
  transition: background 0.18s;
}
.cbgp-quantum-menu summary::-webkit-details-marker { display: none; }
.cbgp-quantum-menu summary svg { width: 12px; height: 12px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-quantum-menu summary:hover { background: rgba(0,255,224,0.06); }
.cbgp-quantum-menu[open] summary { background: rgba(0,255,224,0.1); }
.cbgp-quantum-menu[open] summary svg { transform: rotate(180deg); }
.cbgp-quantum-list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(0,255,224,0.25);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.08);
  clip-path: inset(0 0 0 0 round 8px);
  animation: cbgp-quantum-in 0.25s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-quantum-in {
  from { clip-path: inset(0 0 100% 0 round 8px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 8px);    opacity: 1; }
}
.cbgp-quantum-list button {
  display: block; width: 100%;
  padding: 9px 14px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 500 12px/1 ui-sans-serif, system-ui;
  text-align: left;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.cbgp-quantum-list button:hover { background: rgba(0,255,224,0.08); color: #fff; }