/* ========================================
   VERTICAL JOURNEY FLOW
   ======================================== */
.vflow { position: relative; max-width: 1000px; margin: 0 auto; }
.vflow::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--mint), var(--lavender), var(--gold-accent), var(--mint));
  transform: translateX(-50%);
}
.vflow-step { display: flex; align-items: flex-start; margin-bottom: 60px; position: relative; }
.vflow-step:last-child { margin-bottom: 0; }
.vflow-step:nth-child(odd) { flex-direction: row; }
.vflow-step:nth-child(even) { flex-direction: row-reverse; }
.vflow-content {
  width: calc(50% - 40px); padding: 32px; border-radius: 20px;
  position: relative; transition: transform .3s, box-shadow .3s;
}
.vflow-content:hover { transform: translateY(-4px); }
.vflow-step:nth-child(odd) .vflow-content { margin-right: auto; }
.vflow-step:nth-child(even) .vflow-content { margin-left: auto; }
.vflow-dot {
  position: absolute; left: 50%; top: 40px; width: 20px; height: 20px;
  border-radius: 50%; border: 4px solid var(--dark); transform: translateX(-50%); z-index: 2;
}
.vflow-step:nth-child(1) .vflow-dot { background: var(--mint); }
.vflow-step:nth-child(2) .vflow-dot { background: var(--lavender); }
.vflow-step:nth-child(3) .vflow-dot { background: var(--gold-accent); }
.vflow-step:nth-child(4) .vflow-dot { background: var(--mint); }
.vflow-step:nth-child(5) .vflow-dot { background: var(--lavender); }
.vflow-step:nth-child(6) .vflow-dot { background: var(--gold-accent); }
.vflow-step:nth-child(7) .vflow-dot { background: var(--mint); }
.vflow-step:nth-child(8) .vflow-dot { background: var(--lavender); }
.vflow-stage { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.vflow-title { font-family: 'Newsreader', serif; font-size: 20px; font-weight: 600; color: white; margin-bottom: 8px; }
.vflow-desc { font-size: 13px; color: var(--text-on-dark-muted); line-height: 1.65; margin-bottom: 12px; }
.vflow-roles { display: flex; gap: 6px; flex-wrap: wrap; }
.vflow-role { padding: 4px 12px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.vr-t { background: rgba(157, 212, 207, 0.15); color: var(--mint); }
.vr-o { background: rgba(167, 160, 210, 0.15); color: var(--lavender); }
.vr-a { background: rgba(212, 168, 67, 0.15); color: var(--gold-accent); }
.vflow-connector { position: absolute; top: 48px; width: 20px; height: 2px; background: var(--border-dark); }
.vflow-step:nth-child(odd) .vflow-connector { right: calc(50% - 30px); left: auto; }
.vflow-step:nth-child(even) .vflow-connector { left: calc(50% - 30px); right: auto; }

/* Dark Card Variants for Flow */
.vfc-mint { background: rgba(157, 212, 207, 0.06); border: 1px solid rgba(157, 212, 207, 0.15); }
.vfc-lav { background: rgba(167, 160, 210, 0.06); border: 1px solid rgba(167, 160, 210, 0.15); }
.vfc-gold { background: rgba(212, 168, 67, 0.06); border: 1px solid rgba(212, 168, 67, 0.15); }
.vfc-dark { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-dark); }