.mac-window {
  background: rgba(10, 10, 15, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(10px);
}
.mac-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}
.mac-dots { display: flex; gap: 6px; margin-right: 1rem; }
.mac-dots i { width: 10px; height: 10px; border-radius: 50%; }
.mac-dots i.r { background: #FF5F56; }
.mac-dots i.y { background: #FFBD2E; }
.mac-dots i.g { background: #27C93F; }
.mac-body { padding: 1.5rem; }

.log-line { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.75rem; color: rgba(255, 255, 255, 0.7); display: flex; gap: 0.75rem; }
.log-time { color: rgba(255, 255, 255, 0.3); }
.log-agent.product { color: #6DD5FA; }
.log-agent.legal { color: #FF5F56; }
.log-agent.arch { color: #E0A94C; }
.log-agent.core { color: #39FF14; font-weight: bold; }

.v-timeline { display: flex; height: 32px; border-radius: 6px; overflow: hidden; margin: 2rem 0 1rem; }
.v-seg { display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: bold; color: #000; }
.v-seg.hook { width: 15%; background: #39FF14; }
.v-seg.body { width: 65%; background: #6DD5FA; }
.v-seg.cta { width: 20%; background: #E0A94C; }
.v-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-bottom: 2rem; }

.chart-wrap { position: relative; height: 120px; border-bottom: 1px solid rgba(255,255,255,0.1); border-left: 1px solid rgba(255,255,255,0.1); margin-top: 1rem; }
.chart-path { fill: none; stroke: #39FF14; stroke-width: 2; filter: drop-shadow(0 4px 6px rgba(57,255,20,0.4)); }
.chart-area { fill: rgba(57,255,20,0.1); opacity: 0.5; }
.chart-marker { position: absolute; width: 1px; height: 100%; background: rgba(255,255,255,0.2); }
.chart-marker::after { content: attr(data-label); position: absolute; top: -20px; left: -20px; font-size: 0.7rem; color: rgba(255,255,255,0.6); font-family: 'JetBrains Mono'; white-space: nowrap; }

.chat-ui { display: flex; flex-direction: column; gap: 1rem; }
.chat-msg { max-width: 80%; padding: 1rem 1.25rem; border-radius: 16px; font-size: 0.95rem; line-height: 1.5; }
.chat-msg.user { align-self: flex-end; background: rgba(255,255,255,0.1); border-bottom-right-radius: 4px; }
.chat-msg.agent { align-self: flex-start; background: linear-gradient(135deg, rgba(255,87,34,0.15) 0%, rgba(255,87,34,0.05) 100%); border: 1px solid rgba(255,87,34,0.2); border-bottom-left-radius: 4px; }
.chat-report { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(0,0,0,0.3); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.chat-report-icon { width: 32px; height: 32px; background: #FF5722; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem; }

.swarm-orbit { position: relative; width: 300px; height: 300px; margin: 0 auto; }
.orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: radial-gradient(circle, #39FF14 0%, rgba(57,255,20,0.2) 80%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #000; box-shadow: 0 0 30px rgba(57,255,20,0.4); z-index: 10;}
.orbit-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(255,255,255,0.1); border-radius: 50%; }
.orbit-ring.r1 { width: 180px; height: 180px; animation: spin 20s linear infinite; }
.orbit-ring.r2 { width: 280px; height: 280px; animation: spin 30s linear infinite reverse; }
.orbit-node { position: absolute; width: 32px; height: 32px; background: rgba(10,10,15,1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold; color: #fff; }
.r1 .orbit-node:nth-child(1) { top: -16px; left: 74px; border-color: #6DD5FA; }
.r1 .orbit-node:nth-child(2) { bottom: -16px; left: 74px; border-color: #FF5F56; }
.r2 .orbit-node:nth-child(1) { top: 60px; left: -16px; border-color: #E0A94C; }
.r2 .orbit-node:nth-child(2) { bottom: 60px; right: -16px; border-color: #fff; }
@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.kanban-mock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kb-col { background: rgba(255,255,255,0.02); border-radius: 8px; padding: 1rem; border: 1px solid rgba(255,255,255,0.05); }
.kb-col-title { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-bottom: 1rem; text-transform: uppercase; }
.kb-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; font-size: 0.85rem; }
.kb-card .tag { display: inline-block; padding: 2px 6px; background: rgba(255,87,34,0.1); color: #FF5722; border-radius: 4px; font-size: 0.65rem; margin-bottom: 0.5rem; font-family: 'JetBrains Mono'; }