.collaboration-section {
  position: relative;
  scroll-margin-top: 110px;
}

.collaboration-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -160px;
  top: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 68%);
  pointer-events: none;
}

.collab-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(480px, 1.18fr);
  align-items: center;
  gap: clamp(42px, 7vw, 88px);
  min-height: 590px;
  padding: clamp(40px, 5vw, 68px);
  border: 1px solid var(--border);
  background:
    linear-gradient(120deg, rgba(76, 194, 255, 0.035), transparent 42%),
    rgba(50, 50, 50, 0.88);
  overflow: hidden;
}

.collab-stage::after {
  content: "OM / COLLABORATION FIELD";
  position: absolute;
  left: 28px;
  bottom: 20px;
  color: var(--text-muted);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

.collab-copy {
  position: relative;
  z-index: 2;
}

.collab-copy .section-title {
  max-width: 560px;
  margin-top: 18px;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.collab-description {
  max-width: 570px;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.9;
}

.collab-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.collab-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(76, 194, 255, 0.44);
  border-radius: 2px;
  background: var(--accent-1);
  color: #172027;
  font: 700 14px/1 var(--font-display);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collab-enter:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(76, 194, 255, 0.14);
}

.collab-enter svg { transition: transform 0.2s ease; }
.collab-enter:hover svg { transform: translateX(4px); }

.collab-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-size: 12px;
}

.collab-status > i,
.collab-live i,
.collab-workspace-heading small i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  box-shadow: 0 0 12px rgba(76, 194, 255, 0.55);
}

.collab-canvas-preview {
  position: relative;
  min-height: 430px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #272727;
  box-shadow: 0 32px 80px rgba(0,0,0,0.38);
  transform: perspective(1100px) rotateY(-4deg) rotateX(1deg);
  transform-origin: center center;
}

.collab-preview-bar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.48);
  font: 10px/1 monospace;
  letter-spacing: 0.08em;
}

.collab-preview-mark,
.collab-workspace-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--accent-1);
  color: #172027;
  font: 800 10px/1 var(--font-display);
}

.collab-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--accent-1);
}

.collab-preview-board {
  position: absolute;
  inset: 46px 0 0;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}

.collab-preview-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.collab-preview-links path {
  fill: none;
  stroke: rgba(59, 130, 246, 0.58);
  stroke-width: 1.25;
  stroke-dasharray: 5 5;
}

.collab-preview-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 145px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(52, 52, 52, 0.96);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 14px 36px rgba(0,0,0,0.24);
}

.collab-preview-node::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
}

.collab-preview-node strong { font: 600 13px/1.3 var(--font-display); }
.collab-preview-node small { color: rgba(255,255,255,0.4); font: 9px/1.3 monospace; }
.node-kicker { color: var(--accent-1); font: 9px/1 monospace; letter-spacing: 0.13em; }
.node-source { left: 4%; top: 10%; }
.node-board { left: 40%; top: 48%; border-color: rgba(76,194,255,0.4); }
.node-review { right: 4%; top: 15%; }
.node-version { right: 7%; bottom: 7%; }

.collab-cursor {
  position: absolute;
  padding: 4px 7px;
  color: white;
  font: 8px/1 monospace;
  letter-spacing: 0.08em;
}

.collab-cursor::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -6px;
  border-right: 7px solid transparent;
  border-bottom: 11px solid currentColor;
  transform: rotate(-24deg);
}

.cursor-a { left: 33%; top: 30%; background: var(--accent-2); }
.cursor-b { right: 21%; top: 54%; background: var(--accent-3); }

.collab-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-top: 0;
}

.collab-flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  min-height: 142px;
  padding: 30px;
  border-right: 1px solid var(--border);
}

.collab-flow li:last-child { border-right: 0; }
.collab-flow li > span { color: var(--accent-1); font: 11px/1.5 monospace; letter-spacing: 0.12em; }
.collab-flow strong { color: var(--text-primary); font: 600 16px/1.3 var(--font-display); }
.collab-flow p { margin-top: 10px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }

.collab-workspace {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: #272727;
}

.collab-workspace.is-open { display: flex; }
.collab-workspace-open { overflow: hidden; }

.collab-workspace-bar {
  flex: 0 0 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(31, 31, 31, 0.97);
}

.collab-workspace-heading,
.collab-workspace-actions,
.collab-workspace-heading small {
  display: flex;
  align-items: center;
}

.collab-workspace-heading { gap: 12px; }
.collab-workspace-heading > div { display: flex; flex-direction: column; gap: 4px; }
.collab-workspace-heading strong { color: white; font: 600 14px/1 var(--font-display); }
.collab-workspace-heading small { gap: 7px; color: rgba(255,255,255,0.46); font-size: 10px; }
.collab-workspace-actions { gap: 10px; }

.collab-workspace-actions a,
.collab-workspace-actions button {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  background: transparent;
  color: rgba(255,255,255,0.76);
  font: 500 12px/1 var(--font-display);
  text-decoration: none;
  cursor: pointer;
}

.collab-workspace-actions a:hover,
.collab-workspace-actions button:hover { color: white; border-color: rgba(76,194,255,0.55); }

.collab-workspace-body { position: relative; flex: 1 1 auto; min-height: 0; }
.collab-workspace iframe { width: 100%; height: 100%; border: 0; background: #272727; }

.collab-frame-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 16px;
  background: #272727;
  color: rgba(255,255,255,0.55);
  text-align: center;
  font-size: 13px;
  transition: opacity 0.25s ease;
}

.collab-frame-state > span {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-top-color: var(--accent-1);
  border-radius: 50%;
  animation: collab-spin 0.9s linear infinite;
}

.collab-frame-state.is-ready { opacity: 0; pointer-events: none; }

@keyframes collab-spin { to { transform: rotate(360deg); } }

body.light-mode .collab-stage {
  background: linear-gradient(120deg, rgba(76, 194, 255, 0.035), transparent 42%), rgba(255,255,255,0.72);
}

@media (max-width: 1100px) {
  .collab-stage { grid-template-columns: 1fr; }
  .collab-canvas-preview { transform: none; min-height: 390px; }
}

@media (max-width: 720px) {
  .collab-stage { min-height: 0; padding: 30px 20px 48px; }
  .collab-copy .section-title { font-size: clamp(34px, 9.7vw, 38px); line-height: 1.08; }
  .collab-canvas-preview { min-height: 340px; }
  .collab-preview-node { width: 120px; padding: 11px; }
  .node-board { left: 35%; }
  .collab-flow { grid-template-columns: 1fr; }
  .collab-flow li { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .collab-flow li:last-child { border-bottom: 0; }
  .collab-workspace-bar { flex-basis: 60px; padding: 0 12px; }
  .collab-workspace-heading strong { font-size: 12px; }
  .collab-workspace-actions a { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .collab-enter,
  .collab-enter svg,
  .collab-frame-state { transition: none; }
  .collab-frame-state > span { animation: none; }
}